Refactor team name formatting and update version to 1.8.6

components/HomeSpielplanTeamWidget.vue

@@ -58,7 +58,9 @@
               </p>
             </div>
             <p class="text-sm text-gray-800">
-              {{ game.HeimMannschaft }} vs {{ game.GastMannschaft }}
+              {{ formatMatchTeamName(game.HeimMannschaft, game.HeimMannschaftAltersklasse) }}
+              vs
+              {{ formatMatchTeamName(game.GastMannschaft, game.GastMannschaftAltersklasse) }}
             </p>
           </div>
         </div>
@@ -69,6 +71,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
+import { formatTeamDisplayName } from '~/utils/team-display'
 
 const props = defineProps({
   season: {
@@ -91,10 +94,13 @@ const games = ref([])
 
 const widgetTitle = computed(() => {
   if (!props.teamName) return 'Mannschaft'
-  const youth = String(props.teamAgeGroup || '').toLowerCase().includes('jugend')
-  return youth ? `(J) ${props.teamName}` : props.teamName
+  return formatTeamDisplayName(props.teamName, props.teamAgeGroup)
 })
 
+function formatMatchTeamName(teamName, teamAgeGroup) {
+  return formatTeamDisplayName(teamName, teamAgeGroup) || '-'
+}
+
 const seasonLabel = computed(() => {
   const match = String(props.season || '').match(/^(\d{2})--(\d{2})$/)
   if (!match) return props.season || '-'
@@ -184,4 +190,4 @@ watch(
   },
   { immediate: true }
 )
-</script>
+</script>

components/Navigation.vue

@@ -111,10 +111,10 @@
               </NuxtLink>
             </div>
 
-            <div class="hidden lg:flex items-center h-6 border-t border-primary-700/20">
+            <div class="hidden lg:flex items-center h-6 min-w-0 border-t border-primary-700/20">
               <div
                 v-if="currentSubmenu"
-                class="flex items-center space-x-1"
+                :class="currentSubmenu === 'mannschaften' ? 'relative min-w-0 flex-1' : 'flex items-center space-x-1'"
               >
                 <!-- Newsletter Submenu -->
                 <template v-if="currentSubmenu === 'newsletter'">
@@ -188,41 +188,53 @@
 
                 <!-- Mannschaften Submenu -->
                 <template v-if="currentSubmenu === 'mannschaften'">
-                  <NuxtLink
-                    to="/mannschaften"
-                    class="px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
-                    active-class="bg-primary-600"
-                  >
-                    Übersicht
-                  </NuxtLink>
-                  <div class="h-3 w-px bg-primary-700" />
-                  <template
-                    v-for="mannschaft in mannschaften"
-                    :key="mannschaft.slug"
+                  <div
+                    class="flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap scroll-smooth pr-7 [scrollbar-color:theme(colors.primary.700)_transparent] [scrollbar-width:thin]"
+                    tabindex="0"
+                    aria-label="Mannschaften-Untermenü – horizontal scrollbar"
                   >
                     <NuxtLink
-                      :to="`/mannschaften/${mannschaft.slug}`"
-                      class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                      to="/mannschaften"
+                      class="shrink-0 px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
+                      active-class="bg-primary-600"
+                    >
+                      Übersicht
+                    </NuxtLink>
+                    <div class="h-3 w-px shrink-0 bg-primary-700" />
+                    <template
+                      v-for="mannschaft in mannschaften"
+                      :key="mannschaft.slug"
+                    >
+                      <NuxtLink
+                        :to="`/mannschaften/${mannschaft.slug}`"
+                        class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                        active-class="text-white bg-primary-600"
+                      >
+                        {{ mannschaft.mannschaft }}
+                      </NuxtLink>
+                    </template>
+                    <div class="h-3 w-px shrink-0 bg-primary-700" />
+                    <NuxtLink
+                      to="/mannschaften/spielplaene"
+                      class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                       active-class="text-white bg-primary-600"
                     >
-                      {{ mannschaft.mannschaft }}
+                      Spielpläne
                     </NuxtLink>
-                  </template>
-                  <div class="h-3 w-px bg-primary-700" />
-                  <NuxtLink
-                    to="/mannschaften/spielplaene"
-                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
-                    active-class="text-white bg-primary-600"
+                    <NuxtLink
+                      to="/spielsysteme"
+                      class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                      active-class="text-white bg-primary-600"
+                    >
+                      Spielsysteme
+                    </NuxtLink>
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-y-0 right-0 flex w-9 items-center justify-end bg-gradient-to-l from-primary-900 via-primary-900/90 to-transparent text-primary-300"
                   >
-                    Spielpläne
-                  </NuxtLink>
-                  <NuxtLink
-                    to="/spielsysteme"
-                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
-                    active-class="text-white bg-primary-600"
-                  >
-                    Spielsysteme
-                  </NuxtLink>
+                    ›
+                  </span>
                 </template>
 
                 <!-- Training Submenu -->

components/Spielplan.vue

@@ -220,6 +220,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { formatTeamDisplayName } from '~/utils/team-display'
 
 const spielplanData = ref([])
 const isLoading = ref(false)
@@ -357,15 +358,8 @@ const formatTime = (terminString) => {
 
 const formatTeamName = (teamName, ageGroup) => {
   if (!teamName) return 'Nicht angegeben'
-  
-  // Prüfe ob es Nachwuchs ist
-  const isNachwuchs = ageGroup && (
-    ageGroup.toLowerCase().includes('jugend') || 
-    teamName.toLowerCase().includes('jugend')
-  )
-  
-  // Füge (J) für Nachwuchs hinzu
-  return isNachwuchs ? `(J) ${teamName}` : teamName
+
+  return formatTeamDisplayName(teamName, ageGroup)
 }
 
 const formatRunde = (runde) => {