Upgrade Express to version 5.2.1 and update related dependencies in package.json and package-lock.json. Refactor server CORS configuration to accommodate Express 5 changes. Enhance routing logic in Vue components for improved path normalization and menu handling. Update HTML asset references for better loading performance and accessibility improvements in various components.

src/common/components/HeaderComponent.vue

@@ -2,7 +2,9 @@
   <header>
     <div class="header-title">
       <h1>Evangelische Miriamgemeinde Frankfurt am Main</h1>
-      <span class="reload-icon" @click="reloadMenu">&#x27F3;</span>
+      <button class="reload-icon" type="button" @click="reloadMenu" aria-label="Menü neu laden">
+        &#x27F3;
+      </button>
     </div>
     <NavbarComponent />
     <BreadcrumbsComponent />
@@ -13,7 +15,6 @@
 import NavbarComponent from './NavbarComponent.vue';
 import BreadcrumbsComponent from './BreadcrumbsComponent.vue';
 import { mapActions } from 'vuex';
-import router from '@/router'; 
 
 export default {
   name: 'HeaderComponent',
@@ -25,16 +26,8 @@ export default {
     ...mapActions(['loadMenuData']),
     async reloadMenu() {
       await this.loadMenuData();
-      this.$router.push({ path: '/' }); 
-      const routes = this.$store.state.menuData.map(item => {
-        if (item.component) {
-          return {
-            path: item.link,
-            component: () => import(`../components/${item.component}.vue`)
-          };
-        }
-      });
-      routes.forEach(route => router.addRoute(route)); 
+      // Für den Test-Reload den aktuellen Pfad behalten und sauber neu initialisieren.
+      window.location.reload();
     }
   }
 };
@@ -65,18 +58,22 @@ header h1 {
 }
 
 .reload-icon {
-  font-size: 1rem;
+  font-size: 0.82rem;
   cursor: pointer;
   margin-left: var(--space-3);
-  background-color: var(--color-brand-tint);
-  color: var(--color-bg-page);
-  padding: var(--space-1) 6px;
-  border-radius: 50%;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  padding: 2px 5px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.14);
   line-height: 1;
+  opacity: 0.65;
 }
 
 .reload-icon:hover,
 .reload-icon:focus-visible {
   color: var(--color-brand-primary-hover);
+  border-color: rgba(122, 0, 209, 0.45);
+  opacity: 1;
 }
 </style>

src/common/components/NavbarComponent.vue

@@ -185,6 +185,11 @@ export default {
   background-color: var(--color-brand-primary-hover);
 }
 
+.nav-link:active,
+.menu-toggle:active {
+  transform: translateY(1px);
+}
+
 .navbar a:focus-visible,
 .menu-toggle:focus-visible {
   outline-color: #fff;
@@ -209,7 +214,7 @@ export default {
   left: 0;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  transition: opacity var(--transition-standard), visibility var(--transition-standard);
   box-shadow: var(--shadow-dropdown);
   border-radius: 4px;
   padding: var(--space-1);
@@ -234,7 +239,7 @@ export default {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  transition: opacity var(--transition-standard), visibility var(--transition-standard);
 }
 
 .fade-enter,