app.vue

@@ -46,7 +46,7 @@ const handleResize = () => {
 }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 .page-enter-active,
 .page-leave-active
   transition: opacity 0.3s ease, transform 0.3s ease

assets/styles/main.sass

@@ -16,35 +16,35 @@ $breakPointXXL: 1400px
 
 @font-face
     font-family: 'Mainfont'
-    src: url('/assets/fonts/woff2/Montserrat-Light.woff2') format("woff2")
+    src: url('@/assets/fonts/woff2/Montserrat-Light.woff2') format("woff2")
     font-weight: normal
     font-style: normal
     font-display: swap
 
 @font-face
     font-family: 'Mainfont-Bold'
-    src: url('/assets/fonts/woff2/Montserrat-Medium.woff2') format("woff2")
+    src: url('@/assets/fonts/woff2/Montserrat-Medium.woff2') format("woff2")
     font-weight: normal
     font-style: normal
     font-display: swap
 
 @font-face
     font-family: 'Comfortaa'
-    src: url('/assets/fonts/woff2/Comfortaa-Light.woff2') format("woff2")
+    src: url('@/assets/fonts/woff2/Comfortaa-Light.woff2') format("woff2")
     font-weight: normal
     font-style: normal
     font-display: swap
 
 @font-face
     font-family: 'Comfortaa-Bold'
-    src: url('/assets/fonts/woff2/Comfortaa-Bold.woff2') format("woff2")
+    src: url('@/assets/fonts/woff2/Comfortaa-Bold.woff2') format("woff2")
     font-weight: normal
     font-style: normal
     font-display: swap
 
 /*@font-face
     font-family: 'Typewriter'
-    src: url('/assets/fonts/ttf/JMH_Typewriter.woff2') format("woff2")
+    src: url('@/assets/fonts/ttf/JMH_Typewriter.woff2') format("woff2")
     font-weight: normal
     font-style: normal
     font-display: swap*/

components/ArticleCard.vue

@@ -35,7 +35,7 @@
   })
   </script>
   
-  <style lang="sass">
+  <style scoped lang="sass">
   .article
     width: 100%
     max-width: 500px
@@ -96,7 +96,7 @@
     flex-direction: column
     align-items: center
     justify-content: flex-start
-    padding: 1rem 3vw
+    padding: 1rem
     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 0
+      margin: .2rem 1rem
       hyphens: auto
   </style>
   

components/CallToActionBox.vue

@@ -26,11 +26,11 @@
   })
   </script>
   
-  <style lang="sass">
+  <style scoped lang="sass">
   .ctaBox
-    margin: 5% 10%
+    margin: 8rem 10%
     text-align: center
     h3
-      font-size: clamp(1.5rem, .8rem + 2vw, 1.8rem)
+      font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
   </style>
   

components/HeroBox.vue

@@ -13,9 +13,10 @@
       sizes="sm:100vw md:100vw lg:100vw"
       alt=""
       aria-hidden="true"
-      loading="eager"
       priority
-      fetchpriority="high"    
+      loading="eager"
+      preload
+      fetchpriority="high"
     />
     <NuxtImg
       v-if="overlayImage"

components/MarqueeBanner.vue

@@ -21,14 +21,11 @@
         <span v-html="title"></span>
 
         <div class="marquee">
-          <div
+          <div class="marquee-track" :style="`animation-duration: ${speed}s`">
-            class="marquee-track"
-            :style="`animation-duration: ${speed}s`"
-          >
             <ul class="marquee-list">
               <li
                 v-for="(item, index) in items"
-                :key="'first-' + index"
+                :key="index"
                 class="marquee-item"
               >
                 <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
@@ -55,45 +52,12 @@
                   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>
 
