Improve event detail layout and update event dates in JSON

Co-authored-by: Copilot <copilot@github.com>

css/event_overview.css

@@ -627,9 +627,38 @@
 
 .detail-action-btn-wrap {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    gap: 4px;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.detail-action-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.detail-dereg-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+}
+
+.detail-action-btn-wrap .button-plaetze,
+.detail-action-btn-wrap .event-spots-full,
+.detail-action-btn-wrap .button-primary,
+.detail-action-btn-wrap .button-primary-abmelden,
+.detail-action-btn-wrap .button-primary-eigener-event {
+    /* Force identical sizing and vertical alignment for action buttons in detail bar */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 52px;
+    padding: 0 22px;
+    font-size: 1.25rem;
+    border-radius: var(--radius-pill);
 }
 
 .detail-dereg-hint {
@@ -639,6 +668,10 @@
     color: var(--olive);
 }
 
+.detail-dereg-hint--placeholder {
+    visibility: hidden;
+}
+
 .detail-primary-btn {
     border-radius: var(--radius-pill);
     color: var(--white);

data/events.json

@@ -4,7 +4,7 @@
     "title": "Italienische Tavolata",
     "location": "Luzern",
     "address": "Pilatusstrasse 18, 6003 Luzern",
-    "date": "23. APR. 2026",
+    "date": "17. Mai. 2026",
     "time": "15:30 UHR",
     "category": "Dinner",
     "diet": "Vegetarisch",
@@ -15,7 +15,8 @@
     },
    "hostMessage": [
       "Ciao zusammen! Ich liebe die italienische Küche, nicht nur wegen des Essens, sondern wegen des Gefühls: Alle sitzen an einem langen Tisch, teilen sich grosse Platten und geniessen die Zeit.",
-      "Genau das möchte ich mit euch teilen. Ich bereite dafür eine klassische Tavolata vor, bei der verschiedene Gerichte in die Mitte des Tisches kommen und sich jeder bedient."
+      "Genau das möchte ich mit euch teilen. Ich bereite dafür eine klassische Tavolata vor, bei der verschiedene Gerichte in die Mitte des Tisches kommen und sich jeder bedient.",
+      "Wenn es das Wetter erlaubt sind wir draussen."
     ],
     "menu": [
       "Bruschetta-Variationen und Antipasti",
@@ -45,10 +46,10 @@
     "title": "Noche Peruana",
     "location": "Chur",
     "address": "Obere Gasse 41, 7000 Chur",
-    "date": "12. April 2026",
+    "date": "8. Mai 2026",
     "time": "19:00 UHR",
     "category": "Dinner",
-    "diet": "Omnivore",
+    "diet": "Fleisch, Fisch",
     "spots": 4,
     "host": {
       "name": "Camila",
@@ -87,7 +88,7 @@
     "title": "Japanese Delight",
     "location": "Zürich",
     "address": "Limmatquai 92, 8001 Zürich",
-    "date": "8. Mai 2026",
+    "date": "12. Mai 2026",
     "time": "12:30 UHR",
     "category": "Lunch",
     "diet": "Fisch",
@@ -124,6 +125,46 @@
   },
   {
     "id": 4,
+    "title": "Cucina Brasileira",
+    "location": "Basel",
+    "address": "Fredy Kübler Weg 5, 8134 Adliswil",
+    "date": "15. Mai. 2026",
+    "time": "19:00 UHR",
+    "category": "Dinner",
+    "diet": "Fleisch",
+    "spots": 8,
+    "host": {
+      "name": "Mia",
+      "initial": "M"
+    },
+    "hostMessage": [
+      "Ihr seit herzlich eingeladen zu meinem Brasilianischen Abendessen! Lasst euch überraschen."
+    ],
+    "menu": [
+      "Feijoada Brasileira com Farofa",
+      "Arroz",
+      "Vinagrette",
+      "Salada de Couve",
+      "Salada de batata",
+      "Bolo de Mandioca"
+
+    ],
+    "specifications": [],
+    "participants": [
+      "Carlos",
+      "Vivien",
+      "Estelle",
+      "Simona",
+      "Ysabelle"
+    ],
+    "gallery": [
+      "https://i.pinimg.com/736x/62/39/4b/62394bb73b986dfb89f41e809e2c8dd4.jpg",
+      "https://i.pinimg.com/1200x/68/fe/bd/68febdd512a00f0a345e51ebed7ddd63.jpg",
+      "https://i.pinimg.com/1200x/0a/8d/67/0a8d674a7923c6e9bfe3665bc63522d0.jpg"
+    ]
+  },
+    {
+    "id": 5,
     "title": "Mexican Fiesta",
     "location": "Basel",
     "address": "Münsterplatz 10, 4051 Basel",
@@ -132,6 +173,72 @@
     "category": "Dinner",
     "diet": "Omnivore",
     "spots": 6,
+    "host": {
+      "name": "Carlos",
+      "initial": "C"
+    },
+    "hostMessage": [
+      "Hallo zusammen! Leider muss ich dieses Event absagen, da mir etwas Wichtiges dazwischengekommen ist.",
+      "Ich hoffe, wir können das bald nachholen!"
+    ],
+    "menu": [
+      "Guacamole & Nachos",
+      "Tacos al Pastor",
+      "Churros"
+    ],
+    "specifications": [],
+    "participants": [
+      "Carlos",
+      "Vanessa",
+      "Christina",
+      "Julian"
+    ],
+    "gallery": [
+     "https://i.pinimg.com/736x/7d/5c/29/7d5c29117ef6f974b1a6f77b22408ae7.jpg",
+      "https://i.pinimg.com/1200x/4e/4e/5d/4e4e5d57576d475316f25f84e5afb38f.jpg",
+      "https://i.pinimg.com/webp/1200x/d6/c2/4c/d6c24c1582d944229d271d8948b53dbb.webp",
+      "https://i.pinimg.com/webp/1200x/24/51/8e/24518e6e7bd9a68befcd9a98bba72a23.webp"
+    ]
+  },  {
+    "id": 6,
+    "title": "Schwedentorte Schlemmern",
+    "location": "Zürich",
+    "address": "Münsterplatz 10, 8009 Zürich",
+    "date": "9. Mai 2026",
+    "time": "14:00 UHR",
+    "category": "Kaffee + Kuchen",
+    "diet": "Vegan",
+    "spots": 5,
+    "host": {
+      "name": "Annalea",
+      "initial": "A"
+    },
+    "hostMessage": [
+      "Hallo :) Ich suche Personen die Lust haben meine Vegane Schwedentorten Kreation zu probieren. Es ist eine Schwedentorte, die ich mit einer veganen Buttercreme und frischen Früchten zubereite. Es wird ein süsser Genuss, den ihr nicht verpassen solltet!"
+    ],
+    "menu": [
+      "Schwedentorte",
+      "Diverse Teesorten"
+    ],
+    "specifications": [],
+    "participants": [
+      "Annalea",
+      "Andi",
+      "Leah"
+    ],
+    "gallery": [
+      "https://i.pinimg.com/736x/0e/44/78/0e4478e4e3389c77e3e859b2663e6d47.jpg"
+    ]
+  },  {
+    "id": 7,
+    "title": "Mexican Fiesta",
+    "location": "Basel",
+    "address": "Münsterplatz 10, 4051 Basel",
+    "date": "29. Mai. 2026",
+    "time": "18:00 UHR",
+    "category": "Dinner",
+    "diet": "Omnivore",
+    "spots": 6,
     "status": "canceled",
     "host": {
       "name": "Carlos",

js/event_detail.js

@@ -447,14 +447,29 @@
                     <strong>${event.title}</strong>
                 </div>
                 <div class="detail-action-btn-wrap">
+                    <div class="detail-action-row" style="margin-left:auto; display:flex; gap:12px; align-items:center;">
                         ${isFull ? `
-                        <button class="detail-primary-btn detail-spots-pill-full" type="button" disabled>Ausgebucht</button>
+                            <div class="detail-dereg-column">
-                    ` : `
+                                <button class="button-plaetze event-spots-full" type="button" disabled>Ausgebucht</button>
-                        <button class="detail-primary-btn${actionButtonVariantClass}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
+                                <small class="detail-dereg-hint detail-dereg-hint--placeholder">&nbsp;</small>
+                            </div>
+                        ` : ''}
+
+                        ${(!isFull || isRegistered) ? `
+                            <div class="detail-dereg-column">
+                                <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>
                 </div>
             </section>
 

js/event_overview.js

@@ -536,8 +536,8 @@
                     </div>
                 </div>
                 <div class="event-side${isFull ? ' event-side-full' : ''}">
-                    ${sideInfoMarkup}
                     ${actionMarkup}
+                    ${sideInfoMarkup}
                 </div>
             `;