feat: Abmeldefrist-Hinweis auf Event-Detailseite, .hidden fix

css/event_overview.css

@@ -782,6 +782,27 @@
     font-weight: 600;
 }
 
+.detail-action-btn-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+
+.detail-dereg-hint {
+    display: block;
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--olive);
+    opacity: 0.75;
+}
+
+.detail-dereg-hint--closed {
+    color: var(--tomato);
+    font-weight: 500;
+    opacity: 1;
+}
+
 .detail-primary-btn {
     border-radius: var(--radius-pill);
     color: var(--white);

css/stylesheet_global.css

@@ -279,7 +279,7 @@ p {
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 /* Card Footer */

js/event_detail.js

@@ -117,6 +117,25 @@
         return msUntilStart <= twelveHoursInMs;
     }
 
+    // Abmeldefrist: 1 Tag (24 h) vor Eventstart.
+    function getDeregistrationInfo(event) {
+        const eventDateTime = parseEventDateTime(event);
+        if (!eventDateTime || Number.isNaN(eventDateTime.getTime())) {
+            return { daysLeft: null, isClosed: false };
+        }
+
+        const oneDayMs = 24 * 60 * 60 * 1000;
+        const deadlineMs = eventDateTime.getTime() - oneDayMs;
+        const msUntilDeadline = deadlineMs - Date.now();
+
+        if (msUntilDeadline <= 0) {
+            return { daysLeft: 0, isClosed: true };
+        }
+
+        const daysLeft = Math.ceil(msUntilDeadline / oneDayMs);
+        return { daysLeft, isClosed: false };
+    }
+
     // Adresse ist nur im 12h-Fenster VOR Eventstart sichtbar.
     function isAddressVisibleWindow(event) {
         const eventDateTime = parseEventDateTime(event);
@@ -276,6 +295,7 @@
         const isFull = freePlaces === 0;
         const isRegistrationClosed = isRegistrationClosedForEvent(event);
         const isOwnEvent = isEventOwnedByCurrentUser(event, currentUser);
+        const deregInfo = getDeregistrationInfo(event);
         const userRegistrations = currentUser?.email && Array.isArray(registrationMap[currentUser.email])
             ? registrationMap[currentUser.email].map(id => Number(id))
             : [];
@@ -287,11 +307,13 @@
             : !currentUser
                 ? 'Einloggen'
                 : isRegistered
-                    ? 'Abmelden'
+                    ? (deregInfo.isClosed ? 'Abmeldung geschlossen' : 'Abmelden')
                     : isRegistrationClosed
                         ? 'Anmeldung geschlossen'
                         : 'Anmelden';
-        const actionButtonDisabled = isOwnEvent || (!isRegistered && (isFull || isRegistrationClosed));
+        const actionButtonDisabled = isOwnEvent
+            || (!isRegistered && (isFull || isRegistrationClosed))
+            || (isRegistered && deregInfo.isClosed);
         const actionButtonVariantClass = isOwnEvent
             ? ' detail-primary-btn-own'
             : isRegistered
@@ -367,7 +389,6 @@
                             <div class="detail-participants-full hidden" data-participants-full>
                                 ${participants.map(name => `
                                     <div class="detail-participant-item">
-                                        <span class="participant-avatar">${name.charAt(0).toUpperCase()}</span>
                                         <span class="participant-name">${name}</span>
                                     </div>
                                 `).join('')}
@@ -402,9 +423,20 @@
                         <span class="detail-spots-pill${isFull ? ' detail-spots-pill-full' : ''}">
                             ${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze frei`}
                         </span>
-                        <button class="detail-primary-btn${actionButtonVariantClass}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
+                        <div class="detail-action-btn-wrap">
-                            ${actionButtonLabel}
+                            <button class="detail-primary-btn${actionButtonVariantClass}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
-                        </button>
+                                ${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>
                 </section>