Styling Übersicht Events

css/event_create.css

@@ -262,7 +262,7 @@ textarea:focus {
 }
 
 .option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon {
-  color: var(--blaxk);
+  color: var(--black);
 }
 
 .option-card input {

css/event_overview.css

@@ -107,7 +107,7 @@
     transition: background-color 0.2s ease;
 }
 
-.meta-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
+.meta-filter input[type="date"]:hover::-webkit-calendar-picker-indicator {
   filter: brightness(0.8);
 }
 
@@ -265,28 +265,6 @@
     cursor: not-allowed;
 }
 
-/* ---------------------------------------------------------
-    Overview Empty State
---------------------------------------------------------- */
-.empty-state {
-    text-align: center;
-    padding: var(--space-32) var(--space-40);
-    border-radius: var(--radius-lg);
-    background: var(--butter-light);
-}
-
-.empty-state-kicker {
-    color: var(--olive);
-    font-size: 1rem;
-    font-weight: 400;
-}
-
-.empty-state-link {
-    display: inline-block;
-    margin-top: 20px;
-    text-decoration: none;
-}
-
 
 /* ---------------------------------------------------------
     Detail Page

css/my_profil.css

@@ -138,40 +138,6 @@
 .profile-event-actions {
     display: flex;
     align-items: center;
-    gap: var();
-}
-
-.profile-empty {
-    margin: 0;
-    color: var(--black);
-}
-
-.profile-empty-state {
-    text-align: center;
-    padding: 2.4rem 1.3rem;
-    border: 2px solid var(--olive-light);
-    border-radius: var(--radius-lg);
-    background: rgba(255, 255, 255, 0.92);
-    box-shadow: 0 3px 12px rgba(102, 52, 13, 0.08);
-}
-
-.profile-empty-kicker {
-    margin: 0 0 0.5rem;
-    color: var(--olive);
-    font-size: 0.8rem;
-    font-weight: 600;
-    letter-spacing: var(--ls-lg);
-}
-
-.profile-empty-state h3 {
-    margin: 0;
-    font-size: 1.5rem;
-    color: var(--brown);
-}
-
-.profile-empty-state p {
-    margin: 0.65rem auto 1rem;
-    max-width: 36rem;
 }
 
 .form-grid {

css/stylesheet_global.css

@@ -445,7 +445,7 @@ label {
     background: transparent;
     color: var(--olive-dark);
     opacity: 0.6;
-    padding: var() 0 var(--space-6) var(--space-24);
+    padding: var(--space-6) 0 var(--space-6) var(--space-24);
     cursor: not-allowed;
 }
 
@@ -584,6 +584,12 @@ label {
     color: var(--butter-light);
 }
 
+.category-item.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
 
 .category-items {
     display: inline-flex;
@@ -951,6 +957,28 @@ input:focus {
     border: 2px solid var(--olive);
 }
 
+/* ---------------------------------------------------------
+    Overview Empty State
+--------------------------------------------------------- */
+.empty-state {
+    text-align: center;
+    padding: var(--space-32) var(--space-40);
+    border-radius: var(--radius-lg);
+    background: var(--butter-light);
+}
+
+.empty-state-kicker {
+    color: var(--olive);
+    font-size: 1rem;
+    font-weight: 400;
+}
+
+.empty-state-link {
+    display: inline-block;
+    margin-top: 20px;
+    text-decoration: none;
+}
+
 
 /* Footer */
 

event_overview.html

@@ -81,9 +81,9 @@
     <summary>Nach Allergenen filtern</summary>
     <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="Glutenfrei">Glutenfrei</button>
-        <button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
+        <button class="category-item" type="button" data-allergie="Laktosefrei">Laktosefrei</button>
-        <button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
+        <button class="category-item" type="button" data-allergie="Ohne Nüsse">Ohne Nüsse</button>
         </div>
     </div>
 

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'), 4000);
+                                    setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
                                 }
                                 applyFilters();
                             };
@@ -613,7 +613,7 @@
                                     setTimeout(() => {
                                         snackbar.classList.remove('snackbar--visible');
                                         setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
-                                    }, 4000);
+                                    }, 3000);
                                 }
                                 applyFilters();
                             };

js/my_profil.js

@@ -583,12 +583,12 @@
 
         if (events.length === 0) {
             const emptyElement = document.createElement('div');
-            emptyElement.className = 'profile-empty-state';
+            emptyElement.className = 'empty-state';
             emptyElement.innerHTML = `
-                <p class="profile-empty-kicker">Keine Treffer</p>
+                <div class="empty-state-kicker">Keine Treffer</div>
                 <h3>${emptyStateConfig.title}</h3>
                 <p>${emptyStateConfig.text}</p>
-                <a class="button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
+                <a class="empty-state-link button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
             `;
             container.appendChild(emptyElement);
             return;