Layout Startseite/FAQ

css/event_create.css

@@ -153,7 +153,7 @@ input[type="number"],
 textarea {
   font-family: var(--font-main);
   font-weight: 400;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   padding: var(--space-16) var(--space-20);
   border: 1.5px solid var(--olive-light);
   border-radius: var(--radius-md);

css/event_overview.css

@@ -48,14 +48,6 @@
 /* ---------------------------------------------------------
     Overview Header + Filters
 --------------------------------------------------------- */
-.filter-label {
-  font-family: var(--font-main);
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: var(--ls-sm);
-  line-height: 1;
-  margin-bottom: var(--space-8);
-}
 
 .filter-row {
     display: flex;
@@ -87,7 +79,7 @@
 .meta-filter-group {
     display: flex;
     flex-wrap: nowrap;
-    gap: var(--space-2);
+    gap: var(--space-12);
     margin-bottom: 0;
 }
 

css/index.css

@@ -179,7 +179,7 @@
 
 .how-step__footer-badges {
   display: flex;
-  gap: var(--space-2);
+  gap: var(--space-16);
   justify-content: center;
 }
 
@@ -204,6 +204,10 @@
 
 /* --- Carousel gallery --- */
 
+.gallery {
+  margin-bottom: 100px;
+}
+
 .gallery__carousel {
   position: relative;
   overflow: hidden;
@@ -433,35 +437,27 @@
 /* --- FAQ Section: Akkordion --- */
 
 .faq-section {
-  padding: var(--space-8) var(--space-24);
+  margin-bottom: 0px;
-  margin: var(--space-8) 0 var(--space-5);
-}
-
-.faq-section h2 {
-  text-align: center;
-  margin-bottom: var(--space-5);
-  color: var(--brown);
 }
 
 .faq-accordion {
   width: 100%;
-  max-width: 56rem;
-  margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-12);
 }
 
 .faq-item {
   border: 1.5px solid var(--olive-light);
   border-radius: var(--radius-lg);
   overflow: hidden;
-  background: var(--white);
+  background: var(--butter-light);
-  transition: background-color 0.2s ease, box-shadow var(--shadow-interaction);
+  padding: var(--space-12) var(--space-24) ;
+  transition: background-color 0.2s ease;
 }
 
 .faq-item:hover {
-  box-shadow: var(--shadow-interaction);
+  background: var(--olive-light);
 }
 
 .faq-trigger {
@@ -469,41 +465,32 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-3) var(--space-24);
   background: transparent;
   border: none;
   cursor: pointer;
+  font-family: var(--font-main);
   font-size: 1.25rem;
-  font-weight: 400;
+  font-weight: 400;;
-  color: var(--olive);
   text-align: left;
   transition: background-color 0.2s ease;
-  font-family: var(--font-main);
 }
 
-.faq-trigger:hover {
-  background-color: var(--butter-light);
-}
-
-.faq-trigger:focus-visible {
-  outline: 2px solid var(--olive);
-  outline-offset: -2px;
-}
 
 .faq-title {
   flex: 1;
-  font-weight: 600;
+  font-weight: 400;
+  font-size: 1.25rem;
 }
 
 .faq-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  width: 24px;
-  height: 28px;
+  height: 24px;
   font-size: 1.5rem;
-  font-weight: 300;
+  font-weight: 400;
-  color: var(--olive);
+  color: var(--black);
   transition: transform 0.3s ease;
   flex-shrink: 0;
 }
@@ -513,19 +500,16 @@
 }
 
 .faq-content {
-  padding: 0 var(--space-24);
+  padding: 0;
   max-height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease, padding 0.3s ease;
+  transition: max-height 0.3s ease;
-  font-size: 1.125rem;
-  line-height: 1.7;
-  color: var(--black);
-  font-family: var(--font-main);
 }
 
+
 .faq-content p {
   margin: 0;
-  padding: var(--space-3) 0;
+  padding: var(--space-12) var(--space-24) var(--space-12) 0;
 }
 
 .faq-trigger[aria-expanded="true"] + .faq-content {
@@ -534,6 +518,16 @@
   padding: var(--space-3) var(--space-24);
 }
 
+.faq-list {
+  padding-left: var(--space-24);
+  margin: var(--space-12) var(--space-24) var(--space-12) 0;
+}
+
+.faq-list li {
+  font-size: 1.125rem;
+  margin-bottom: var(--space-12)
+}
+
 
 /* --- Responsive: FAQ Section --- */
 

css/my_profil.css