@@ -163,6 +127,7 @@ const props = defineProps({
   svg
     margin: 0
 
+
 .box
   background-color: $beige
   width: 100%
@@ -174,27 +139,26 @@ const props = defineProps({
 
   h2
     color: #333
-    font-size: 1.4rem
+    font-size: 1.2rem
     font-family: 'Mainfont-Bold'
     padding-top: 0rem
 
-  .marquee
+.marquee
-    overflow: hidden
+  overflow: hidden
-    width: 100%
+  width: 100%
-    position: relative
+  padding: 3rem auto
-    margin: 2rem 0
+
-  
+.marquee-track
-  .marquee-track
+  display: flex
-    display: flex
+  animation: scroll 20s linear infinite
-    width: fit-content
+  width: max-content
-    animation: scroll linear infinite
+
-  
+.marquee-list
-  .marquee-list
+  display: flex
-    display: flex
+  gap: 3rem
-    gap: 3rem
+  list-style: none
-    list-style: none
+  padding: 1rem 0
-    padding: 1rem 0
+  margin: 0
-    margin: 0  
 
 .marquee-item
   flex-shrink: 0
@@ -212,9 +176,9 @@ const props = defineProps({
     filter: grayscale(0)
 
 @keyframes scroll
-  0%
+  from
     transform: translateX(0)
-  100%
+  to
     transform: translateX(-50%)
 
 .waveBox

components/SchemaCoder.vue

@@ -115,7 +115,7 @@
   </script>
   
   
-  <style lang="sass">
+  <style lang="sass" scoped>
   .schema-typer
     background-color: #1e1e1e
     padding: 1.5rem

components/TrackingScripts.vue

@@ -10,13 +10,6 @@ const isLocalhost = window.location.hostname === 'localhost'
 // Umami nur aktivieren, wenn NICHT localhost
 if (import.meta.client && !isLocalhost) {
   useHead({
-    link: [
-      {
-        rel: 'preconnect',
-        href: 'https://umami.digimedialoop.de',
-        crossorigin: ''
-      }
-    ],
     meta: [
       {
         name: 'google-site-verification',

components/template/NavBar.vue

@@ -7,6 +7,7 @@
       scrollPosition > 50 ? 'scrolled' : ''
     ]"
     aria-label="Hauptnavigation"
+    role="menu"
   >
     <!-- Burger Icon als Button -->
     <button
@@ -40,6 +41,7 @@
         @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">
@@ -57,27 +59,15 @@
               {{ isActiveSubNav(link.label) ? 'Untermenü schließen' : 'Untermenü öffnen' }}
             </span>
           </button>
-          <button 
+          <button v-else>
-            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
@@ -104,93 +94,75 @@
   </nav>
 </template>
 
-<script setup>
+  
-import { ref, computed } from 'vue'
+  
-import { useMainStore } from '@/stores/main'
+  <script setup>
-
+  import { ref, computed } from 'vue'
-const mainStore = useMainStore()
+  import { useMainStore } from '@/stores/main'
-
+  const mainStore = useMainStore()
-const screenWidth = computed(() => mainStore.screenWidth)
+  
-const scrollPosition = computed(() => mainStore.scrollPosition)
+  const screenWidth = computed(() => mainStore.screenWidth)
-
+  const scrollPosition = computed(() => mainStore.scrollPosition)
-const isSubNavOpen = ref(null)
+  
-const isMobileSubNavOpen = ref(null)
+  const isSubNavOpen = ref(null)
-
+  const isMobileSubNavOpen = ref(null)
-function toggleMobileSubNav(routeKey) {
+  
-  if (screenWidth.value < 1350) {
+  function toggleMobileSubNav(routeKey) {
-    isMobileSubNavOpen.value =
+    if (screenWidth.value < 1350) {
-      isMobileSubNavOpen.value === routeKey ? null : routeKey
+      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) {
-function hideSubNav(routeKey) {
-  if (screenWidth.value >= 1350 && 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 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>
 
+  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()
+    }
+  }
+  
+  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

composables/usePageContentRenderer.ts

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/stores/main'
-import { useHtmlConverter } from '@/composables/useHTMLConverter'
+import { useHtmlConverter } from '@/composables/useHtmlConverter'
 
 export function usePageContentRenderer() {
   const { locale } = useI18n()

layouts/default.vue

@@ -89,8 +89,7 @@ main
     color: darken($primaryColor, 20%)
   .supheadlinePink, supheadlineMint
     margin-bottom: -.5rem
-    font-size: clamp(1rem, 1rem + 1vw, 1.3rem)
+    font-size: calc(.5rem + 1vw)
-    line-height: 1.4
   .supheadlinePink
     color: darken($pink, 10%)    
   .supheadlineMint

nuxt.config.ts

@@ -11,45 +11,6 @@ export default defineNuxtConfig({
       },
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-        // Fonts preloaden
-        {
-          rel: 'preload',
-          href: '/assets/fonts/woff2/Montserrat-Light.woff2',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: 'anonymous',
-        },
-        {
-          rel: 'preload',
-          href: '/assets/fonts/woff2/Montserrat-Medium.woff2',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: 'anonymous',
-        },
-        {
-          rel: 'preload',
-          href: '/assets/fonts/woff2/Comfortaa-Light.woff2',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: 'anonymous',
-        },
-        {
-          rel: 'preload',
-          href: '/assets/fonts/woff2/Comfortaa-Bold.woff2',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: 'anonymous',
-        },
-        {
-          rel: 'preconnect',
-          href: 'https://analytics.digimedialoop.de',
-          crossorigin: 'anonymous'
-        },
-        {
-          rel: 'preconnect',
-          href: 'https://umami.digimedialoop.de',
-          crossorigin: 'anonymous'
-        }        
       ],
       charset: 'utf-16',
       viewport: 'width=device-width, initial-scale=1, maximum-scale=5',

pages/article/[link].vue

@@ -1,7 +1,7 @@
 <template>
   <div class="articlePage">
     
-    <div v-if="article" class="articleBorder">
+    <div v-if="article" class="article">
       <SideBarNaviSlider link="/magazin">
         {{ $t('pages.article.artikelUebersicht') }}
       </SideBarNaviSlider>
@@ -181,7 +181,7 @@
   </script>
   
   <style lang="sass">
-  .articleBorder
+  .article
     margin-top: -1rem
     .img_background
       position: absolute

pages/designer/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="landing topSpace">
         <section class="heroBox">
-            <div class="container-10">
+            <div class="container">
                 <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 v-if="false" class="speechBox d-flex align-items-start">
+                <div class="speechBox d-flex align-items-start">
                     <NuxtImg
                         class="profileImage"
                         src="/uploads/sabrinahennrich_0f07d46857.jpg"
@@ -255,10 +255,37 @@ onUnmounted(() => {
         position: relative
         overflow-x: hidden
         overflow-y: hidden
-        
+        /*&::after
-        .container-10
+            content: ''
-            margin-top: 0
+            position: absolute
-            margin-bottom: 1rem
+            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 */
         h2
             margin-bottom: 1rem
             font-size: 1.4rem
@@ -274,7 +301,7 @@ onUnmounted(() => {
         .speechBox
             display: flex
             align-items: center
-            width: 100%
+            max-width: 100%
             margin: 0 auto
             padding: 1rem 0
             gap: 4vw

pages/index.vue

@@ -17,39 +17,18 @@
       <span class="loopHeader" v-html="getHtmlBySection('home_loopHeader').value"></span>
       <div class="content">
         <div class="column">
-          <h4 @click="toggleSection('input')" :class="{ open: openSections.input }">
+        <span v-html="getHtmlBySection('home_loopInput').value"></span>
-            Input
+      </div>
-            <span>︾</span>
-          </h4>
-          <transition
-            @before-enter="beforeEnter"
-            @enter="enter"
-            @leave="leave"
-          >
-            <div v-show="openSections.input" class="sliding-box" v-html="getHtmlBySection('home_loopInput').value" />
-          </transition>
-        </div>
       <div class="column">
         <NuxtImg
           src="/uploads/Loop_83b4311dd0.webp"
           provider="strapi"
           class="loopImg"
-          alt="Zentrale Webseite die als zentraler Touchpoint input verarbeitet und in qualifizierte Leads umwandelt"
+          alt="Mensch"
         />
       </div>
       <div class="column">
-        <h4 @click="toggleSection('output')" :class="{ open: openSections.output }">
+        <span v-html="getHtmlBySection('home_loopOutput').value"></span>
-          Output
-          <span>︾</span>
-        </h4>
-        <transition
-          @before-enter="beforeEnter"
-          @enter="enter"
-          @leave="leave"
-        >
-          <div v-show="openSections.output" class="sliding-box" v-html="getHtmlBySection('home_loopOutput').value" />
-        </transition>
-
       </div>
       </div>
       
@@ -166,7 +145,7 @@
       :button-text="$t('buttons.contactUs')"
     />
 
-    <MarqueeBanner :items="logoItems" :logo-height="60" :speed="30" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
+    <MarqueeBanner :items="logoItems" :logo-height="60" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
     <FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
 
   </div>
@@ -191,145 +170,58 @@ const logoItems = computed(() => {
     }
   }))
 })
-
-const openSections = ref({
-  input: false,
-  output: false
-})
-
-const toggleSection = (key) => {
-  openSections.value[key] = !openSections.value[key]
-}
-function beforeEnter(el) {
-  el.style.height = '0'
-  el.style.opacity = '0'
-  el.style.overflow = 'hidden'
-}
-
-function enter(el) {
-  const height = el.scrollHeight
-  el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
-  requestAnimationFrame(() => {
-    el.style.height = height + 'px'
-    el.style.opacity = '1'
-  })
-
-  el.addEventListener('transitionend', () => {
-    el.style.height = 'auto'
-    el.style.overflow = 'visible'
-  }, { once: true })
-}
-
-function leave(el) {
-  el.style.height = el.scrollHeight + 'px'
-  el.style.opacity = '1'
-  el.style.overflow = 'hidden'
-  requestAnimationFrame(() => {
-    el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
-    el.style.height = '0'
-    el.style.opacity = '0'
-  })
-}
-
 </script>
 
 <style lang="sass">
-@keyframes bounce-fade
-  0%
-    transform: translateY(0)
-    opacity: 1
-  50%
-    transform: translateY(5px)
-    opacity: 0
-  51%
-    transform: translateY(-5px)
-    opacity: 0
-  100%
-    transform: translateY(0)
-    opacity: 1
-
-.slide-fade-enter-active, .slide-fade-leave-active
-  transition: all 0.3s ease
-  overflow: hidden
-
-.slide-fade-enter-from, .slide-fade-leave-to
-  max-height: 0
-  opacity: 0
-  transform: translateY(-10px)
-
-.slide-fade-enter-to, .slide-fade-leave-from
-  max-height: 500px
-  opacity: 1
-  transform: translateY(0)
-
 .homePage
 
   .dmlLoop
     width: 80%
     margin: 3rem 10%
-    .loopHeader
+    h2
-      text-align: center
+      font-size: clamp(1.8rem, .9rem + 2vw, 2.4rem)
-
+      margin-bottom: 0
-      h2
+      margin-top: -.5rem
-        font-size: clamp(1.8rem, .9rem + 2vw, 2rem)
+    h3
-        margin-bottom: 0
+      font-size: clamp(1.4rem, .7rem + 2vw, 2rem)
-        margin-top: -.5rem
+      margin: 0 0 1rem 0
-
+    h4
-      h3
+      font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
-        font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
+      margin: .5rem 0 1.5rem 0
-        margin: 0 0 1rem 0
+    p
-
+      margin-top: 1rem
-      h4
-        font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
-        margin: .5rem 0 1.5rem 0
-
-      p
-        margin-top: 1rem
-
     .content
       display: flex
-      flex-direction: row
+      flex-direction: column
       gap: 2rem
       margin: 3rem 0
-
       .column
         padding: 0
         border-radius: .5rem
         min-width: 280px
         width: calc((100% / 3) - 2rem)
-
+        // nur für 1 und 3 box
+        // child(1) border rights offen und child(3) border left offen
         &:nth-child(1), &:nth-child(3)
+          //border-top: 1px solid #effbf7
           border-bottom: 1px solid #effbf7
-
         &:nth-child(1)
           border-left: 1px solid #effbf7
-
           h4
             background-image: linear-gradient(to right, #effbf7, white)
-
         &:nth-child(3)
           border-right: 1px solid #effbf7
-
           h4
             background-image: linear-gradient(to right, white, #effbf7)
-
         &:nth-child(2)
           display: flex
           align-items: center
-          justify-content: center
+          justify-content: center        
-
-          img
-            margin: 22% auto
-
-        &.sliding-box
-          padding: .5rem 1rem
-          font-size: .9rem
-          transition: all 0.4s ease
-
         h4
           margin: 0
-          padding: .8rem 2rem .2rem 2rem
+          padding: .8rem 2rem 
           color: $darkgrey
+          
           border-top-left-radius: .5rem
           border-top-right-radius: .5rem
           font-family: 'Mainfont-Bold'
@@ -337,29 +229,12 @@ function leave(el) {
           text-transform: uppercase
           text-align: center
           letter-spacing: .05rem
-          cursor: pointer
-          margin-top: 8rem
-          transition: .5s ease-in-out
-
-          span
-            display: block
-            animation: bounce-fade 1.5s infinite ease-in-out
-            color: $darkgrey
-            transition: transform 0.3s ease
-
-          &.open
-            margin-top: 0
-            span
-              animation: none
-              transform: rotate(180deg)
 
         p
           padding: .5rem 1rem
           font-size: .9rem
-
         ul
           margin-left: 2vw
-
           li
             padding: .3rem 0
 
@@ -369,14 +244,10 @@ function leave(el) {
           object-fit: cover
           object-position: center center
 
-    @media screen and (max-width: $breakPointLG)
-      .content
-        flex-direction: column
-
-        .column
-          width: 90%
-          min-width: 90%
 
+      @media screen and (min-width: $breakPointLG)
+        flex-direction: row
+  
   .whatWeDo
     position: relative
     overflow-x: hidden
@@ -389,38 +260,188 @@ function leave(el) {
       position: absolute
       top: 0
       aspect-ratio: 1 / 1
-
+      
     .rightImg
       right: 0
       transform: translateX(50%)
-
+      
     .leftImg
       left: 0
       transform: translateX(-25%)
-
+    
     .content
       position: relative
       z-index: 1
       width: 65%
       margin: 3rem 15% 2rem 20%
-      text-align: center
+      text-align: center      
       padding: 2rem 5%
       border-radius: 1rem
-
+      @media(max-width: $breakPointMD)
-      @media(max-width: $breakPointLG)
         width: 90%
-        margin: 3rem 5%
+        margin: 3rem 5% 3rem 5%
-        background-color: rgba(255,255,255,.95)
+        background-color: rgba(255,255,255,.8)
 
       h2
-        font-size: clamp(1.5rem, .7rem + 2vw, 2rem)
+        font-size: clamp(1.5rem, .7rem + 2vw, 2rem)  
-        font-family: 'Comfortaa'
+        font-family: 'Comfortaa' 
-
       h3
         font-family: 'Mainfont-Bold'
         font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem)
-
       p
-        font-size: clamp(1.1rem, .5rem + 2vw, 1.2rem)
+        font-size: clamp(1rem, .5rem + 2vw, 1.2rem)
-</style>
 
+  
+      
+
+  .explainBox
+    position: relative
+    overflow: hidden
+    min-height: 400px
+    margin: 2vh 0 8vh 0
+    padding: 8vh 0
+
+    .background-image
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: auto
+      object-fit: cover
+      object-position: center center
+      z-index: 0
+      pointer-events: none
+      
+
+    .content
+      position: relative
+      z-index: 1
+      padding-left: 10%  
+      h2
+        font-size: clamp(1.2rem, .7rem + 2vw, 2rem)  
+        font-family: 'Comfortaa' 
+      h3
+        font-family: 'Mainfont-Bold'
+        font-size: 1.2rem  
+
+.firstTeaser
+  h2
+    font-size: 1.6rem
+    line-height: 2.4rem
+.subLine
+  color: adjust-color($darkgrey, $lightness: 20%)
+  font-size: 80%
+.pinkFont
+  color: darken($pink, 10%)
+.imgRight
+  float: right
+  max-width: 50%
+.homeImageTop
+  margin: 4.5rem 0 8vh 3rem !important
+
+.sectionSolutions
+  background-image: linear-gradient(to bottom right, $beige, white, $beige)
+  min-height: 200px
+  margin: 6rem 0
+  padding: 6rem 0 7rem 0
+  position: relative
+  overflow: hidden
+
+  h2
+    font-size: 1.8rem
+  .sectorsBox
+    display: flex
+    gap: 5%
+    justify-content: space-arround
+    flex-wrap: wrap
+
+    .sector
+      position: relative
+      flex: 1 1 30%
+      background: #f9f9f9
+      padding: 1rem
+      border-radius: 1rem
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)
+      transition: transform 0.3s ease
+      border-radius: 1rem
+      max-width: 450px
+      margin-bottom: 2rem
+
+      .bgImage
+        position: absolute
+        inset: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+        object-position: center
+        z-index: 0
+        border-radius: 1rem
+        
+      .contentBox
+        position: relative
+        z-index: 2  
+        background-image: linear-gradient(to top, rgba(white, .9), rgba(white, .7))
+        width: 100%
+        padding: 2rem
+        border-radius: 1rem
+        transform: rotate(-1deg)
+
+        .image-comparison-container  
+          text-align: center
+          width: 80%
+          max-width: 300px
+          margin: 0 auto 2rem auto
+
+        h3
+          font-size: 1.25rem
+          margin: 1rem 0 0.5rem
+          z-index: 3
+          hyphens: auto
+
+        p
+          font-size: 1rem
+          color: #333
+          margin-bottom: 1.5rem
+          min-height: 4.5rem
+          z-index: 3
+        
+        .btn
+          text-transform: none
+          hyphens: auto
+          font-size: 1.1rem
+          font-family: 'Mainfont-Bold'
+
+    @media screen and (max-width: $breakPointMD)
+      flex-direction: column
+      .sector
+        flex: 1 1 100%
+        max-width: 100%
+        padding: 1rem
+        .btn
+          font-size: 1.05rem
+
+
+
+.compBox
+  background-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp) 
+  background-size: cover
+  background-repeat: no-repeat
+  padding: 6rem 0 6rem 0
+  .content
+    background-color: rgba(255,255,255,.7)
+    padding: 2rem 5%
+    margin-top: 2rem
+    margin-bottom: 2rem
+    border-radius: 1rem
+    transform: rotate(-1deg)
+    .btnArea
+      a
+        margin-right: 1rem 
+        font-family: 'Mainfont-Bold'
+    h2
+      font-family: 'Comfortaa-Bold'
+    h3
+      line-height: 1.5
+    p
+      padding-right: 1rem
+</style>

pages/references/index.vue

@@ -120,7 +120,7 @@ watchEffect(() => {
 })
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 .referenceBox
   display: grid
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))

pages/sectors/film/index.vue

@@ -150,7 +150,7 @@ import { useMainStore } from '@/stores/main'
   
   </script>
   
-  <style lang="sass">
+  <style lang="sass" scoped>
   @keyframes moveSpotlight
     0%
         transform: translate(-30%, -30%) rotate(0deg)

pages/services/accessibility/index.vue

@@ -127,7 +127,6 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
 
 <style lang="sass">
 .accessiblityPage
-    hyphens: auto
     .articleBox
         margin-top: 5rem
         margin-bottom: 6rem
@@ -143,9 +142,7 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
             float: right
             width: 30%
             max-width: 350px
-            min-width: 130px
+            margin: 1rem 0 2rem 2rem
-            margin: 1rem 0 2rem 2vw
-
     .implementation
         margin: 8vh 0
         padding: 1vh 0 3vh 0

pages/services/cms/index.vue

@@ -124,7 +124,7 @@
         <MarqueeBanner 
             :items="projectItems" 
             :logo-height="200" 
-            title="<h2>Aus der Praxis: Unsere Projekte mit Headless Architektur</h2>" 
+            title="Aus der Praxis: Unsere Projekte mit Headless Architektur" 
             link="projekt" 
             aria-label="Headless CMS Projekte"
             speed="15"
@@ -267,7 +267,7 @@ const timeline = [
   
     .timeline
       position: relative
-      margin-left: 0
+      margin-left: 2rem
       padding-left: 0
       border-left: 10px solid $lightgrey      
   
@@ -282,13 +282,13 @@ const timeline = [
   
         .circle
           position: absolute
-          left: -11%
+          left: -5.2rem
-          top: -1rem
+          top: 0
           width: 10rem
           height: 7rem
           background: #37857C
           border-radius: $loopShape
-          border: 1px solid #F1F1F1
+          border: 2px solid white
           display: flex
           align-items: center
           justify-content: center
@@ -304,8 +304,8 @@ const timeline = [
   
             .period
               font-weight: bold
-              font-size: 1.3rem
+              font-size: 1rem
-              font-family: 'Comfortaa-Bold'          
+              font-family: monospace             
   
         .content-box
           background: white
@@ -321,7 +321,6 @@ 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'

pages/webagency/index.vue

@@ -3,7 +3,11 @@
     <section class="webagentur">
       <div class="container">
         <div class="contentBox topSpace">
-          <div v-html="getHtmlBySection('webagent_hero').value"></div>
+          <h1>{{ $t('pages.webagency.hero.title') }}</h1>
+          <h2>{{ $t('pages.webagency.hero.subtitle') }}</h2>
+          <p v-html="$t('pages.webagency.hero.text1')" />
+          <p v-html="$t('pages.webagency.hero.text2')" />
+          <p v-html="$t('pages.webagency.hero.text3')" />
           <button
             class="my-4 btn pinkBtn"
             role="button"
@@ -26,6 +30,7 @@
             :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>
 
@@ -119,9 +124,6 @@ const designerLink = i18nPages.designer?.[locale.value] || '/designer'
 
 const mainStore = useMainStore();
 const { companyinfo } = storeToRefs(mainStore);
-
-const { getHtmlBySection } = usePageContentRenderer()
-
 const toggleContactBubble = () => mainStore.toggleContactBubble();
 
 const profileImageUrl = computed(() => companyinfo.value?.profileImage?.data?.attributes?.url || null);
@@ -134,12 +136,6 @@ const navigateTo = useRouter().push;
   position: relative
   overflow-x: hidden
   overflow-y: hidden
-  h1
-    font-size: clamp(2rem, 1rem + 2vw, 2.5rem)
-    margin-bottom: .5rem
-  h2
-    font-size: clamp(1.5rem, 1rem + 1vw, 2rem)
-    margin-top: 0
   &::after
       content: ''
       position: absolute
@@ -216,8 +212,6 @@ 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
@@ -226,15 +220,12 @@ const navigateTo = useRouter().push;
           height: 70vw   
           max-height: 400px   
           clip-path: none
-          img
+          border-radius: $loopShape            
-            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
@@ -243,23 +234,20 @@ const navigateTo = useRouter().push;
           font-size: 2rem
           margin-bottom: .1rem
           margin-top: 1rem
-      p
-        font-size: 1.2rem
-
       .smallFont
-          font-size: 1.2rem
+          font-size: 1.1rem
           font-family: 'Mainfont-Bold'
       .smaller
-          font-size: 1rem
+          font-size: .9rem
       .quotation
           background-color: $lightgrey
           padding: 2.5rem 4rem 2rem 6rem
           border-radius: 1rem
-          font-size: 1.2rem
+          font-size: 1rem
           position: relative
           margin-top: 2rem
           p
-              font-size: 1.2rem
+              font-size: 1rem
           @media(max-width: $breakPointMD)
               padding: 5rem 2rem 2rem 2rem
               hyphens: auto