From e3f7233581171b7184ff3b695ffeffcb2c1e6ab5 Mon Sep 17 00:00:00 2001
From: oswaldsimona <simona.oswald@stud.fhgr.ch>
Date: Sat, 25 Apr 2026 20:36:53 +0200
Subject: [PATCH] =?UTF-8?q?Styling=20Filter=20=C3=9Cbersicht=20Events?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/event_create.css      |  4 +--
 css/event_overview.css    | 50 ++++++++----------------------------
 css/login_signup.css      |  6 -----
 css/my_profil.css         | 39 ++++++++++++++++------------
 css/stylesheet_global.css | 54 +++++++++++++++++++--------------------
 data/events.json          |  2 +-
 event_create.html         |  8 +++---
 event_detail.html         |  4 +--
 event_overview.html       | 24 ++++++++---------
 index.html                |  4 +--
 js/event_detail.js        |  4 +--
 js/event_overview.js      |  4 +--
 js/my_profil.js           |  2 +-
 my_profil.html            | 18 ++++++-------
 signup.html               | 10 ++++----
 15 files changed, 101 insertions(+), 132 deletions(-)

diff --git a/css/event_create.css b/css/event_create.css
index bb566a6..49352e3 100644
--- a/css/event_create.css
+++ b/css/event_create.css
@@ -31,7 +31,7 @@
 
 /*
 .submission-success {
-  padding: var(--space-24) 0 var(--space-7);
+  padding: var(--space-24) 0 var(--space-48);
 }*/
 
 .submission-success-title-row {
@@ -86,7 +86,7 @@
   min-height: 60vh;
   align-content: center;
   grid-template-columns: 1fr;
-  gap: var(--space-7);
+  gap: var(--space-48);
 }
 
 .step-copy,
