Anpassung primary-button, badge und Event erstellen

css/event_create.css

@@ -6,25 +6,6 @@
   --control-min-height: 3rem;
   --input-min-height: 3.5rem;
   --card-min-height: 6rem;
-
-  --color-bg: var(--butter);
-  --color-surface: var(--white);
-  --color-surface-soft: var(--butter-light);
-  --color-text: var(--black);
-  --color-text-secondary: rgba(34, 33, 26, 0.8);
-  --color-muted: rgba(34, 33, 26, 0.68);
-  --color-border: rgba(102, 52, 13, 0.16);
-  --color-border-strong: var(--brown);
-  --color-divider: rgba(102, 52, 13, 0.14);
-  --color-primary: var(--olive);
-  --color-primary-hover: var(--olive-dark);
-  --color-progress-bg: rgba(212, 75, 36, 0.18);
-  --color-focus: var(--blue);
-  --color-error: var(--error);
-  --shadow-soft: 0 12px 30px rgba(102, 52, 13, 0.1);
-  --input-border-soft: rgba(102, 52, 13, 0.2);
-  --input-border-focus: rgba(107, 107, 5, 0.45);
-  --input-shadow-focus: 0 0 0 4px rgba(107, 107, 5, 0.12);
 }
 
 *,
@@ -33,77 +14,12 @@
   box-sizing: border-box;
 }
 
