From 5c787473f4650f366d5ac2a44ec5d2b662676b7d Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Sat, 5 Jul 2025 10:41:33 +0200
Subject: [PATCH] language fix

---
 components/ArticleCard.vue             |   4 +-
 components/CallToActionBox.vue         |   6 +-
 components/LanguageBox.vue             |   2 +-
 components/MarqueeBanner.vue           |  82 +++++++++----
 components/template/NavBar.vue         | 162 +++++++++++++++----------
 layouts/default.vue                    |   3 +-
 nuxt.config.ts                         |   4 +-
 pages/designer/index.vue               |  41 ++-----
 pages/index.vue                        |   6 +-
 pages/services/accessibility/index.vue |   5 +-
 pages/services/cms/index.vue           |  15 +--
 pages/webagency/index.vue              |  19 ++-
 12 files changed, 199 insertions(+), 150 deletions(-)

diff --git a/components/ArticleCard.vue b/components/ArticleCard.vue
index c55d3d8..485821a 100644
--- a/components/ArticleCard.vue
+++ b/components/ArticleCard.vue
@@ -96,7 +96,7 @@
     flex-direction: column
     align-items: center
     justify-content: flex-start
-    padding: 1rem
+    padding: 1rem 3vw
     border-top-left-radius: 1rem
     border-bottom-right-radius: 50%
     box-shadow: 2px 2px 5px 3px rgba(black, .2)
@@ -106,7 +106,7 @@
       font-size: 1rem
       line-height: 140%
       font-family: 'Mainfont-Bold'
-      margin: .2rem 1rem
+      margin: .2rem 0
       hyphens: auto
   </style>
   
\ No newline at end of file
diff --git a/components/CallToActionBox.vue b/components/CallToActionBox.vue
index e59e56b..37eaee4 100644
--- a/components/CallToActionBox.vue
+++ b/components/CallToActionBox.vue
@@ -26,11 +26,11 @@
   })
   </script>
   
-  <style scoped lang="sass">
+  <style lang="sass">
   .ctaBox
-    margin: 8rem 10%
+    margin: 5% 10%
     text-align: center
     h3
-      font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
+      font-size: clamp(1.5rem, .8rem + 2vw, 1.8rem)
   </style>
   
\ No newline at end of file
diff --git a/components/LanguageBox.vue b/components/LanguageBox.vue
index bb34333..0a8f98e 100644
--- a/components/LanguageBox.vue
+++ b/components/LanguageBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="false" v-if="locales.length >=2" class="languageBox" @click="toggleOpen">
+  <div v-if="locales.length >=2" class="languageBox" @click="toggleOpen">
     <div v-if="!open" class="current">{{ currentLanguage }}</div>
 
     <transition name="slide">
diff --git a/components/MarqueeBanner.vue b/components/MarqueeBanner.vue
index e84e85d..8109f5d 100644
--- a/components/MarqueeBanner.vue
+++ b/components/MarqueeBanner.vue
@@ -21,11 +21,14 @@
         <span v-html="title"></span>
 
         <div class="marquee">
-          <div class="marquee-track" :style="`animation-duration: ${speed}s`">
+          <div
+            class="marquee-track"
+            :style="`animation-duration: ${speed}s`"
+          >
             <ul class="marquee-list">
               <li
                 v-for="(item, index) in items"
-                :key="index"
+                :key="'first-' + index"
                 class="marquee-item"
               >
                 <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
@@ -52,12 +55,45 @@
                   format="webp"
                   loading="lazy"
                   :class="['custLogo', { greyscale: greyscale }]"
-
+                />
+              </li>
+              <!-- 👇 DUPLIKAT für nahtlosen Scroll -->
+              <li
+                v-for="(item, index) in items"
+                :key="'second-' + index"
+                class="marquee-item"
+              >
+                <!-- identischer Inhalt wie oben -->
+                <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
+                  <NuxtImg
+                    provider="strapi"
+                    :src="item.image.url"
+                    :alt="item.image.alternativeText || item.text || 'Image'"
+                    :title="item.text"
+                    width="250"
+                    :height="logoHeight"
+                    format="webp"
+                    loading="lazy"
+                    class="custLogo"
+                  />
+                </NuxtLink>
+                <NuxtImg
+                  v-else
+                  provider="strapi"
+                  :src="item.image.url"
+                  :alt="item.image.alternativeText || item.text || 'Image'"
+                  :title="item.text"
+                  width="250"
+                  height="50"
+                  format="webp"
+                  loading="lazy"
+                  :class="['custLogo', { greyscale: greyscale }]"
                 />
               </li>
             </ul>
           </div>
         </div>