diff --git a/css/event_overview.css b/css/event_overview.css
index 33b8ac1..dd0d292 100644
--- a/css/event_overview.css
+++ b/css/event_overview.css
@@ -43,11 +43,11 @@
 .filter-row {
     display: flex;
     justify-content: flex-start;
-    gap: var(--space-16);
 }
 
 .category-group {
-    gap: var(--space-12);
+    display: flex; 
+    gap: var(--space-6);
     margin-bottom: 0;
     flex-wrap: wrap;
     flex: 1;
@@ -270,34 +270,15 @@
 --------------------------------------------------------- */
 .empty-state {
     text-align: center;
-    padding: 42px var(--space-32);
-    border: 2px solid var(--olive-light);
+    padding: var(--space-32) var(--space-40);
     border-radius: var(--radius-lg);
     background: var(--butter-light);
-    margin-top: 8px;
 }
 
 .empty-state-kicker {
-    margin: 0 0 8px;
     color: var(--olive);
-    font-size: 13px;
-    font-weight: 600;
-    letter-spacing: var(--ls-lg);
-}
-
-.empty-state h3 {
-    margin: 0;
-    font-family: "Jost", sans-serif;
-    font-size: 28px;
-    font-weight: 600;
-    color: var(--brown);
-    line-height: 1.25;
-}
-
-.empty-state p {
-    margin: 12px 0 0;
-    font-size: 18px;
-    color: var(--black);
+    font-size: 1rem;
+    font-weight: 400;
 }
 
 .empty-state-link {
@@ -515,7 +496,7 @@
     margin: 20px;
     list-style: disc;
     font-size: 1.125rem;
-  line-height: 1.5;
+  line-height: 1.45;
 }
 
 .detail-participants-head {
@@ -525,14 +506,6 @@
     gap: 20px;
 }
 
-.detail-participants-link {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--tomato);
-    letter-spacing: var(--ls-lg);
-    text-decoration: none;
-}
-
 .detail-avatar-row {
     display: flex;
     align-items: center;
@@ -560,27 +533,26 @@
 .detail-participants-full {
     display: flex;
     flex-direction: column;
-    gap: 10px;
 }
 
 .detail-participant-item {
     display: flex;
     align-items: center;
-    gap: 10px;
 }
 
 .participant-name {
-    font-size: 0.95rem;
-    font-weight: 500;
+    font-size: 1.125rem;
+    font-weight: 400;
     color: var(--black);
 }
 
 .detail-participants-link {
     background: none;
     border: none;
+    font-family: var(--font-main);
     color: var(--olive);
-    font-size: 0.85rem;
-    font-weight: 600;
+    font-size: 1rem;
+    font-weight: 400;
     cursor: pointer;
     padding: 0;
     text-decoration: underline;
diff --git a/css/login_signup.css b/css/login_signup.css
index b1c731c..30629fd 100644
--- a/css/login_signup.css
+++ b/css/login_signup.css
@@ -143,12 +143,6 @@ input:focus {
     justify-content: center;
 }
 
-.modal-footer {
-    display: flex;
-    gap: var(--space-2);
-    justify-content: center;
-}
-
 .btn-primary {
     padding: var(--space-2) var(--space-32);
     background-color: var(--olive);
diff --git a/css/my_profil.css b/css/my_profil.css
index 453cc57..11f76b2 100644
--- a/css/my_profil.css
+++ b/css/my_profil.css
@@ -18,9 +18,7 @@
 }
 
 #headline {
-    margin: 0.4rem 0;
     color: var(--brown);
-    font-size: clamp(2rem, 4.4vw, 2.8rem);
 }
 
 .profile-subline {
@@ -67,7 +65,7 @@
 
 .profile-card-list {
     display: grid;
-    gap: var();
+    gap: var(--space-16);
 }
 
 /* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
@@ -102,27 +100,26 @@
 }*/
 
 .profile-event-address-block {
-    margin-top: 0.55rem;
-    padding: 0.6rem 0.75rem;
-    border-radius: var(--radius-sm);
-    border-left: 4px solid var(--tomato);
-    background: rgba(232, 237, 209, 0.65);
+    margin-top: var(--space-24);
+    background-color: var(--olive-light);
+    padding: var(--space-16);
+    border-radius: var(--radius-md);
+    color: var(--black);
+    line-height: 1.4;
 }
 
+
 .profile-event-address-label {
-    margin: 0;
-    color: var(--olive);
-    font-size: 0.72rem;
-    font-weight: 700;
-    letter-spacing: var(--ls-lg);
+    font-size: 1rem;
+    font-weight: 400;
+    color: var(--olive-dark);
 }
 
 .profile-event-address {
-    margin: 0.2rem 0 0;
-    font-size: 0.95rem;
+    font-size: 1.125rem;
+    font-weight: 400;
+    line-height: 1.4;
     color: var(--black);
-    font-weight: 600;
-    line-height: 1.35;
 }
 
 .profile-event-link {
@@ -228,6 +225,14 @@
     box-shadow: var(--shadow-error);
 }
 
+.info-abmeldung {
+    font-size: 1rem; 
+    color: var(--olive); 
+    margin-bottom: 16px; 
+    display: flex; align-items: 
+    flex-start; 
+    gap: 8px;
+}
 .profile-feedback {
     margin: 0.75rem 0 0;
     font-size: 0.95rem;
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index f9c6a1f..6bfeb44 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -50,7 +50,7 @@
     --space-24: 1.5rem; /* 24px */
     --space-32: 2rem; /* 32px */
     --space-40: 2.5rem; /* 40px */
-    --space-7: 3rem; /* 48px */
+    --space-48: 3rem; /* 48px */
     --space-64: 4rem; /* 64px */
     --space-80: 5rem; /* 80px */
 
@@ -107,17 +107,15 @@ h3 {
 p {
     font-family: var(--font-main);
     font-size: 1.125rem;
-    line-height: 1.5;
+    line-height: 1.45;
     color: var(--black);
-    margin-bottom: 1rem;
 }
 
 .p-small {
     font-family: var(--font-main);
     font-size: 1rem;
     font-weight: 400;
-    line-height: 1.5;
-    margin-bottom: 0rem;
+    line-height: 1.4;
 }
 
 .label-input-field,
@@ -173,7 +171,7 @@ label {
 .error-message {
   font-family: var(--font-main);
   font-size: 1rem;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 .error-message--inline {
@@ -538,7 +536,8 @@ label {
 
 .button--outline:hover {
     background-color: var(--olive-light);
-    color: var(--black);
+    color: var(--olive-dark);
+    border: 1.5px solid var(--olive-dark);
 }
 
 .counter-button {
@@ -589,7 +588,7 @@ label {
 .category-items {
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--space-1);
+    gap: var(--space-8);
 }
 
 .category-item-profile {
@@ -700,7 +699,7 @@ label {
     align-items: center;
     justify-content: center;
     height: 1em; /* keeps it aligned with text size */
-    margin-top: var(--space-7);
+    margin-top: var(--space-48);
 }
 
 .instagram-invite__link {
@@ -760,10 +759,10 @@ label {
     padding: var(--space-40);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-interaction);
-    max-width: 500px;
+    max-width: 460px;
     width: 90%;
     text-align: center;
-    animation: modalSlideIn 0.3s ease;
+    animation: modalSlideIn 0.5s ease;
 }
 
 .btn-info {
@@ -813,7 +812,7 @@ label {
     margin-left: auto;
     border: none;
     background: transparent;
-    color: var(--black);
+    color: transparent;
     font-size: 2rem;
     line-height: 1;
     cursor: pointer;
@@ -843,33 +842,36 @@ label {
 }
 
 .modal-body {
-    padding: var(--space-24) 0 0;
+    font-family: var(--font-main);
+    font-size: 1.125rem;
+    padding: var(--space-24) 0 var(--space-40) 0;
     text-align: left;
-    line-height: 1.7;
+    line-height: 1.45;
 }
 
 .modal-footer {
     display: flex;
-    gap: var();
+    gap: var(--space-12);
     justify-content: center;
 }
 
 /* Snackbar */
-.snackbar {
+.snackbar,
+.snackbar--danger {
     position: fixed;
-    bottom: 30px;
+    bottom: 40px;
     left: 50%;
     transform: translateX(-50%) translateY(100px);
-    background: var(--olive);
-    color: var(--white);
+    color: var(--butter-light);
+    background: var(--tomato);
     padding: var(--space-16) var(--space-40);
     border-radius: var(--radius-pill);
-    font-size: 1rem;
-    font-weight: 600;
+    font-size: 1.125rem;
+    font-weight: 400;
     font-family: var(--font-main);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-interaction);
     opacity: 0;
-    transition: transform 0.4s ease, opacity 0.4s ease;
+    transition: transform 0.5s ease, opacity 0.4s ease;
     z-index: 9999;
     pointer-events: none;
 }
@@ -879,10 +881,6 @@ label {
     opacity: 1;
 }
 
-.snackbar--danger {
-    background: var(--tomato);
-}
-
 /* Lightbox */
 .lightbox {
     position: fixed;
@@ -961,7 +959,7 @@ input:focus {
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   margin-top: 120px;
-  padding: var(--space-16) var(--space-7);
+  padding: var(--space-16) var(--space-48);
 }
 
 .footer-links {
diff --git a/data/events.json b/data/events.json
index e4e2249..f4fa5db 100644
--- a/data/events.json
+++ b/data/events.json
@@ -87,7 +87,7 @@
     "title": "Japanese Delight",
     "location": "Zürich",
     "address": "Limmatquai 92, 8001 Zürich",
-    "date": "24. April. 2026",
+    "date": "8. Mai 2026",
     "time": "12:30 UHR",
     "category": "Lunch",
     "diet": "Fisch",
diff --git a/event_create.html b/event_create.html
index d106bd3..6ba41f1 100644
--- a/event_create.html
+++ b/event_create.html
@@ -43,14 +43,14 @@
         aria-labelledby="intro-title"
       >
         <div class="step-layout hero startseite">
-          <div class="step-copy">
-            <p class="badge">Event erstellen</p>
+          <div>
+            <p class="badge margin-bottom-40">Event erstellen</p>
             <h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
-            <p class="step-text">
+            <p class="step-text margin-bottom-40">
               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-primary button--intro" data-start-flow>
+            <button type="button" class="button-primary" data-start-flow>
               Los geht’s!
             </button>
           </div>
diff --git a/event_detail.html b/event_detail.html
index e6bf43e..3744bd8 100644
--- a/event_detail.html
+++ b/event_detail.html
@@ -47,7 +47,7 @@
         <div class="modal-body">
             <p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
         </div>
-        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+        <div class="modal-footer">
             <button class="button-primary button--outline" type="button" id="register-modal-cancel">Abbrechen</button>
             <button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
         </div>
@@ -63,7 +63,7 @@
         <div class="modal-body">
             <p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
         </div>
-        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+        <div class="modal-footer">
             <button class="button-primary button--outline" type="button" id="unregister-modal-cancel">Abbrechen</button>
             <button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
         </div>
diff --git a/event_overview.html b/event_overview.html
index 32ecaae..3585681 100644
--- a/event_overview.html
+++ b/event_overview.html
@@ -36,9 +36,9 @@
     </div>
 
     <!-- Filter section: category chips + location/date filters -->
-    <section class="filter-section">
+    <section class="filter-section margin-bottom-24">
         <p class="filter-label">Art des Essens / Eventtyp</p>
-        <div class="filter-row">
+        <div class="filter-row margin-bottom-24">
             <!-- Primary category filter buttons -->
             <div class="category-group">
                 <button class="category-item active" type="button" data-cat="ALLE">Alle</button>
@@ -50,24 +50,24 @@
 
             <!-- Secondary filters populated/handled by JavaScript -->
             <div class="meta-filter-group" aria-label="Weitere Filter">
-                <label class="meta-filter" for="location-filter">
+                <div class="meta-filter" for="location-filter">
                     <span>Ort</span>
                     <select id="location-filter">
                         <option value="ALLE_ORTE">Alle Orte</option>
                     </select>
-                </label>
+                </div>
 
-                <label class="meta-filter" for="date-filter">
+                <div class="meta-filter" for="date-filter">
                     <span>Datum</span>
                     <div class="date-input-wrapper">
                         <input id="date-filter" type="date">
                     </div>
-                </label>
+                </div>
             </div>
         </div>
     <details class="filter-box">
     <summary>Nach Ernährungform filtern</summary>
-    <div class="filter-row">
+    <div class="filter-row margin-bottom-16">
         <div class="category-group">
         <button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
         <button class="category-item" type="button" data-diet="Fisch">Fisch</button>
@@ -79,7 +79,7 @@
 
     <details class="filter-box">
     <summary>Nach Allergenen filtern</summary>
-    <div class="filter-row">
+    <div class="filter-row margin-bottom-16">
         <div class="category-group">
         <button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
         <button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
@@ -116,12 +116,12 @@
     <div class="modal-content">
         <div class="modal-header">
             <h2>Ein Platz für dich am Tisch!</h2>
-            <button type="button" class="modal-close" onclick="closeRegisterModal()" aria-label="Popup schließen">&times;</button>
+            <button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
         </div>
         <div class="modal-body">
             <p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
         </div>
-        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+        <div class="modal-footer">
             <button class="button-primary button--outline" type="button" onclick="closeRegisterModal()">Abbrechen</button>
             <button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
         </div>
@@ -132,12 +132,12 @@
     <div class="modal-content">
         <div class="modal-header">
             <h2>Pläne haben sich geändert?</h2>
-            <button type="button" class="modal-close" onclick="closeUnregisterModal()" aria-label="Popup schließen">&times;</button>
+            <button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
         </div>
         <div class="modal-body">
             <p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
         </div>
-        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+        <div class="modal-footer">
             <button class="button-primary button--outline" type="button" onclick="closeUnregisterModal()">Abbrechen</button>
             <button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
         </div>
diff --git a/index.html b/index.html
index 3c3e5e4..641cff0 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@
         <div class="hero__left">
           <span class="badge margin-bottom-40">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>
+          <p class="margin-bottom-40">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-primary" href="signup.html">Registrieren</a>
         </div>
 
@@ -83,7 +83,7 @@
       <!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
       <section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
         </div><h2>Einblick in Cooking-Erlebnisse</h2>
-          <p>#gemeinsam_invité auf Instagram</p>
+          <p class="margin-bottom-16">#gemeinsam_invité auf Instagram</p>
         </div>
         <div class="gallery__carousel">
           <button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
diff --git a/js/event_detail.js b/js/event_detail.js
index dc11b9a..ae98ece 100644
--- a/js/event_detail.js
+++ b/js/event_detail.js
@@ -522,7 +522,7 @@
                             setTimeout(() => {
                                 snackbar.classList.remove('snackbar--visible');
                                 setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
-                            }, 3000);
+                            }, 4000);
                         }
                         renderDetailPage(event);
                     };
@@ -546,7 +546,7 @@
                         if (snackbar) {
                             snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
                             snackbar.classList.add('snackbar--visible');
-                            setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
+                            setTimeout(() => snackbar.classList.remove('snackbar--visible'), 4000);
                         }
                         renderDetailPage(event);
                     };
diff --git a/js/event_overview.js b/js/event_overview.js
index 26119a7..59e4ba2 100644
--- a/js/event_overview.js
+++ b/js/event_overview.js
@@ -586,7 +586,7 @@
                                 if (snackbar) {
                                     snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
                                     snackbar.classList.add('snackbar--visible');
-                                    setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
+                                    setTimeout(() => snackbar.classList.remove('snackbar--visible'), 4000);
                                 }
                                 applyFilters();
                             };
@@ -613,7 +613,7 @@
                                     setTimeout(() => {
                                         snackbar.classList.remove('snackbar--visible');
                                         setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
-                                    }, 3000);
+                                    }, 4000);
                                 }
                                 applyFilters();
                             };
diff --git a/js/my_profil.js b/js/my_profil.js
index ff4c7f6..6cde2fa 100644
--- a/js/my_profil.js
+++ b/js/my_profil.js
@@ -248,7 +248,7 @@
                 setTimeout(() => {
                     snackbar.classList.remove('snackbar--visible');
                     setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
-                }, 3000);
+                }, 4000);
             }
             return;
         }