-html {
-  font-size: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: var(--font-main);
-  background: var(--color-bg);
-  color: var(--color-text);
-  line-height: 1.5;
-}
-
-a,
-button,
-input,
-textarea {
-  font: inherit;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
 .site-header {
   background: var(--color-bg);
   border-top: 2px solid #232323;
   border-bottom: 1px solid var(--color-border);
 }
 
-.site-nav {
-  width: min(100% - 2rem, var(--max-width));
-  margin: 0 auto;
-  min-height: var(--header-height);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-4);
-}
-
-.site-logo {
-  font-size: 2rem;
-  font-weight: 800;
-  letter-spacing: 0.02em;
-}
-
-.site-nav-links {
-  display: flex;
-  align-items: center;
-  gap: var(--space-5);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.site-nav-links a {
-  font-weight: 500;
-}
-
-.site-nav-links li:last-child a {
-  width: 2.25rem;
-  height: 2.25rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: #231f20;
-  color: #ffffff;
-  font-weight: 700;
-}
-
 .event-create-page {
   width: min(100% - 2rem, var(--max-width));
   margin: 0 auto;
@@ -173,35 +89,17 @@ fieldset {
   gap: var(--space-3);
 }
 
-.step-kicker {
-  margin: 0;
-  font-weight: 700;
-  color: var(--color-muted);
-  letter-spacing: 0.02em;
-}
-
-h1,
-h2 {
-  margin: 0;
-  font-family: "Bagel Fat One", cursive;
-  font-size: clamp(2rem, 4vw, 4rem);
-  line-height: 1.03;
-  letter-spacing: -0.03em;
-  color: var(--brown);
-}
 
 .step-text {
-  margin: 0;
+  /* definiert Breite des Beschriebtexts der einzelnen Schritte*/
-  max-width: 42rem;
+  max-width: 600px;
-  color: var(--color-text-secondary);
-  font-size: clamp(1rem, 1.4vw, 1.2rem);
 }
 
 .intro-card,
 .review-card {
   border: 1px solid var(--color-border);
   background: var(--color-surface);
-  box-shadow: var(--shadow-soft);
+  box-shadow: var(--shadow-interaction);
 }
 
 .intro-card {
@@ -224,13 +122,17 @@ h2 {
   height: 100%;
   display: block;
   object-fit: cover;
-  border-radius: 1.875rem;
+  border-radius: var(--radius-lg); 
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }
 
 label,
 legend {
-  font-weight: 700;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: var(--ls-sm);
+    line-height: 1;
+    margin-bottom: var(--space-3);
 }
 
 .field-hint {
@@ -244,15 +146,23 @@ input[type="date"],
 input[type="time"],
 input[type="number"],
 textarea {
-  width: 100%;
+  padding: 1rem 1.25rem;
-  min-height: var(--input-min-height);
+  border: 1.5px solid var(--olive-light);
-  padding: 1rem 1.1rem;
+  border-radius: var(--radius-md);
-  border: 1px solid var(--input-border-soft);
-  border-radius: 1.125rem;
   background: var(--butter-light);
-  color: var(--color-text);
+  transition: border-color 0.2s ease;
-  box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04);
+}
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+
+/* Blendet die Standard-Buttons für number inputs aus */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
 textarea {
@@ -273,15 +183,12 @@ input[type="date"]:focus,
 input[type="time"]:focus,
 input[type="number"]:focus,
 textarea:focus {
-  border-color: var(--input-border-focus);
+  border-color: var(--olive-dark);
-  box-shadow: var(--input-shadow-focus);
-  background: var(--butter-light);
-  outline: none;
 }
 
 .field-invalid {
-  border-color: var(--tomato) !important;
+  border-color: var(--error) !important;
-  box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
+  box-shadow: var(--shadow-error);
 }
 
 .field-row {
@@ -297,23 +204,18 @@ textarea:focus {
 .option-card {
   position: relative;
   display: grid;
-  gap: 0.15rem;
+  padding: 1.25rem;
-  min-height: var(--card-min-height);
+  border: 1.5px solid var(--olive-light);
-  padding: 1rem 1rem 1rem 1.05rem;
+  border-radius: var(--radius-md); 
-  border: 1px solid var(--color-border);
-  border-radius: 1rem;
   background: var(--butter-light);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
+  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
 }
 
-.option-card small {
-  color: var(--color-muted);
-}
 
 .option-card:hover {
   background: var(--olive-light);
-  transform: translateY(-1px);
+  box-shadow: var(--shadow-interaction);
-  box-shadow: var(--shadow-soft);
+  transform: translateY(-3px);
 }
 
 .option-card input {
@@ -324,14 +226,14 @@ textarea:focus {
 }
 
 .option-card:has(input:checked) {
-  border: 1px solid var(--color-primary);
+  border: 1.5px solid var(--olive-light);
-  background: var(--color-primary);
+  background: var(--olive-light);
-  color: var(--white);
 }
 
+/*
 .option-card:has(input:checked) small {
   color: rgba(247, 246, 230, 0.88);
-}
+}*/
 
 .option-card--invalid {
   border-color: var(--tomato) !important;
@@ -349,34 +251,6 @@ textarea:focus {
   text-align: center;
 }
 
-.counter-button,
-.button {
-  min-height: var(--control-min-height);
-}
-
-.counter-button {
-  width: var(--control-min-height);
-  height: var(--control-min-height);
-  border: 1px solid var(--color-primary);
-  border-radius: 50%;
-  background: var(--color-primary);
-  color: var(--white);
-  font-size: 1.5rem;
-  line-height: 1;
-  box-shadow: 0 6px 16px rgba(107, 107, 5, 0.18);
-  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.counter-button:hover {
-  background: var(--color-primary-hover);
-  transform: translateY(-1px);
-}
-
-.counter-button:focus-visible {
-  outline: 3px solid rgba(107, 107, 5, 0.22);
-  outline-offset: 3px;
-}
-
 .review-card {
   display: grid;
   gap: var(--space-4);
@@ -512,7 +386,7 @@ textarea:focus {
   font-size: 0.95rem;
 }
 
-.button {
+/*.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -522,40 +396,12 @@ textarea:focus {
   background: transparent;
   color: var(--color-text);
   cursor: pointer;
-}
+}*/
 
 .button--ghost:hover {
   background: rgba(0, 0, 0, 0.03);
 }
 
-.button--text {
-  border: 2px solid var(--olive);
-  color: var(--olive);
-  background: transparent;
-  padding-left: 1.35rem;
-}
-
-.button--text:hover {
-  background: var(--olive-light);
-  color: var(--black);
-}
-
-.button--primary {
-  min-width: 10rem;
-  border-color: var(--color-primary);
-  background: var(--color-primary);
-  color: #ffffff;
-  font-weight: 700;
-}
-
-.button--primary:hover {
-  background: var(--color-primary-hover);
-}
-
-.button--primary:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
 
 .button--intro {
   justify-self: start;

css/event_overview.css

@@ -70,7 +70,7 @@
     margin: 0 0 var(--space-1);
     color: var(--olive);
     font-size: 18px;
-    letter-spacing: var(--ls-label);
+    letter-spacing: var(--ls-la);
     font-weight: 500;
 }
 
@@ -367,7 +367,7 @@
     color: var(--olive);
     font-size: 13px;
     font-weight: 600;
-    letter-spacing: var(--ls-label);
+    letter-spacing: var(--ls-la);
     text-transform: uppercase;
 }
 
@@ -508,7 +508,7 @@
     color: var(--olive);
     font-size: 12px;
     font-weight: 600;
-    letter-spacing: var(--ls-label);
+    letter-spacing: var(--ls-la);
     text-transform: uppercase;
 }
 
@@ -641,7 +641,7 @@
     font-size: 12px;
     font-weight: 600;
     color: var(--tomato);
-    letter-spacing: var(--ls-label);
+    letter-spacing: var(--ls-la);
     text-decoration: none;
 }
 

css/index.css

@@ -54,25 +54,12 @@
   padding: 44px 0;
 }
 
-.hero__left .badge {
+/*
-  margin-bottom: var(--space-3);
+.hero__button-primarys {
-}
-
-.hero__left h1 {
-  font-size: 2.64rem;
-  color: var(--black);
-}
-
-.hero__left p {
-  margin: 24px 0 32px;
-  line-height: 1.8;
-}
-
-.hero__buttons {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
-}
+}*/
 
 .hero__right {
   display: flex;
@@ -369,7 +356,7 @@
 }
 
 
-/* --- CTA button --- */
+/* --- CTA button-primary --- */
 
 .btn {
   border: none;

css/my_profil.css

@@ -19,7 +19,7 @@
     color: var(--olive);
     font-size: 1rem;
     font-weight: 500;
-    letter-spacing: var(--ls-label);
+    letter-spacing: var(--ls-la);
 }
 
 #profile-headline {
@@ -161,7 +161,7 @@
     color: var(--olive);
     font-size: 0.72rem;
     font-weight: 700;
-    letter-spacing: var(--ls-label);
+    letter-spacing: var(--ls-la);
     text-transform: uppercase;
 }
 
@@ -261,7 +261,7 @@
     color: var(--olive);
     font-size: 0.8rem;
     font-weight: 600;
-    letter-spacing: var(--ls-label);
+    letter-spacing: var(--ls-la);
     text-transform: uppercase;
 }
 

css/stylesheet_global.css

@@ -20,12 +20,12 @@
     --tomato: #D44B24;
     --tomato-dark: #D44B24;
     --olive: #6B6B05;
-    --olive-dark: #5C5C05;
+    --olive-dark: #545404;
     --olive-light: #C8CC7A;
     --butter: #F5F1BC;
     --butter-light: #F7F6E6;
     --white: #ffffff;
-    --black: #22211A;
+    --black: #141411;
     --brown: #66340d;
     --blue: #3489DA;
     --blue-dark: #1D70BF;
@@ -34,35 +34,36 @@
     --font-main: 'Jost', sans-serif;
     --font-size-base: 1rem;
 
-    /* Spacing Scale */
+    /* Shadows */
-    --space-1: 0.5rem;
+    --shadow-interaction: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1);
-    --space-2: 0.75rem;
+    --shadow-error: 0 0 0 2px rgba(255, 59, 48, 0.1);
-    --space-3: 1rem;
+
-    --space-4: 1.25rem;
+    /* Spacing Scale > 1rem = 16px*/
-    --space-5: 1.5rem;
+    --space-1: 0.5rem; /* 8px */
-    --space-6: 2rem;
+    --space-2: 0.75rem; /* 12px */
-    --space-7: 3rem;
+    --space-3: 1rem; /* 16px */
-    --space-8: 4rem;
+    --space-4: 1.5rem; /* 24px */
+    --space-5: 2rem; /* 32px */
+    --space-6: 2.5rem; /* 40px */
+    --space-7: 3rem; /* 48px */
+    --space-8: 4rem; /* 64px */
 
 
     /* Radius Scale */
-    --radius-pill: 62.4375rem;
+    --radius-pill: 100rem;
     --radius-sm: 0.5rem;
-    --radius-md: 1.5rem;
+    --radius-md: 1rem;
-    --radius-lg: 1.875rem;
+    --radius-lg: 2rem;
 
     /* Letter Spacing */
     --ls-none: 0;
     --ls-sm: 2.5%;
-    --ls-label: 0.045rem;
+    --ls-la: 5%;
 }
 
 /* Base Styles */
 body {
     font-family: var(--font-main);
-    font-size: 1.125rem;
-    line-height: 1.5;
-    color: var(--black);
     background-color: var(--butter);
 }
 
@@ -78,15 +79,28 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: 2em;
+    font-size: 2.5rem;
     font-weight: 600;
     line-height: 120%;
     letter-spacing: var(--ls-sm);
     color: var(--brown);
+    margin-bottom: 2rem;
+}
+
+h2 {
+    font-size: 2rem;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: var(--ls-sm);
+    color: var(--brown);
+    margin-bottom: 1.5rem;
 }
 
 p {
     font-family: 'Jost', sans-serif;
+    font-size: 1.125rem;
+    line-height: 1.5;
+    color: var(--black);
     margin-bottom: 1rem;
 }
 
@@ -119,7 +133,7 @@ p {
     -webkit-backdrop-filter: blur(3px) saturate(140%);*/
 
     border-radius: var(--radius-lg);
-    box-shadow: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1);
+    box-shadow: var(--shadow-interaction);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -151,18 +165,20 @@ p {
     letter-spacing: var(--ls-sm);
     line-height: 1;
     text-decoration: none;
+    padding-bottom: 4px;
 }
 
 .nav-tab:hover, .nav-tab:active, 
 .nav-tab:focus-visible {
     text-decoration: underline;
-    text-underline-offset: 4px; 
+    text-underline-offset: 6px; 
+    text-decoration-thickness: 1.5px;
 }
 
-.button-small:hover, .button-small:active, 
+.nav-tab--active {
-.button-small:focus-visible {
+    text-decoration: underline;
-    background: var(--olive-dark);
+    text-underline-offset: 6px;
-    color: var(--black);
+    text-decoration-thickness: 1.5px;
 }
 
 .nav-tab-links {
@@ -174,24 +190,39 @@ p {
 
 /* Badge */
 .badge {
+    position: relative;
     display: inline-block;
-    padding: 0.25rem 0.75rem;
+    width: fit-content;
-    background-color: var(--olive-light);
     color: var(--olive-dark);
-    font-family: 'Jost', sans-serif;
+    font-family: var(--font-main);
-    font-size: 0.75rem;
+    font-size: 1rem;
     font-weight: 600;
-    letter-spacing: 0.08rem;
+    letter-spacing: var(--ls-la);
-    text-transform: uppercase;
+    margin-bottom: var(--space-6);
-    border-radius: var(--radius-pill);
+    z-index: 0;
-    line-height: 1.4;
+}
+
+.badge::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--olive-light);
+    margin: -0.25rem -0.75rem;
+    z-index: -1;
+
+    clip-path: polygon(
+        1.5% 0%, 
+        100% 0%, 
+        98.5% 100%, 
+        0% 100%
+    );
 }
 
 
 /* Buttons */
-.button {
+.button-primary {
     display: inline-block;
-    padding: 0.5rem 1.25rem;
+    padding: 0.5rem 1.5rem;
     background-color: var(--olive);
     border: none;
     border-radius: var(--radius-lg);
@@ -201,9 +232,10 @@ p {
     color: var(--butter-light);
     cursor: pointer;
     text-decoration: none;
+    transition: background-color 0.2s ease;
 }
 
-.button:hover {
+.button-primary:hover {
     background-color: var(--olive-dark);
 }
 
@@ -218,6 +250,24 @@ p {
     color: var(--black);
 }
 
+.counter-button {
+    padding: 0.5rem 1rem;
+    width: 46px;
+    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;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+}
+
+.counter-button:hover, .counter-button:focus-visible {
+    background-color: var(--olive-dark);
+}
 
 .button-small {
     background: var(--olive);
@@ -262,7 +312,7 @@ p {
     height: 2.375rem;
     border-radius: 1.1875rem;
     background: var(--tomato);
-    color: var(--butter);
+    color: var(--white);
     font-size: 1.0625rem;
     font-weight: 500;
     letter-spacing: var(--ls-ui);

event_create.html

@@ -3,16 +3,19 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Event erstellen | Invité</title>
+  <title>Invité | Event erstellen</title>
 
-  <!-- Globales Stylesheet -->
-  <link rel="stylesheet" href="css/stylesheet_global.css">
   <!-- Stylesheet für diese Seite-->
   <link rel="stylesheet" href="css/event_create.css" />
   <script src="js/navigation.js" defer></script>
+
+    <!-- Globales Stylesheet -->
+  <link rel="stylesheet" href="css/stylesheet_global.css">
+
 </head>
 
 <body>
+
 <!-- Top Navigation mit Seitenlinks -->
 <header class="top-nav-wrap">
     <div class="top-nav">
@@ -38,13 +41,13 @@
       >
         <div class="step-layout step-layout--intro">
           <div class="step-copy">
-            <p class="step-kicker">Event erstellen</p>
+            <p class="badge">Event erstellen</p>
             <h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
             <p class="step-text">
               Erzähl uns von deiner Idee, vom Essen bis zur Stimmung. Ob Dinner, Brunch
               oder etwas ganz Eigenes wir helfen dir dabei, dein Event in sieben Schritten aufzubauen.
             </p>
-            <button type="button" class="button button--primary button--intro" data-start-flow>
+            <button type="button" class="button-primary button--intro" data-start-flow>
               Los geht’s!
             </button>
           </div>
@@ -62,7 +65,7 @@
       <section class="step" data-step="1" aria-labelledby="step1-title">
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Schritt 1</p>
+            <p class="badge">Schritt 1</p>
             <h2 id="step1-title">Was hast du vor?</h2>
             <p class="step-text">
               Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch,
@@ -135,7 +138,7 @@
       <section class="step" data-step="2" aria-labelledby="step2-title">
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Schritt 2</p>
+            <p class="badge">Schritt 2</p>
             <h2 id="step2-title">Was kommt auf den Tisch?</h2>
             <p class="step-text">
               Mach uns neugierig. Was gibt es zu essen? Gibt es eine bestimmte Ernährungsform oder ein Motto? Je mehr du verrätst, desto besser können sich deine Gäste auf dein Event freuen.
@@ -176,7 +179,7 @@
       <section class="step" data-step="3" aria-labelledby="step3-title">
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Schritt 3</p>
+            <p class="badge">Schritt 3</p>
             <h2 id="step3-title">Gibt es etwas zu beachten?</h2>
             <p class="step-text">
               Gibt es Allergien, Unverträglichkeiten oder andere Hinweise, die für dein Event wichtig sind? So wissen deine Gäste gleich, worauf sie sich einstellen können.
@@ -217,7 +220,7 @@
       <section class="step" data-step="4" aria-labelledby="step4-title">
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Schritt 4</p>
+            <p class="badge">Schritt 4</p>
             <h2 id="step4-title">Wann findet dein Event statt?</h2>
             <p class="step-text">
               Wähle Datum und Uhrzeit für dein Event. So können deine Gäste direkt einschätzen, ob der Termin für sie passt.
@@ -243,7 +246,7 @@
       <section class="step" data-step="5" aria-labelledby="step5-title">
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Schritt 5</p>
+            <p class="badge">Schritt 5</p>
             <h2 id="step5-title">Wo findet dein Event statt?</h2>
             <p class="step-text">
               Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
@@ -267,7 +270,7 @@
       <section class="step" data-step="6" aria-labelledby="step6-title">
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Schritt 6</p>
+            <p class="badge">Schritt 6</p>
             <h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
             <p class="step-text">
               Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht.
@@ -301,7 +304,7 @@
       <section class="step" data-step="7" aria-labelledby="step7-title">
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Schritt 7</p>
+            <p class="badge">Schritt 7</p>
             <h2 id="step7-title">Dein Event auf einen Blick.</h2>
             <p class="step-text">
               Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
@@ -379,11 +382,11 @@
         </div>
 
         <div class="flow-actions">
-          <button type="button" id="backButton" class="button button--text">Zurück</button>
+          <button type="button" id="backButton" class="button-primary">Zurück</button>
 
           <div class="flow-actions-right">
             <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
-            <button type="button" id="nextButton" class="button button--primary">Weiter</button>
+            <button type="button" id="nextButton" class="button-primary button--primary">Weiter</button>
           </div>
         </div>
       </div>
@@ -397,7 +400,7 @@
       >
         <div class="step-layout">
           <div class="step-copy">
-            <p class="step-kicker">Event erstellt</p>
+            <p class="badge">Event erstellt</p>
             <h2 id="success-title">Dein Event ist ready.</h2>
             <p class="step-text">
               Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
@@ -407,7 +410,7 @@
 
           <div class="review-card review-card--success">
             <div class="submission-success-actions">
-              <a class="button button--primary" href="my_profil.html">Weiter zu deinem Profil</a>
+              <a class="button-primary button--primary" href="my_profil.html">Weiter zu deinem Profil</a>
             </div>
           </div>
         </div>

index.html

@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Invité | Events entdecken</title>
+  <title>Invité</title>
+
+  <!-- Stylesheet für diese Seite-->
+  <link rel="stylesheet" href="css/index.css">
 
   <!-- Globales Stylesheet -->
   <link rel="stylesheet" href="css/stylesheet_global.css">
-  <!-- Stylesheet für diese Seite-->
+
-  <link rel="stylesheet" href="css/index.css">
   <!-- Font Awesome Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <script src="js/navigation.js" defer></script>
@@ -31,10 +33,10 @@
       <!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
       <section class="hero">
         <div class="hero__left">
-          <span class="badge">Einfach. Lecker. Gemeinsam.</span>
+          <span class="badge">einfach. lecker. gemeinsam.</span>
           <h1>Teile deine Leidenschaft, geniesse gemeinsam.</h1>
           <p>Ob du als leidenschaftlicher Hobbykoch Gastgeber sein möchtest oder als Feinschmecker einen Platz an einem lokalen Tisch suchst Invité verbindet Menschen durch die Kraft einer gemeinsamen Mahlzeit.</p>
-          <a class="button" href="signup.html">Anmelden</a>
+          <a class="button-primary" href="signup.html">Anmelden</a>
         </div>
 
         <div class="hero__right">

js/my_profil.js

@@ -494,7 +494,7 @@
                 <p class="profile-empty-kicker">Keine Treffer</p>
                 <h3>${emptyStateConfig.title}</h3>
                 <p>${emptyStateConfig.text}</p>
-                <a class="button" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
+                <a class="button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
             `;
             container.appendChild(emptyElement);
             return;

js/navigation.js

@@ -68,11 +68,31 @@ document.addEventListener('DOMContentLoaded', () => {
     function buildLoggedInNavigation(user) {
         const initial = (user.vorname || 'U').charAt(0).toUpperCase();
         const isEventOverview = currentPage === 'event_overview.html';
+        const isEventCreate = currentPage === 'event_create.html';
 
         return `
-            ${isEventOverview ? '' : '<a class="nav-tab" href="event_overview.html">Event finden</a>'}
+            <a
-            <a class="button-small" href="event_create.html">Event erstellen</a>
+                class="nav-tab${isEventOverview ? ' nav-tab--active' : ''}"
-            <a class="profile-pill" href="my_profil.html" aria-label="Mein Profil" title="${user.vorname || 'Profil'}">${initial}</a>
+                href="event_overview.html"
+                ${isEventOverview ? 'aria-current="page"' : ''}
+            >
+                Event finden
+            </a>
+            <a
+                class="nav-tab${isEventCreate ? ' nav-tab--active' : ''}"
+                href="event_create.html"
+                ${isEventCreate ? 'aria-current="page"' : ''}
+            >
+                Event erstellen
+            </a>
+            <a
+                class="profile-pill"
+                href="my_profil.html"
+                aria-label="Mein Profil"
+                title="${user.vorname || 'Profil'}"
+            >
+                ${initial}
+            </a>
         `;
     }
 

login.html

@@ -48,7 +48,7 @@
                     <div class="error-message" id="passwortError">Bitte gib dein Passwort ein.</div>
                 </div>
 
-                <button type="submit" class="button">Login</button>
+                <button type="submit" class="button-primary">Login</button>
 
                 <div class="signup-hint">
                     Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a>

my_profil.html

@@ -38,8 +38,8 @@
         <h2 class="panel-title">Du bist noch nicht eingeloggt</h2>
         <p>Melde dich an, damit wir deine Events und Anmeldungen anzeigen können.</p>
         <div class="profile-cta-row">
-            <a class="button" href="login.html">Zum Login</a>
+            <a class="button-primary" href="login.html">Zum Login</a>
-            <a class="button profile-button-secondary" href="signup.html">Konto erstellen</a>
+            <a class="button-primary profile-button-secondary" href="signup.html">Konto erstellen</a>
         </div>
     </section>
 
@@ -96,7 +96,7 @@
                     <p class="input-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
                 </div>
 
-                <button class="button" type="submit">Profil speichern</button>
+                <button class="button-primary" type="submit">Profil speichern</button>
                 <p id="profile-feedback" class="profile-feedback" aria-live="polite"></p>
             </form>
         </article>
@@ -114,8 +114,8 @@
             Bist du sicher, dass du dich abmelden möchtest?
         </div>
         <div class="modal-footer">
-            <button class="button button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
+            <button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
-            <button class="button" type="button" onclick="confirmLogout()">Abmelden</button>
+            <button class="button-primary" type="button" onclick="confirmLogout()">Abmelden</button>
         </div>
     </div>
 </div>
@@ -134,8 +134,8 @@
             Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
         </div>
         <div class="modal-footer">
-            <button class="button button--outline" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
+            <button class="button-primary button--outline" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
-            <button class="button" type="button" id="confirmCancelEventBtn" style="background-color: var(--tomato); border-color: var(--tomato);">Event absagen</button>
+            <button class="button-primary" type="button" id="confirmCancelEventBtn" style="background-color: var(--tomato); border-color: var(--tomato);">Event absagen</button>
         </div>
     </div>
 </div>

signup.html

@@ -64,7 +64,7 @@
                     <div class="error-message" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
                 </div>
 
-                <button type="submit" class="button">Konto erstellen</button>
+                <button type="submit" class="button-primary">Konto erstellen</button>
 
 
                 <div class="login-hint">
@@ -86,7 +86,7 @@
                 Willkommen bei Invité! Dein Account wurde erfolgreich erstellt. Entdecke jetzt die neuesten Events in deiner Nähe.
             </div>
             <div class="modal-footer">
-                <button class="button" onclick="closeWelcomeModal()">Weiter zu den Events</button>
+                <button class="button-primary" onclick="closeWelcomeModal()">Weiter zu den Events</button>
             </div>
         </div>
     </div>