@@ -51,11 +51,6 @@
     border-radius: var(--radius-pill);
 }
 
-.category-item.is-active .btn-count {
-    background: var(--butter-light);
-}
-
-
 /* Konsistentes Karten-Layout für alle Profilsektionen. */
 .profile-panel {
     background: var(--butter-light);

css/stylesheet_global.css

@@ -120,7 +120,8 @@ p {
     margin-bottom: 0rem;
 }
 
-.label-input-field {
+.label-input-field,
+.filter-label {
   font-family: var(--font-main);
   font-size: 1rem;
   font-weight: 400;
@@ -574,7 +575,7 @@ label {
     font-weight: 400;
     font-size: 1.125rem;
     line-height: 1;
-    padding: var(--space-1) var(--space-20);
+    padding: var(--space-6) var(--space-20);
     cursor: pointer;
     transition: background-color 0.2s ease, color 0.2s ease;
 }

index.html

@@ -82,7 +82,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 class="gallery__header"> </div><h2>Einblick in Cooking-Erlebnisse</h2>
+        </div><h2>Einblick in Cooking-Erlebnisse</h2>
           <p>#gemeinsam_invité auf Instagram</p>
         </div>
         <div class="gallery__carousel">
@@ -221,7 +221,6 @@
 
         <div class="gallery_dots" role="tablist" aria-label="Seite auswählen"></div>
       </section>
-    </main>
 
     <!-- Lightbox: Bildansicht vergrössert -->
     <div class="lightbox" id="gallery-lightbox" aria-hidden="true">
@@ -236,7 +235,6 @@
 
     <!-- FAQ Section: Akkordion mit häufig gestellten Fragen -->
     <section class="faq-section">
-      <div class="container">
         <h2>Häufig gestellte Fragen</h2>
         <div class="faq-accordion">
           <div class="faq-item">
@@ -245,10 +243,24 @@
               <span class="faq-icon">+</span>
             </button>
             <div class="faq-content">
-              <p><strong>Schritt 1: Kostenloses Konto erstellen</strong><br>Gehe auf Invité, klicke auf "Jetzt beitreten" und fülle das Anmeldeformular aus. Du benötigst nur deine E-Mail und ein Passwort.</p>
+              <ol class="faq-list">
-              <p><strong>Schritt 2: Dein Profil ausfüllen</strong><br>Lade ein Profilfoto hoch, schreib ein bisschen über dich und gib deine Allergien/Ernährungspräferenzen an. Das hilft anderen, dich besser kennenzulernen.</p>
+                <li>
-              <p><strong>Schritt 3: Erkunde Events</strong><br>Browsing durch unsere Events, filtere nach Diät oder Allergie-Einstellungen, und melde dich zu den Events an, die dich interessieren!</p>
+                  <strong>Kostenloses Konto erstellen</strong><br>
-              <p><strong>Schritt 4: Erstelle dein eigenes Event</strong><br>Du kannst auch selbst ein Kochevent hosten! Klick auf "Event erstellen", beschreib dein Menü, und lade Gäste ein.</p>
+                  Gehe auf Invité, klicke auf "Jetzt beitreten" und fülle das Anmeldeformular aus. Du benötigst nur deine E-Mail und ein Passwort.
+                </li>
+                <li>
+                  <strong>Dein Profil ausfüllen</strong><br>
+                  Lade ein Profilfoto hoch, schreib ein bisschen über dich und gib deine Allergien/Ernährungspräferenzen an. Das hilft anderen, dich besser kennenzulernen.
+                </li>
+                <li>
+                  <strong>Erkunde Events</strong><br>
+                  Browsing durch unsere Events, filtere nach Diät oder Allergie-Einstellungen und melde dich zu den Events an, die dich interessieren!
+                </li>
+                <li>
+                  <strong>Erstelle dein eigenes Event</strong><br>
+                  Du kannst auch selbst ein Kochevent hosten! Klick auf "Event erstellen", beschreib dein Menü und lade Gäste ein.
+                </li>
+              </ol>
             </div>
           </div>
 
@@ -301,9 +313,9 @@
               <p>Ja, dein Profil hilft anderen, dich besser kennenzulernen. Wir ermutigen zu Offenheit und gegenseitigem Vertrauen. Allerdings bleibt es deine Entscheidung, wem du deine Adresse mitteilst – die erfolgt nur 12 Stunden vor dem Event.</p>
             </div>
           </div>
-        </div>
       </div>
     </section>
+</main>
 
 <div class="footer">
   <div class="footer-left">