diff --git a/my_profil.html b/my_profil.html
index 549b4c9..4dcf8a4 100644
--- a/my_profil.html
+++ b/my_profil.html
@@ -32,7 +32,7 @@
 <main class="layout-wide">
     <section class="profile-hero" aria-label="Profilübersicht">
         <div>
-            <p class="badge">Mein Bereich</p>
+            <p class="badge margin-bottom-40">Mein Bereich</p>
             <h1 id="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>
@@ -70,8 +70,8 @@
             <div class="panel-head">
                 <span id="my-registrations-count" class="panel-count">0</span>
             </div>
-            <p style="font-size: 0.9rem; color: var(--olive); margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px;">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--olive)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 1px;">
+            <p class="info-abmeldung">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--olive)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 1px;">
                     <circle cx="12" cy="12" r="10"/>
                     <line x1="12" y1="8" x2="12" y2="8"/>
                     <line x1="12" y1="12" x2="12" y2="16"/>
@@ -86,26 +86,26 @@
             <form id="profile-form" novalidate>
                 <div class="form-grid">
                     <div class="margin-bottom-16">
-                        <label for="vorname">Vorname</label>
+                        <label class="label-input-field" for="vorname">Vorname</label>
                         <input type="text" id="vorname" name="vorname" required>
                         <p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
                     </div>
 
                     <div class="margin-bottom-16">