+
       </div>
     </div>
 
@@ -127,7 +163,6 @@ const props = defineProps({
   svg
     margin: 0
 
-
 .box
   background-color: $beige
   width: 100%
@@ -139,26 +174,27 @@ const props = defineProps({
 
   h2
     color: #333
-    font-size: 1.2rem
+    font-size: 1.4rem
     font-family: 'Mainfont-Bold'
     padding-top: 0rem
 
-.marquee
-  overflow: hidden
-  width: 100%
-  padding: 3rem auto
-
-.marquee-track
-  display: flex
-  animation: scroll 20s linear infinite
-  width: max-content
-
-.marquee-list
-  display: flex
-  gap: 3rem
-  list-style: none
-  padding: 1rem 0
-  margin: 0
+  .marquee
+    overflow: hidden
+    width: 100%
+    position: relative
+    margin: 2rem 0
+  
+  .marquee-track
+    display: flex
+    width: fit-content
+    animation: scroll linear infinite
+  
+  .marquee-list
+    display: flex
+    gap: 3rem
+    list-style: none
+    padding: 1rem 0
+    margin: 0  
 
 .marquee-item
   flex-shrink: 0
@@ -176,9 +212,9 @@ const props = defineProps({
     filter: grayscale(0)
 
 @keyframes scroll
-  from
+  0%
     transform: translateX(0)
-  to
+  100%
     transform: translateX(-50%)
 
 .waveBox
diff --git a/components/template/NavBar.vue b/components/template/NavBar.vue
index bf32ed1..7342c34 100644
--- a/components/template/NavBar.vue
+++ b/components/template/NavBar.vue
@@ -7,7 +7,6 @@
       scrollPosition > 50 ? 'scrolled' : ''
     ]"
     aria-label="Hauptnavigation"
-    role="menu"
   >
     <!-- Burger Icon als Button -->
     <button
@@ -41,7 +40,6 @@
         @mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
         @focusin="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
         @focusout="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
-        role="menuitem"
       >
         <!-- Mit SubNav -->
         <template v-if="link.subNav">
@@ -59,15 +57,27 @@
               {{ isActiveSubNav(link.label) ? 'Untermenü schließen' : 'Untermenü öffnen' }}
             </span>
           </button>
-          <button v-else>
+          <button 
+            type="button"
+            v-else
+            aria-haspopup="true"
+            :aria-expanded="isSubNavOpen === link.label"
+            :aria-controls="`submenu-${link.label}`"
+            @keydown="handleKeyDown($event, link.label)"
+            @focus="showSubNav(link.label)"
+            @blur="hideSubNav(link.label)"
+          >
             {{ $t(link.label) }}
             <span class="arrow" :class="{ open: isSubNavOpen === link.label }"></span>
           </button>
 
+
           <ul
             :id="`submenu-${link.label}`"
             class="submenu"
             :class="{ open: isActiveSubNav(link.label) }"
+            role="group"
+            :aria-label="`${$t(link.label)} Untermenü`"
           >
             <li v-for="sublink in link.subNav" :key="sublink.label">
               <NuxtLinkLocale
@@ -94,75 +104,93 @@
   </nav>
 </template>
 
-  
-  
-  <script setup>
-  import { ref, computed } from 'vue'
-  import { useMainStore } from '@/stores/main'
-  const mainStore = useMainStore()
-  
-  const screenWidth = computed(() => mainStore.screenWidth)
-  const scrollPosition = computed(() => mainStore.scrollPosition)
-  
-  const isSubNavOpen = ref(null)
-  const isMobileSubNavOpen = ref(null)
-  
-  function toggleMobileSubNav(routeKey) {
-    if (screenWidth.value < 1350) {
-      isMobileSubNavOpen.value = isMobileSubNavOpen.value === routeKey ? null : routeKey
-    }
+<script setup>
+import { ref, computed } from 'vue'
+import { useMainStore } from '@/stores/main'
+
+const mainStore = useMainStore()
+
+const screenWidth = computed(() => mainStore.screenWidth)
+const scrollPosition = computed(() => mainStore.scrollPosition)
+
+const isSubNavOpen = ref(null)
+const isMobileSubNavOpen = ref(null)
+
+function toggleMobileSubNav(routeKey) {
+  if (screenWidth.value < 1350) {
+    isMobileSubNavOpen.value =
+      isMobileSubNavOpen.value === routeKey ? null : routeKey
   }
-  
-  function showSubNav(routeKey) {
+}
+
+function showSubNav(routeKey) {
+  if (screenWidth.value >= 1350) {
     isSubNavOpen.value = routeKey
   }
-  function hideSubNav(routeKey) {
-    if (isSubNavOpen.value === routeKey) {
-      isSubNavOpen.value = null
-    }
-  }
+}
 
-  function isActiveSubNav(label) {
-      return (screenWidth.value < 1350 ? isMobileSubNavOpen.value : isSubNavOpen.value) === label
-    }
-  
-  const isMenuOpen = computed(() => mainStore.menuOpen)
-  const toggleMenu = () => mainStore.toggleMenu()
-  
-  const toggleContactBubble = () => mainStore.toggleContactBubble()
-  
-  const handleMobileClose = () => {
-    if (screenWidth.value < 1350 && isMenuOpen.value) {
-      toggleMenu()
-    } else {
-      hideSubNav()
-    }
+function hideSubNav(routeKey) {
+  if (screenWidth.value >= 1350 && isSubNavOpen.value === routeKey) {
+    isSubNavOpen.value = null
   }
-  
-  const navigationLinks = [
-    { routeKey: 'webagency', label: 'menu.webagency' },
-    {
-      routeKey: '',
-      label: 'menu.services',
-      subNav: [
-        { routeKey: 'services-cms', label: 'menu.menuCms' },
-        { routeKey: 'services-seo', label: 'menu.menuSEO' },
-        { routeKey: 'services-accessibility', label: 'menu.menuAccessibility' },
-        { routeKey: 'services-ai', label: 'menu.menuAi' }
-      ]
-    },
-    {
-      routeKey: '',
-      label: 'menu.sectors',
-      subNav: [
-        { routeKey: 'sectors-schools', label: 'menu.menuSchools' },
-        { routeKey: 'sectors-film', label: 'menu.menuFilm' }
-      ]
-    },
-    { routeKey: 'magazin', label: 'menu.menuMagazin' },
-    { routeKey: 'references', label: 'menu.references' }
-  ]
-  </script>
+}
+
+function isActiveSubNav(label) {
+  return (screenWidth.value < 1350 ? isMobileSubNavOpen.value : isSubNavOpen.value) === label
+}
+
+const isMenuOpen = computed(() => mainStore.menuOpen)
+const toggleMenu = () => mainStore.toggleMenu()
+
+const handleMobileClose = () => {
+  if (screenWidth.value < 1350 && isMenuOpen.value) {
+    toggleMenu()
+  } else {
+    isSubNavOpen.value = null
+  }
+}
+
+// Tastatursteuerung für Desktop-Menü
+function handleKeyDown(event, linkLabel) {
+  if (screenWidth.value < 1350) return
+
+  switch (event.key) {
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      isSubNavOpen.value = isSubNavOpen.value === linkLabel ? null : linkLabel
+      break
+    case 'Escape':
+      isSubNavOpen.value = null
+      break
+  }
+}
+
+const navigationLinks = [
+  { routeKey: 'webagency', label: 'menu.webagency' },
+  {
+    routeKey: '',
+    label: 'menu.services',
+    subNav: [
+      { routeKey: 'services-cms', label: 'menu.menuCms' },
+      { routeKey: 'services-seo', label: 'menu.menuSEO' },
+      { routeKey: 'services-accessibility', label: 'menu.menuAccessibility' },
+      { routeKey: 'services-ai', label: 'menu.menuAi' }
+    ]
+  },
+  {
+    routeKey: '',
+    label: 'menu.sectors',
+    subNav: [
+      { routeKey: 'sectors-schools', label: 'menu.menuSchools' },
+      { routeKey: 'sectors-film', label: 'menu.menuFilm' }
+    ]
+  },
+  { routeKey: 'magazin', label: 'menu.menuMagazin' },
+  { routeKey: 'references', label: 'menu.references' }
+]
+</script>
+
   
 <style lang="sass">
 .mainNav
diff --git a/layouts/default.vue b/layouts/default.vue
index 40ed8d5..1f969a5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -89,7 +89,8 @@ main
     color: darken($primaryColor, 20%)
   .supheadlinePink, supheadlineMint
     margin-bottom: -.5rem
-    font-size: calc(.5rem + 1vw)
+    font-size: clamp(1rem, 1rem + 1vw, 1.3rem)
+    line-height: 1.4
   .supheadlinePink
     color: darken($pink, 10%)    
   .supheadlineMint
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1f47bf3..53046fb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -94,8 +94,8 @@ export default defineNuxtConfig({
     langDir: 'locales', 
     locales: [
       { code: 'de', name: 'Deutsch', file: 'de.json' },
-      { code: 'en', name: 'English', file: 'en.json' },
-      /*{ code: 'es', name: 'Español', file: 'es.json' },
+      /*{ code: 'en', name: 'English', file: 'en.json' },
+      { code: 'es', name: 'Español', file: 'es.json' },
       { code: 'fr', name: 'Français', file: 'fr.json' },
       { code: 'it', name: 'Italiano', file: 'it.json' },
       { code: 'tr', name: 'Türkçe', file: 'tr.json' }*/
diff --git a/pages/designer/index.vue b/pages/designer/index.vue
index 32d4346..41ab46e 100644
--- a/pages/designer/index.vue
+++ b/pages/designer/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="landing topSpace">
         <section class="heroBox">
-            <div class="container">
+            <div class="container-10">
                 <div class="contentBox">
                     <p class="supheadlinePink">Webentwicklung für Grafikdesigner und Mediengestalter</p>
                     <h1>Du hast ein geniales Design im Kopf ... </h1>
@@ -9,7 +9,7 @@
                     <h3>Jou! Das kann richtig frustrierend sein - muss es aber nicht! <br>Gemeinsam setzen wir deine kreativen Ideen pixelgenau, performant und individuell um!</h3>
                 </div>        
                 
-                <div class="speechBox d-flex align-items-start">
+                <div v-if="false" class="speechBox d-flex align-items-start">
                     <NuxtImg
                         class="profileImage"
                         src="/uploads/sabrinahennrich_0f07d46857.jpg"
@@ -255,37 +255,10 @@ onUnmounted(() => {
         position: relative
         overflow-x: hidden
         overflow-y: hidden
-        /*&::after
-            content: ''
-            position: absolute
-            top: 2vh
-            right: -50vw
-            width: 80vw
-            height: 90%
-            min-height: 500px
-            max-height: 800px
-            background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250225214638_2209c9c92e.png')
-            background-repeat: no-repeat
-            background-position: center right
-            background-size: cover
-            border-radius: 42% 49% 52% 48% / 53% 38% 62% 47%
-            animation: bubble-wobble 25s infinite ease alternate, gradient-animation 70s infinite alternate ease-in-out
-            box-shadow: $innerShadow
-            opacity: 1
-            @media(max-width: $breakPointXL)
-                right: -60vw
-            @media(max-width: $breakPointLG)
-                right: -60vw
-                min-height: 300px
-                max-height: 500px
-            @media(max-width: $breakPointLG)
-                min-height: 200px
-                max-height: 400px
-                right: -65vw
-            @media(max-width: $breakPointLG)
-                min-height: 200px
-                max-height: 400px
-                right: -70vw */
+        
+        .container-10
+            margin-top: 0
+            margin-bottom: 1rem
         h2
             margin-bottom: 1rem
             font-size: 1.4rem
@@ -301,7 +274,7 @@ onUnmounted(() => {
         .speechBox
             display: flex
             align-items: center
-            max-width: 100%
+            width: 100%
             margin: 0 auto
             padding: 1rem 0
             gap: 4vw
diff --git a/pages/index.vue b/pages/index.vue
index 35be9e2..4a1b423 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -145,7 +145,7 @@
       :button-text="$t('buttons.contactUs')"
     />
 
-    <MarqueeBanner :items="logoItems" :logo-height="60" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
+    <MarqueeBanner :items="logoItems" :logo-height="60" :speed="30" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
     <FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
 
   </div>
@@ -281,7 +281,7 @@ const logoItems = computed(() => {
       text-align: center      
       padding: 2rem 5%
       border-radius: 1rem
-      @media(max-width: $breakPointMD)
+      @media(max-width: $breakPointLG)
         width: 90%
         margin: 3rem 5% 3rem 5%
         background-color: rgba(255,255,255,.8)
@@ -293,7 +293,7 @@ const logoItems = computed(() => {
         font-family: 'Mainfont-Bold'
         font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem)
       p
-        font-size: clamp(1rem, .5rem + 2vw, 1.2rem)
+        font-size: clamp(1.1rem, .5rem + 2vw, 1.2rem)
 
   
       
diff --git a/pages/services/accessibility/index.vue b/pages/services/accessibility/index.vue
index 1cc96d7..fa07700 100644
--- a/pages/services/accessibility/index.vue
+++ b/pages/services/accessibility/index.vue
@@ -127,6 +127,7 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
 
 <style lang="sass">
 .accessiblityPage
+    hyphens: auto
     .articleBox
         margin-top: 5rem
         margin-bottom: 6rem
@@ -142,7 +143,9 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
             float: right
             width: 30%
             max-width: 350px
-            margin: 1rem 0 2rem 2rem
+            min-width: 130px
+            margin: 1rem 0 2rem 2vw
+
     .implementation
         margin: 8vh 0
         padding: 1vh 0 3vh 0
diff --git a/pages/services/cms/index.vue b/pages/services/cms/index.vue
index fbbde78..6b9d2ce 100644
--- a/pages/services/cms/index.vue
+++ b/pages/services/cms/index.vue
@@ -124,7 +124,7 @@
         <MarqueeBanner 
             :items="projectItems" 
             :logo-height="200" 
-            title="Aus der Praxis: Unsere Projekte mit Headless Architektur" 
+            title="<h2>Aus der Praxis: Unsere Projekte mit Headless Architektur</h2>" 
             link="projekt" 
             aria-label="Headless CMS Projekte"
             speed="15"
@@ -267,7 +267,7 @@ const timeline = [
   
     .timeline
       position: relative
-      margin-left: 2rem
+      margin-left: 0
       padding-left: 0
       border-left: 10px solid $lightgrey      
   
@@ -282,13 +282,13 @@ const timeline = [
   
         .circle
           position: absolute
-          left: -5.2rem
-          top: 0
+          left: -11%
+          top: -1rem
           width: 10rem
           height: 7rem
           background: #37857C
           border-radius: $loopShape
-          border: 2px solid white
+          border: 1px solid #F1F1F1
           display: flex
           align-items: center
           justify-content: center
@@ -304,8 +304,8 @@ const timeline = [
   
             .period
               font-weight: bold
-              font-size: 1rem
-              font-family: monospace             
+              font-size: 1.3rem
+              font-family: 'Comfortaa-Bold'          
   
         .content-box
           background: white
@@ -321,6 +321,7 @@ const timeline = [
             color: #2B3E3F
             font-family: 'Mainfont-Bold'
             margin: 1rem 0
+            font-size: clamp(1.2rem, 2vw, 1.5rem)
           h4
             color: #37857C
             font-family: 'Mainfont-Bold'
diff --git a/pages/webagency/index.vue b/pages/webagency/index.vue
index 8361e31..065122f 100644
--- a/pages/webagency/index.vue
+++ b/pages/webagency/index.vue
@@ -30,7 +30,6 @@
             :alt="`Profilbild von ${companyinfo?.name || 'Ansprechpartnerin'}`"
             sizes="sm:100vw md:50vw lg:30vw"
             format="webp"
-            class="rounded-full w-full h-full object-cover"
           />
         </div>
 
@@ -212,6 +211,8 @@ const navigateTo = useRouter().push;
       border-radius: 50%
       content: ''
       display: block 
+      img
+        animation: bubble-wobble 25s infinite ease alternate
       @media(max-width: $breakPointSM)
           width: 80vw
           margin-left: -5vw
@@ -220,12 +221,15 @@ const navigateTo = useRouter().push;
           height: 70vw   
           max-height: 400px   
           clip-path: none
-          border-radius: $loopShape            
+          img
+            border-radius: $loopShape    
+            margin-left: 5vw      
   .teamContainer    
       width: 100%
       padding-left: calc(2vw + 5vw) 
       @media(max-width: $breakPointSM)
           padding-left: 0
+          margin-top: 6vh
       h2
           color: darken($lightgrey, 30%)
           font-size: .9rem
@@ -234,20 +238,23 @@ const navigateTo = useRouter().push;
           font-size: 2rem
           margin-bottom: .1rem
           margin-top: 1rem
+      p
+        font-size: 1.2rem
+
       .smallFont
-          font-size: 1.1rem
+          font-size: 1.2rem
           font-family: 'Mainfont-Bold'
       .smaller
-          font-size: .9rem
+          font-size: 1rem
       .quotation
           background-color: $lightgrey
           padding: 2.5rem 4rem 2rem 6rem
           border-radius: 1rem
-          font-size: 1rem
+          font-size: 1.2rem
           position: relative
           margin-top: 2rem
           p
-              font-size: 1rem
+              font-size: 1.2rem
           @media(max-width: $breakPointMD)
               padding: 5rem 2rem 2rem 2rem
               hyphens: auto