components/Footer.vue

@@ -1,39 +1,39 @@
 <template>
-  <footer class="fixed bottom-0 left-0 right-0 z-40 bg-gray-900 border-t border-gray-800 shadow-2xl">
+  <footer class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200/90 bg-white/95 shadow-[0_-5px_18px_rgba(24,24,27,0.07)] backdrop-blur-sm">
-    <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-2 sm:py-3">
+    <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-2.5 sm:py-3">
       <div class="flex flex-col sm:flex-row justify-between items-center gap-y-1 sm:gap-y-0">
-        <p class="text-xs sm:text-sm text-gray-400 whitespace-nowrap">
+        <p class="text-xs sm:text-sm text-gray-600 whitespace-nowrap">
           © {{ currentYear }} Harheimer TC 1954 e.V.
         </p>
         <div class="flex flex-wrap justify-center items-center gap-x-4 gap-y-1 text-xs sm:text-sm relative">
           <span
             v-if="isLoggedIn && appVersion"
-            class="text-xs text-gray-600"
+            class="text-xs text-gray-500"
             title="Version"
           >
             v{{ appVersion }}
           </span>
           <NuxtLink
             to="/impressum"
-            class="text-gray-400 hover:text-primary-400 transition-colors"
+            class="text-gray-700 hover:text-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 rounded-sm transition-colors"
           >
             Impressum
           </NuxtLink>
           <NuxtLink
             to="/datenschutz"
-            class="text-gray-400 hover:text-primary-400 transition-colors"
+            class="text-gray-700 hover:text-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 rounded-sm transition-colors"
           >
             Datenschutz
           </NuxtLink>
           <NuxtLink
             to="/konto-loeschen"
-            class="text-gray-400 hover:text-primary-400 transition-colors"
+            class="text-gray-700 hover:text-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 rounded-sm transition-colors"
           >
             Konto loeschen
           </NuxtLink>
           <NuxtLink
             to="/kontakt"
-            class="text-gray-400 hover:text-primary-400 transition-colors"
+            class="text-gray-700 hover:text-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 rounded-sm transition-colors"
           >
             Kontakt
           </NuxtLink>
@@ -41,7 +41,7 @@
           <!-- Login/Logout -->
           <template v-if="isLoggedIn">
             <button
-              class="flex items-center space-x-1 text-gray-400 hover:text-primary-400 transition-colors"
+              class="flex items-center space-x-1 rounded-sm text-gray-700 hover:text-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 transition-colors"
               @click="handleLogout"
             >
               <User :size="16" />
@@ -53,7 +53,7 @@
             class="relative"
           >
             <button
-              class="flex items-center space-x-1 text-gray-400 hover:text-primary-400 transition-colors"
+              class="flex items-center space-x-1 rounded-sm text-gray-700 hover:text-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 transition-colors"
               @click="toggleMemberMenu"
             >
               <User :size="16" />
@@ -75,25 +75,25 @@
             >
               <div
                 v-if="isMemberMenuOpen"
-                class="absolute bottom-full right-0 mb-2 w-48 bg-gray-800 border border-gray-700 rounded-lg shadow-xl overflow-hidden"
+                class="absolute bottom-full right-0 mb-2 w-48 overflow-hidden rounded-md border border-gray-200 bg-white shadow-[0_12px_28px_rgba(24,24,27,0.14)] ring-1 ring-black/5"
               >
                 <NuxtLink
                   to="/login"
-                  class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-50 hover:text-primary-800 focus-visible:outline-none focus-visible:bg-primary-50 focus-visible:text-primary-800 transition-colors"
                   @click="isMemberMenuOpen = false"
                 >
                   Anmelden
                 </NuxtLink>
                 <NuxtLink
                   to="/registrieren"
-                  class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-50 hover:text-primary-800 focus-visible:outline-none focus-visible:bg-primary-50 focus-visible:text-primary-800 transition-colors"
                   @click="isMemberMenuOpen = false"
                 >
                   Registrieren
                 </NuxtLink>
                 <NuxtLink
                   to="/passwort-vergessen"
-                  class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-50 hover:text-primary-800 focus-visible:outline-none focus-visible:bg-primary-50 focus-visible:text-primary-800 transition-colors"
                   @click="isMemberMenuOpen = false"
                 >
                   Passwort vergessen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harheimertc-website",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Moderne Webseite für den Harheimer Tischtennis Club",
   "private": true,
   "type": "module",