-                        <label for="nachname">Nachname</label>
+                        <label class="label-input-field" for="nachname">Nachname</label>
                         <input type="text" id="nachname" name="nachname" required>
                         <p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
                     </div>
                 </div>
 
                 <div class="margin-bottom-16">
-                    <label for="email">E-Mail</label>
+                    <label class="label-input-field" for="email">E-Mail</label>
                     <input type="email" id="email" name="email" required>
                     <p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p>
                 </div>
 
                 <div class="margin-bottom-40">
-                    <label for="passwort">Passwort</label>
+                    <label class="label-input-field" for="passwort">Passwort</label>
                     <input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen">
                     <p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p>
                     <p class="input-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
@@ -122,11 +122,11 @@
 <div id="logoutModal" class="modal">
     <div class="modal-content">
         <div class="modal-header">
-            <button class="close-btn" onclick="closeLogoutModal()">&times;</button>
             <h2>Abmelden?</h2>
         </div>
         <p class="modal-body">
             Bist du sicher, dass du dich abmelden möchtest?
+            <button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
         </p>
         <div class="modal-footer">
             <button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
@@ -142,11 +142,11 @@
 <div id="cancelEventModal" class="modal">
     <div class="modal-content">
         <div class="modal-header">
-            <button class="close-btn" onclick="closeCancelEventModal()">&times;</button>
             <h2>Event absagen?</h2>
         </div>
         <p class="modal-body">
             Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
