12 changed files with 67 additions and 91 deletions
--- a/README.md
+++ b/README.md
@ -1,14 +1,3 @@
-# Team «Social Cooking»
+# Social_Cooking_Team

-### Verwendung von KI im Rahmen des Projekts in «UX in der agilen Softwareentwicklung»
-
-Für das Projekt «Invité» wurden verschiedene generative KI genutzt:
-* ChatGPT (GPT-5.5) von OpenAI
-* Cursor AI Editor (auf Basis von Visual Studio Code)
-* Gemini Coding Assistant (Gemini 3.1 Pro) von Google (Plugin in Visual Studio Code)
-* GitHub Copilot Pro in Agent Mode (Auto) von GitHub in Visual Studio Code
-
-KI wurde dabei gezielt als Arbeits- und Lernunterstützung in drei Bereichen eingesetzt:
-* Unterstützung und Generierung von Code (HTML, CSS und JSON)
-* Erklärung des Codes in nachvollziehbaren Schritten
-* Hilfe bei Fehlern und Unklarheiten in Visual Studio Code sowie auf Gitea
+Hier im Readme schreiben wir etwas dazu, wie/ob wir KI benutzen.
--- a/css/index.css
+++ b/css/index.css
@ -209,21 +209,14 @@
 }

 .gallery__carousel {
-  display: grid;
-  grid-template-columns: 46px minmax(0, 1fr) 46px;
-  align-items: center;
-  column-gap: 6px;
-  margin-bottom: 30px;
-}
-
-.gallery__viewport {
+  position: relative;
  overflow: hidden;
 }

 .gallery__track {
  display: flex;
  gap: 20px;
-  margin-bottom: 0;
+  margin-bottom: 30px;
 }

 .gallery__item {
@ -291,37 +284,39 @@
 }

 .gallery__arrow {
+  position: absolute;
  display: grid;
-  width: 46px;
-  height: 46px;
-  border: 0;
-  background: transparent;
-  border-radius: 999px;
+  top: 45%;
+  width: 44px;
+  height: 44px;
+  border: 1.5px solid var(--butter-light);
+  background: var(--butter-light);
+  border-radius: var(--radius-lg);
  font-family: var(--font-main);
+  display: none;
  font-weight: 400;
-  font-size: 2.45rem;
+  font-size: 1.25rem;
  place-items: center;
  z-index: 2;
  color: var(--olive);
  cursor: pointer;
  text-decoration: none;
-  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
 }


 .gallery__arrow:hover, 
 .gallery__arrow:focus-visible {
-  color: var(--olive-light);
-  background: transparent;
-  transform: scale(1.1);
+  border: 1.5px solid var(--butter);
+  background: var(--butter);
 }

 .gallery__arrow--prev {
-  justify-self: start;
+  left: var(--space-24);
 }

 .gallery__arrow--next {
-  justify-self: end;
+  right: var(--space-24);
 }


@ -345,15 +340,9 @@
  transition: background 0.25s ease, transform 0.2s ease;
 }

-.gallery_dot:not(.gallery_dot--active):hover {
-  background: var(--olive-light);
-  border-color: var(--olive-light);
-  transform: scale(1.2);
-}
-
+.gallery_dot:hover,
 .gallery_dot--active {
-  background: var(--olive);
-  border-color: var(--olive);
+  background: var(--olive);;
  transform: scale(1.2);
 }

@ -363,17 +352,6 @@
 }

@media (max-width: 900px) {
-  .gallery__carousel {
-    grid-template-columns: 38px minmax(0, 1fr) 38px;
-    column-gap: 5px;
-  }
-
-  .gallery__arrow {
-    width: 38px;
-    height: 38px;
-    font-size: 1.95rem;
-  }
-
  .gallery__track {
    gap: 16px;
  }
@ -572,4 +550,4 @@
  .faq-content p {
    padding: var(--space-2) 0;
  }
-}
+}
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@ -689,9 +689,9 @@ label {
    right: -2px;
    width: 12px;
    height: 12px;
-    background-color: var(--blue);
+    background-color: var(--error);
    border-radius: 50%;
-    border: 1.5px solid var(--butter-light);
+    border: 2px solid var(--butter-light);
    z-index: 10;
 }

