diff --git a/components/CallToActionBox.vue b/components/CallToActionBox.vue
index 054b41e..b69ebf2 100644
--- a/components/CallToActionBox.vue
+++ b/components/CallToActionBox.vue
@@ -27,7 +27,8 @@
   <style scoped lang="sass">
   .ctaBox
     margin: 5vh 10%
+    text-align: center
     h3
-      font-size: 1.6rem
+      font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
   </style>
   
\ No newline at end of file
diff --git a/components/HeroBox.vue b/components/HeroBox.vue
index fd22621..e3360f7 100644
--- a/components/HeroBox.vue
+++ b/components/HeroBox.vue
@@ -1,6 +1,11 @@
 // components/HeroBox.vue
 <template>
-  <section ref="heroBoxRef" class="heroBox" :class="{ 'dark': darkBackground, 'light': !darkBackground }" :aria-label="ariaLabel">
+  <section
+    ref="heroBoxRef"
+    class="heroBox"
+    :class="{ 'dark': darkBackground, 'light': !darkBackground }"
+    :aria-label="ariaLabel"
+  >
     <NuxtImg
       provider="strapi"
       :src="image"
@@ -13,7 +18,6 @@
       preload
       fetchpriority="high"
     />
-    <!-- Optionales Overlay-Bild -->
     <NuxtImg
       v-if="overlayImage"
       provider="strapi"
@@ -27,10 +31,8 @@
       }"
       aria-hidden="true"
     />
-    <div class="container-10 content">
-      <h1>{{ $t(content.headline1) }}</h1>
-      <h2>{{ $t(content.headline2) }}</h2>
-      <h3>{{ $t(content.headline3) }}</h3>
+    <div class="container-10 heroContent">
+      <slot />
     </div>
     <svg class="sectionWave wave-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
       <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
@@ -39,17 +41,13 @@
 </template>
 
 <script setup>
-// Parallax Overlay-Image
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useMainStore } from '@/stores/main'
 const mainStore = useMainStore()
+
 const props = defineProps({
   image: String,
   ariaLabel: String,
-  content: {
-    type: Object,
-    required: true
-  },
   overlayImage: {
     type: String,
     default: null
@@ -66,41 +64,39 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-
   overlayPosition: {
     type: Object,
     default: () => ({
-    bottom: '0px',
-    right: '0px'
-  })
+      bottom: '0px',
+      right: '0px'
+    })
   }
 })
+
 const parallaxY = ref(0)
 const heroBoxRef = ref(null)
 let targetY = 0
 let animationFrame
+
 const updateParallax = () => {
-  // Ease: Linear interpolation (lerp) zwischen aktuellem Wert und Zielwert
   parallaxY.value += (targetY - parallaxY.value) * 0.1
   animationFrame = requestAnimationFrame(updateParallax)
 }
 
 const onScroll = () => {
-    targetY = window.scrollY * 0.3 // oder was dir gefällt
-  }
+  targetY = window.scrollY * 0.3
+}
 