+            <button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
         </p>
         <div class="modal-footer">
             <button class="button-secondary" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
diff --git a/signup.html b/signup.html
index e971d08..d677c85 100644
--- a/signup.html
+++ b/signup.html
@@ -36,25 +36,25 @@
             </div>
 
             <form id="signupForm" novalidate>
-                <div class="margin-bottom-16">
+                <div class="form-group margin-bottom-16">
                     <p class= "label-input-field" for="vorname">Vorname*</p>
                     <input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname">
                     <div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div>
                 </div>
 
-                <div class="margin-bottom-16">
+                <div class="form-group margin-bottom-16">
                     <p class= "label-input-field" for="nachname">Nachname*</p>
                     <input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname">
                     <div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
                 </div>
 
-                <div class="margin-bottom-16">
+                <div class="form-group margin-bottom-16">
                     <p class= "label-input-field" for="email">E-Mail*</p>
                     <input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
                     <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
                 </div>
 
-                <div class="margin-bottom-40">
+                <div class="form-group margin-bottom-40">
                     <p class= "label-input-field" for="passwort">Passwort*</p>
                     <input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen">
                     <div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
@@ -82,8 +82,8 @@
     <div id="welcomeModal" class="modal">
         <div class="modal-content">
             <div class="modal-header">
-                <button class="close-btn" onclick="closeWelcomeModal()">&times;</button>
                 <h2>Konto erfolgreich erstellt!</h2>
+                <button class="close-btn" onclick="closeWelcomeModal()">&times;</button>
             </div>
             <div class="modal-body">
                 Willkommen bei Invité! Dein Account wurde erfolgreich erstellt. Entdecke jetzt die neuesten Events in deiner Nähe.