--- a/data/events.json
+++ b/data/events.json
@ -4,7 +4,7 @@
    "title": "Italienische Tavolata",
    "location": "Luzern",
    "address": "Pilatusstrasse 18, 6003 Luzern",
-    "date": "30. April 2026",
+    "date": "17. Mai. 2026",
    "time": "15:30 UHR",
    "category": "Dinner",
    "diet": "Vegetarisch",
--- a/event_create.html
+++ b/event_create.html
@ -108,7 +108,7 @@
            </fieldset>

            <fieldset class="form-field">
-              <label>Maximale Gästeanzahl</label>
+              <label>Maximale Personenanzahl</label>

              <div class="counter" data-counter>
                <button
@ -342,8 +342,8 @@
                <dd data-review="eventType">–</dd>
              </div>

-              <div class="review-item" data-edit-step="1" data-edit-field="maxGuests" role="button" tabindex="0" aria-label="Maximale Gästeanzahl bearbeiten">
-                <dt>Maximale Gästeanzahl</dt>
+              <div class="review-item" data-edit-step="1" data-edit-field="maxGuests" role="button" tabindex="0" aria-label="Maximale Personenanzahl bearbeiten">
+                <dt>Maximale Personenanzahl</dt>
                <dd data-review="maxGuests">–</dd>
              </div>

@ -443,9 +443,13 @@
        hidden
      >
        <div class="step-layout hero startseite">
-          <div class="step-layout">
-            <p class="badge margin-bottom-40">Event veröffentlicht</p>
-            <h1 id="success-title">Dein Event ist ready <i class="fa-solid fa-champagne-glasses"></i> </h1>
+          <div class="step-copy">
+            <div class="submission-success-title-row">
+              <h2 id="success-title">Dein Event ist ready </h2>
+              <span class="submission-success-icon" aria-hidden="true">
+              <!-- <i class="fa-solid fa-champagne-glasses"></i>-->
+              </span>
+            </div>
            <p class="step-text margin-bottom-40">
              Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
              Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
--- a/event_detail.html
+++ b/event_detail.html
@ -42,12 +42,14 @@
    <div class="modal-content">
        <div class="modal-header">
            <h2>Ein Platz für dich am Tisch!</h2>
+            <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">
-            <button class="button-primary button--outline" type="button" id="unregister-modal-cancel" onclick="closeUnregisterModal()">Abbrechen</button>
+            <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>
    </div>
@ -57,13 +59,14 @@
    <div class="modal-content">
        <div class="modal-header">
            <h2>Pläne haben sich geändert?</h2>
+            <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">
-            <button class="button-primary button--outline" type="button" id="unregister-modal-cancel" onclick="closeUnregisterModal()">Abbrechen</button>
-            <button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Abmelden</button>
+            <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>
    </div>
 </div>
--- a/event_overview.html
+++ b/event_overview.html
@ -102,13 +102,11 @@
    <div class="modal-content">
        <div class="modal-header">
            <h2>Warum Invité kostenlos ist</h2>
+            <button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
        </div>
        <div class="modal-body">
            <p>Alle Events bei uns sind komplett kostenlos. Invité basiert rein auf Freiwilligkeit und der Freude am Teilen. Kein Geldfluss, keine versteckten Kosten – nur die pure Absicht, die Community zu stärken und den sozialen Zusammenhalt in unserer Nachbarschaft zu fördern. Egal ob du den Kochlöffel schwingst oder dich als Gast dazu gesellst: Bei uns zählt nur die menschliche Begegnung.</p>
        </div>
-        <div class="modal-footer">
-            <button class="button-primary button--outline" type="button" onclick="closeInfoModal()">Okay</button>
-        </div>
    </div>
 </div>

@ -116,6 +114,7 @@
    <div class="modal-content">
        <div class="modal-header">
            <h2>Ein Platz für dich am Tisch!</h2>
+            <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>
@ -131,13 +130,14 @@
    <div class="modal-content">
        <div class="modal-header">
            <h2>Pläne haben sich geändert?</h2>