-  const updateHeight = () => {
-    if (heroBoxRef.value) {
-      mainStore.setHeroBoxHeight(heroBoxRef.value.offsetHeight)
-      mainStore.setDarkHeroBack(props.darkBackground)
-    }
+const updateHeight = () => {
+  if (heroBoxRef.value) {
+    mainStore.setHeroBoxHeight(heroBoxRef.value.offsetHeight)
+    mainStore.setDarkHeroBack(props.darkBackground)
   }
+}
+
 onMounted(() => {
-  
   window.addEventListener('scroll', onScroll, { passive: true })
   updateParallax()
-  // HeroBoxHeight for Logo
-  
   updateHeight()
   window.addEventListener('resize', updateHeight)
 })
@@ -110,10 +106,10 @@ onUnmounted(() => {
   cancelAnimationFrame(animationFrame)
   window.removeEventListener('resize', updateHeight)
 })
-
 </script>
 
-<style lang="sass" scoped>
+
+<style lang="sass">
 .heroBox
   position: relative
   min-height: 35rem
@@ -169,7 +165,7 @@ onUnmounted(() => {
     max-width: 350px
     object-fit: contain
 
-  .content, h1, h2, h3
+  .heroContent, h1, h2, h3
     position: relative
     z-index: 2
 
@@ -179,19 +175,20 @@ onUnmounted(() => {
     @media (max-width: 768px)
       max-width: 100%
 
-  &.dark h1, &.dark h2, &.dark h3
+  &.dark h1, &.dark h2, &.dark h3, &.dark p
     color: white
 
-  &.light h1, &.light h2, &.light h3
+  &.light h1, &.light h2, &.light h3, , &.light p
     color: black
 
   h1
     margin-top: 3rem
     font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
-    line-height: 140%
+    line-height: 135%
     margin-bottom: 0
     font-family: 'Comfortaa'
     hyphens: auto
+    
 
   h2
     font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
@@ -200,5 +197,15 @@ onUnmounted(() => {
 
   h3
     font-size: 1.2rem
+    margin: .8rem 0 .8rem 0
+  p
+    font-size: 1.1rem
+    margin: .8rem 0 .8rem 0
+  @media(max-width: $breakPointMD)
+    h1, h2, h3, p
+      line-height: 120%
+  
+  .btn
+    margin-bottom: 1rem
 
 </style>
\ No newline at end of file
diff --git a/components/ServicesTeaser.vue b/components/ServicesTeaser.vue
new file mode 100644
index 0000000..d235d98
--- /dev/null
+++ b/components/ServicesTeaser.vue
@@ -0,0 +1,135 @@
+<template>
+    <section class="services">
+      <h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
+      <p><b>Vier starke Säulen für Ihre Website:</b> Von barrierefrei über SEO bis hin zu Headless CMS und KI-Kompatibilität. Entdecken Sie, wie unsere spezialisierten Leistungen Ihre digitale Präsenz voranbringen. Einfach, effektiv und auf Ihre Bedürfnisse zugeschnitten.</p>
+      <div class="serviceBoxes">
+            <div
+              v-for="(service, index) in services"
+              :key="index"
+              class="service"
+            >
+              <NuxtImg
+                provider="strapi"
+                :src="service.backgroundImage"
+                alt=""
+                class="service-bg"
+                aria-hidden="true"
+                priority
+                loading="eager"
+                fetchpriority="high"
+              />
+              <div class="overlay"></div>
+              <div class="serviceContent">
+                <h3>{{ service.title }}</h3>
+                <p>{{ service.description }}</p>
+                <NuxtLinkLocale :to="service.link" class="link">{{ service.linktext }}</NuxtLinkLocale>
+              </div>
+            </div>
+          </div>
+    </section>
+</template>
+
+<script setup>
+const services = [
+  {
+    title: 'Barrierefreie Webseiten',
+    description: 'Webseiten, die für alle zugänglich sind. Barrierefrei, nutzerfreundlich und technisch modern gestaltet für optimale Bedienbarkeit und bessere Reichweite.',
+    link: 'services-accessibility',
+    linktext: 'Mehr erfahren',
+    backgroundImage: '/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp'
+  },
+  {
+    title: 'Suchmaschinen-Optimierung',
+    description: 'Mit technischer SEO sorgen wir für bessere Sichtbarkeit in Google & Co. Schnelle, strukturierte Webseiten, die Besucher anziehen und überzeugen.',
+    link: 'services-seo',
+    linktext: 'Mehr erfahren',
+    backgroundImage: '/uploads/DML_Service_Header_SEO_b11ae8940a.webp'
+  },
+  {
+    title: 'Headless CMS',
+    description: 'Flexibles Content-Management mit modernem Headless CMS. Schnelle Webseiten, einfache Pflege und volle Kontrolle über Inhalte und Design.',
+    link: 'services-cms',
+    linktext: 'Mehr erfahren',
+    backgroundImage: '/uploads/DML_Service_Header_CMS_a438599970.webp'
+  },
+  {
+    title: 'KI-Kompatibilität',
+    description: 'Webseiten, die mit Künstlicher Intelligenz zusammenarbeiten. Zukunftssicher, smart optimiert und bereit für automatisierte Prozesse und Personalisierung.',
+    link: 'services-ai',
+    linktext: 'Mehr erfahren',
+    backgroundImage: '/uploads/DML_Service_Header_AI_639dd0d7b1.webp'
+  },
+]
+</script>
+
+<style lang="sass">
+.services
+    width: 80%
+    margin: 4rem auto // zentriert den Container
+  
+    .serviceBoxes
+      margin-top: 2rem
+      display: flex
+      flex-wrap: wrap
+      justify-content: center
+      gap: 1rem
+  
+      .service
+        flex: 0 1 300px  // fixe Breite von 300px, wächst nicht, schrumpft aber bei Bedarf
+        height: 300px
+        position: relative
+        color: white
+        display: flex
+        flex-direction: column
+        justify-content: flex-end
+        overflow: hidden
+        border-radius: 8px
+        cursor: pointer
+        transition: transform 0.3s ease
+  
+        &:hover
+          transform: translateY(-5px)
+      
+    
+      .service-bg
+        position: absolute
+        inset: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+        object-position: center
+        z-index: 0
+    
+      .overlay
+        position: absolute
+        inset: 0
+        background: linear-gradient(to top right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 100%)
+        z-index: 1
+    
+      .serviceContent
+        position: relative
+        padding: 1.5rem
+        z-index: 2
+    
+        h3
+          margin: 0 0 0.5rem 0
+          font-size: 1.25rem
+          font-weight: 700
+    
+        p
+          margin: 0 0 1rem 0
+          font-size: 1rem
+          line-height: 1.3
+    
+        .link
+          color: black
+          background-color: white
+          padding: .5rem 1.25rem
+          border-radius: 1rem            
+          text-decoration: none
+          font-family: 'Mainfont-Bold'
+          font-size: 90%
+          text-transform: uppercase
+          &:hover
+            color: #ddd
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 63033b9..d7b77eb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -128,6 +128,7 @@ main
     text-decoration: none
     display: inline-block
     text-align: center
+    margin-right: 1rem
     &::before
       content: ''
       position: absolute
@@ -169,6 +170,7 @@ main
       background-color: white
       color: $darkgrey
       border: 1px solid transparent
+      font-family: 'Mainfont-Bold'
       &:hover
         background-image: linear-gradient(to top left, $pink, lighten($pink, 5%))
         color: white
diff --git a/pages/index.vue b/pages/index.vue
index 2895058..8201c13 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,15 +3,43 @@
     <HeroBox
       image="/uploads/bg_technologie_d24f950ccf.webp"
       :aria-label="$t('pages.services.hero.ariaLabel')"
-      :content="{
-        headline1: 'pages.services.hero.headline1',
-        headline2: 'pages.services.hero.headline2',
-        headline3: 'pages.services.hero.headline3'
-      }"
       :dark-background="true"
-    /> 
+    >
+      <h1>High-Performance-Webseiten</h1>
+      <h2>die Ihre Zielgruppe begeistern</h2>
+      <h3>Schnell, effizient und leistungsstark</h3>
+      <p>Wir nutzen modernste Technologien wie Nuxt 3 + Strapi in Headless-Architektur, um Webseiten zu entwickeln, die zukunftssicher, schnell und flexibel sind.</p>
+      <NuxtLinkLocale to="references" class="btn whiteBtn">Unsere Referenzen</NuxtLinkLocale>
+    </HeroBox>
 
-    <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
+    <section class="whatWeDo">
+
+      <NuxtImg
+        src="/uploads/laechelnde_Dame_a393baf878.webp"
+        provider="strapi"
+        class="rightImg"
+      />
+      <div class="content">
+        <h2>Webseiten für Mensch und Maschine</h2>
+        <h3>Design das Menschen begeistert mit Struktur die Maschinen verstehen</h3>
+        <p>Wir entwickeln performante, barrierefreie Webseiten mit klarer Struktur, 
+          die Nutzer überzeugen und von Suchmaschinen wie Google oder Bing, sowie KI-Systemen optimal verstanden werden.</p> 
+        <p>Dabei setzen wir auf moderne Standards, erfüllen rechtliche Anforderungen wie Barrierefreiheit und Datenschutz 
+          und sorgen mit zukunftsfähiger Technologie dafür, dass Ihre Webseite auf dem neuesten Stand ist.</p>
+          
+
+      </div>
+      <NuxtImg
+        src="/uploads/energy_1_e15df59b8a.webp"
+        provider="strapi"
+        class="leftImg"
+      />
+    </section>
+    
+    <ServicesTeaser />
+
+
+    <!-- <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
         <NuxtImg
         src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
         provider="strapi"
@@ -36,7 +64,7 @@
         <NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
       </div>
       
-    </section>  
+    </section>   -->
 
 
     
@@ -49,12 +77,13 @@
       <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
             <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg> 
-      <div class="container-10 pb-5">
+      <div class="container-10 pb-5 content">
+        <h2>Webseiten für Schulen und Bildungseinrichtungen</h2>
         <div class="row d-flex align-items-center">
           <div class="col-md-6">
-            <h2>{{ $t('pages.home.compBox.title') }}</h2>
-            <h3>{{ $t('pages.home.compBox.subtitle') }}</h3>
-            <p>{{ $t('pages.home.compBox.text') }}</p>
+            
+            <h3>Barrierefreiheit nach BITV 2.0 und WCAG 2.1 – gesetzeskonform und nutzerfreundlich</h3>
+            <p>Unsere Lösungen für Schulen sind klar strukturiert und barrierefrei – so finden Schüler, Eltern und Lehrer schnell und unkompliziert alle wichtigen Informationen. Ein moderner Internetauftritt, der den Alltag erleichtert und Ihre Kommunikation stärkt.</p>
           </div>
           <div class="col-md-6 mt-5 pt-4 pb-4">
             <ImageComparisonSlider 
@@ -63,23 +92,22 @@
             />
           </div>
         </div>
+        <p class="btnArea">
+          <NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Infos über Schul-Homepages</NuxtLinkLocale> 
+          <NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Projekt: Berchenschule Konstanz</NuxtLinkLocale>
+        </p>
       </div>
       <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
             <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
     </section>
 
+    <CallToActionBox
+      :headline="$t('pages.home.finalCall.title')"
+      
+      :button-text="$t('pages.home.finalCall.button')"
+    />
 
-    <section>
-      <div class="container-10 text-center py-5">
-        <h3>{{ $t('pages.home.finalCall.title') }}</h3>
-        <button
-class="pinkBtn mt-3" 
-                role="button"
-                :aria-label="$t('pages.home.finalCall.button')"
-                @click.prevent="toggleContactBubble">{{ $t('pages.home.finalCall.button') }}</button>
-      </div>
-    </section>
     <MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('pages.home.marqueeBanner.title')" :greyscale="true" />
     <FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
 
@@ -90,18 +118,13 @@ class="pinkBtn mt-3"
 <script setup>
 import { useMainStore } from '@/stores/main';
 import { storeToRefs } from 'pinia';
-import { useRouter } from 'vue-router';
-import { useRuntimeConfig, navigateTo } from '#app'
-import { useLocalePath } from '#i18n'
-
-const localePath = useLocalePath()
 
 const mainStore = useMainStore();
 const { customers } = storeToRefs(mainStore);
 const toggleContactBubble = () => mainStore.toggleContactBubble();
 
-const screenWidth = computed(() => mainStore.screenWidth);
-const waveHeight = computed(() => (screenWidth.value / 25).toFixed(0));
+
+
 
 const logoItems = computed(() => {
   return customers.value.map(customer => ({
@@ -117,6 +140,50 @@ const logoItems = computed(() => {
 
 <style lang="sass">
 .homePage
+  .whatWeDo
+    position: relative
+    overflow-x: hidden
+
+    .rightImg, .leftImg
+      height: 100%
+      max-height: 500px
+      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      
+      padding: 2rem 5%
+      border-radius: 1rem
+      @media(max-width: $breakPointMD)
+        width: 90%
+        margin: 3rem 5% 3rem 5%
+        background-color: rgba(255,255,255,.8)
+
+      h2
+        font-size: clamp(1.2rem, .7rem + 2vw, 2rem)  
+        font-family: 'Comfortaa' 
+      h3
+        font-family: 'Mainfont-Bold'
+        font-size: 1.3rem
+      p
+        font-size: 1.1rem  
+
+  
+      
+
   .explainBox
     position: relative
     overflow: hidden
@@ -162,14 +229,25 @@ const logoItems = computed(() => {
   margin: 4.5rem 0 8vh 3rem !important
 
 .compBox
-  background-image: url(https://strapi.digimedialoop.de/uploads/bubbles_DM_Lmint_trans_08ddb0a921.webp) //linear-gradient(to bottom left, white, #FEDEE8, white)
+  background-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp) 
   background-size: cover
   background-repeat: no-repeat
-  padding: 5rem 0 3rem 0
-  h2
-    font-family: 'Comfortaa'
-  h3
-    line-height: 1.5
-  p
-    padding-right: 1rem
+  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>
diff --git a/pages/project/[link].vue b/pages/project/[link].vue
index 5eef9ff..8f8c2b9 100644
--- a/pages/project/[link].vue
+++ b/pages/project/[link].vue
@@ -87,6 +87,11 @@
     </div>
     </div>
     </div>
+    <CallToActionBox
+      :headline="$t('pages.references.ctaBox.headline')"
+      :text="$t('pages.references.ctaBox.text')"
+      :button-text="$t('pages.references.ctaBox.button')"
+    />
   </section>
 
 
diff --git a/pages/sectors/schools/index.vue b/pages/sectors/schools/index.vue
index f2054fc..525ea27 100644
--- a/pages/sectors/schools/index.vue
+++ b/pages/sectors/schools/index.vue
@@ -3,16 +3,16 @@
         <HeroBox
             image="/uploads/watercolor_da8a37ce48.webp"
             :aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
-            :content="{
-                headline1: 'pages.sectors.schools.hero.headline1',
-                headline2: 'pages.sectors.schools.hero.headline2',
-                headline3: 'pages.sectors.schools.hero.headline3'
-            }"
             overlay-image="/uploads/schul_Stifte_613bf7f7d0.webp"
             overlay-alt-text="Schulmaterial"
             :overlay-width="'32%'"
             :overlay-position="{ top: '32%', right: '0' }"
-        /> 
+            >
+            <h1>{{ $t('pages.sectors.schools.hero.headline1') }}</h1>
+            <h2>{{ $t('pages.sectors.schools.hero.headline2') }}</h2>
+            <h3>{{ $t('pages.sectors.schools.hero.headline3') }}</h3>
+        </HeroBox>
+
 
         <section class="weKnow"> 
             <div class="container"> 
diff --git a/pages/services/accessibility/index.vue b/pages/services/accessibility/index.vue
index 4f9fb1d..d9c2115 100644
--- a/pages/services/accessibility/index.vue
+++ b/pages/services/accessibility/index.vue
@@ -3,13 +3,13 @@
         <HeroBox
             image="/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp"
             :aria-label="$t('pages.services.accessibility.hero.ariaLabel')"
-            :content="{
-                headline1: 'pages.services.accessibility.hero.headline1',
-                headline2: 'pages.services.accessibility.hero.headline2',
-                headline3: 'pages.services.accessibility.hero.headline3'
-            }"
             :dark-background="true"
-        /> 
+            >
+            <h1>{{ $t('pages.services.accessibility.hero.headline1') }}</h1>
+            <h2>{{ $t('pages.services.accessibility.hero.headline2') }}</h2>
+            <h3>{{ $t('pages.services.accessibility.hero.headline3') }}</h3>
+        </HeroBox>
+
         <section class="targetGroup">
             
             <div class="container-10">
diff --git a/pages/services/ai/index.vue b/pages/services/ai/index.vue
index 14a57b8..48ffeb0 100644
--- a/pages/services/ai/index.vue
+++ b/pages/services/ai/index.vue
@@ -3,17 +3,17 @@
     <HeroBox
       image="/uploads/DML_Service_Header_AI_639dd0d7b1.webp"
       :aria-label="$t('pages.services.ai.hero.ariaLabel')"
-      :content="{
-        headline1: 'pages.services.ai.hero.headline1',
-        headline2: 'pages.services.ai.hero.headline2',
-        headline3: 'pages.services.ai.hero.headline3'
-      }"
       overlay-image="/uploads/kirby_fly_3de66b2839.webp"
       overlay-alt-text="ki roboter fliegt"
       :overlay-width="'32%'"
       :overlay-position="{ top: '28%', right: '3vw' }"
       :dark-background="true"
-    /> 
+    >
+      <h1>{{ $t('pages.services.ai.hero.headline1') }}</h1>
+      <h2>{{ $t('pages.services.ai.hero.headline2') }}</h2>
+      <h3>{{ $t('pages.services.ai.hero.headline3') }}</h3>
+    </HeroBox>
+
     <section class="whyAI">
       <div class="container-10">
         <NuxtImg
diff --git a/pages/services/cms/index.vue b/pages/services/cms/index.vue
index c5dc6c4..1ff8aa6 100644
--- a/pages/services/cms/index.vue
+++ b/pages/services/cms/index.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="cmsPage">
-        <HeroBox
-            image="/uploads/DML_Service_Header_CMS_a438599970.webp"
-            :aria-label="$t('pages.services.cms.hero.ariaLabel')"
-            :content="{
-                headline1: 'pages.services.cms.hero.headline1',
-                headline2: 'pages.services.cms.hero.headline2',
-                headline3: 'pages.services.cms.hero.headline3'
-            }"
-            :dark-background="true"
-        /> 
+      <HeroBox
+        image="/uploads/DML_Service_Header_CMS_a438599970.webp"
+        :aria-label="$t('pages.services.cms.hero.ariaLabel')"
+        :dark-background="true"
+      >
+        <h1>{{ $t('pages.services.cms.hero.headline1') }}</h1>
+        <h2>{{ $t('pages.services.cms.hero.headline2') }}</h2>
+        <h3>{{ $t('pages.services.cms.hero.headline3') }}</h3>
+      </HeroBox>
+
         <section class="whatIs">
           <div class="container-10">
             <NuxtImg
diff --git a/pages/services/index.vue b/pages/services/index.vue
index 32e0780..d7e8700 100644
--- a/pages/services/index.vue
+++ b/pages/services/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="servicesPage">
-    <section class="heroBox_service" aria-labelledby="hero-heading">
+    <!-- <section class="heroBox_service" aria-labelledby="hero-heading">
       <NuxtImg
         provider="strapi"
         src="/uploads/large_DML_Home_Hero_4f27bc7f8e.webp"              
@@ -18,14 +18,25 @@
         <h2>{{ $t('pages.home.heroBox.h2') }}</h2>
         <h3>{{ $t('pages.home.heroBox.h3') }}</h3>
       </div>
-      <!-- Nach dem Container: Spiegelwelle unten -->
+      
       <svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
         <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
-    </section>
+    </section> -->
 
+    <HeroBox
+      image="/uploads/bubbles_DM_Lmint_trans_08ddb0a921.webp"
+      :aria-label="$t('pages.services.hero.ariaLabel')"
+      :dark-background="false"
+    >
+      <h1>Webseiten mit Substanz und Strategie</h1>
+      <h2>Unsere Leistungen verbinden technisches Know-how mit klarer Ausrichtung auf Nutzer, Sichtbarkeit und Zukunftssicherheit</h2>
+      <h3>Barrierefrei, suchmaschinen-optimiert, mit Headless-Technologie und KI-Kompatibilität – passgenau für Ihr digitales Business</h3>
+    </HeroBox>
 
-    <section aria-labelledby="solution-title">
+    <ServicesTeaser />
+
+    <!-- <section aria-labelledby="solution-title">
       <div class="container-10 webStrategy">      
         <h2 id="solution-title">{{ $t('pages.home.solution.title') }}</h2>
         <h3>{{ $t('pages.home.solution.teaser') }}</h3>
@@ -38,7 +49,7 @@
             {{ $t('pages.home.solution.buttonText') }}
         </button>      
       </div>
-    </section>
+    </section> -->
 
     <section class="targetGroup" aria-labelledby="invitation-title">
       <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
diff --git a/pages/services/seo/index.vue b/pages/services/seo/index.vue
index 50e2aa8..568a47d 100644
--- a/pages/services/seo/index.vue
+++ b/pages/services/seo/index.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="seoPage">
-        <HeroBox
-            image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
-            :aria-label="$t('pages.services.seo.hero.ariaLabel')"
-            :content="{
-                headline1: 'pages.services.seo.hero.headline1',
-                headline2: 'pages.services.seo.hero.headline2',
-                headline3: 'pages.services.seo.hero.headline3'
-            }"
-            :dark-background="true"
-        /> 
+      <HeroBox
+        image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
+        :aria-label="$t('pages.services.seo.hero.ariaLabel')"
+        :dark-background="true"
+      >
+        <h1>{{ $t('pages.services.seo.hero.headline1') }}</h1>
+        <h2>{{ $t('pages.services.seo.hero.headline2') }}</h2>
+        <h3>{{ $t('pages.services.seo.hero.headline3') }}</h3>
+      </HeroBox>
+
         <section class="whatIs">
           <div class="container-10">
             <h2>Was ist Suchmaschinen-Optimierung? - Ein Überblick</h2>