+            <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">
            <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">Abmelden</button>
+            <button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
        </div>
    </div>
 </div>
--- a/index.html
+++ b/index.html
@ -82,15 +82,15 @@

      <!-- 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">
-        <h2>Einblick in Cooking-Erlebnisse</h2>
-        <p class="margin-bottom-16">#gemeinsam_invité auf Instagram</p>
+        </div><h2>Einblick in Cooking-Erlebnisse</h2>
+          <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">
-            <i class="fa-solid fa-angle-left"></i>
+            <i class="fas fa-chevron-left"></i>
          </button>

-          <div class="gallery__viewport">
-            <div class="gallery__track" aria-live="polite">
+          <div class="gallery__track" aria-live="polite">
            
            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 1 von 12">
              <div class="ig-post-wrapper">
@ -212,11 +212,10 @@
              </div>
            </article>
            
-            </div>
          </div>
          
          <button type="button" class="gallery__arrow gallery__arrow--next" aria-label="Nächstes Bild">
-            <i class="fa-solid fa-angle-right"></i>
+            <i class="fas fa-chevron-right"></i>
          </button>
        </div>

@ -356,4 +355,4 @@
 </script>

 </body>
-</html>
+</html>
--- a/js/event_detail.js
+++ b/js/event_detail.js
@ -460,6 +460,13 @@
                                <button class="${actionButtonVariantClass.trim()}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
                                    ${actionButtonLabel}
                                </button>
+                                ${isRegistered && deregInfo.daysLeft !== null ? `
+                                    <small class="detail-dereg-hint${deregInfo.isClosed ? ' detail-dereg-hint--closed' : ''}">
+                                        ${deregInfo.isClosed ? 'Abmeldefrist abgelaufen'
+                                            : deregInfo.daysLeft === 1 ? 'Noch 1 Tag zur Abmeldung'
+                                            : `Noch ${deregInfo.daysLeft} Tage zur Abmeldung`}
+                                    </small>
+                                ` : ''}
                            </div>
                        ` : ''}
                    </div>
--- a/js/event_overview.js
+++ b/js/event_overview.js
@ -514,8 +514,7 @@
            if (isCanceled) {
                sideInfoMarkup = '<span class="button-plaetze">Event abgesagt</span>';
            } else if (!isRegistrationClosed) {
-                const spotLabel = freePlaces === 1 ? 'Platz frei' : 'Plätze frei';
-                sideInfoMarkup = `<span class="button-plaetze${isFull ? ' event-spots-full' : ''}">${isFull ? 'Ausgebucht' : `${freePlaces} ${spotLabel}`}</span>`;
+                sideInfoMarkup = `<span class="button-plaetze${isFull ? ' event-spots-full' : ''}">${isFull ? 'Ausgebucht' : `${freePlaces} Plätze frei`}</span>`;
            }

            card.innerHTML = `
@ -779,7 +778,7 @@
    // Info button modal behavior
    const infoButton = document.getElementById('info-button');
    const infoModal = document.getElementById('info-modal');
-    const modalClose = infoModal?.querySelector('.modal-close');
+    const modalClose = infoModal?.querySelector('modal-close');

    if (infoButton && infoModal) {
        infoButton.addEventListener('click', () => {
@ -829,10 +828,3 @@ function closeUnregisterModal() {
        modal.classList.remove('show');
    }
 }
-
-function closeInfoModal() {
-    const modal = document.getElementById('info-modal');
-    if (modal) {
-        modal.classList.remove('show');
-    }
-}
--- a/my_profil.html
+++ b/my_profil.html
@ -126,6 +126,7 @@
        </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>
@ -138,13 +139,14 @@
    <div class="modal-content">
        <div class="modal-header">
            <h2>Pläne haben sich geändert?</h2>
+            <button type="button" class="modal-close" id="unregister-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">
-            <button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
-            <button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Abmelden</button>
+        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+            <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>
    </div>
 </div>
@ -159,6 +161,7 @@
        </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>
--- a/signup.html
+++ b/signup.html
@ -83,6 +83,7 @@
        <div class="modal-content">
            <div class="modal-header">
                <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.