design fixing

components/HeroBox.vue

@@ -196,16 +196,16 @@ onUnmounted(() => {
     font-family: 'Comfortaa'
 
   h3
-    font-size: 1.2rem
+    font-size: clamp(1rem, .6rem + 2vw, 1.6rem)
     margin: .8rem 0 .8rem 0
   p
-    font-size: 1.1rem
+    font-size: clamp(1rem, .5rem + 2vw, 1.2rem)
     margin: .8rem 0 .8rem 0
   @media(max-width: $breakPointMD)
     h1, h2, h3, p
       line-height: 120%
   
   .btn
-    margin-bottom: 1rem
+    margin: 1rem auto
 
 </style>

components/ServicesTeaser.vue

@@ -1,7 +1,11 @@
 <template>
     <section class="services">
-      <h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
+      <div class="textBox">
-      <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>
+        <h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
+        <h3>Vier starke Säulen für Ihre Website</h3>
+      <p v-show="false"><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>
+      
       <div class="serviceBoxes">
             <div
               v-for="(service, index) in services"
@@ -64,6 +68,13 @@ const services = [
     width: 80%
     margin: 4rem auto // zentriert den Container
   
+    .textBox
+      text-align: center
+      h2
+        margin: 1rem auto 1rem auto
+      h3
+        font-size: 1.6rem
+        font-family: 'Comfortaa-Bold'
     .serviceBoxes
       margin-top: 2rem
       display: flex
@@ -122,11 +133,12 @@ const services = [
           color: black
           background-color: white
           padding: .5rem 1.25rem
+          margin: 1.5rem auto
           border-radius: 1rem            
           text-decoration: none
           font-family: 'Mainfont-Bold'
           font-size: 90%
           text-transform: uppercase
           &:hover
-            color: #ddd
+            transform: scale(1.05)
 </style>

pages/index.vue

@@ -23,10 +23,10 @@
       <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, 
+        <p>Wir entwickeln <b>performante, barrierefreie Webseiten</b> mit <b>klarer Struktur</b>, 
           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>
+          und sorgen mit <b>zukunftsfähiger Technologie</b> dafür, dass Ihre Webseite auf dem neuesten Stand ist.</p>
           
 
       </div>
@@ -40,36 +40,6 @@
     
     <ServicesTeaser />
     
-
-    <!-- <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
-        <NuxtImg
-        src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
-        provider="strapi"
-        format="webp"
-        sizes="100vw"
-        class="background-image"
-        alt="AI and human"
-        aria-hidden="true"
-      />
-      <div class="container-15 content">
-        <h2>{{ $t('pages.services.explain.headline1') }}</h2>
-        <h3>{{ $t('pages.services.explain.headline2') }}</h3>
-       
-        <p>{{ $t('pages.services.explain.paragraph') }}</p>
-        <ul class="check">
-          <li>{{ $t('pages.services.explain.bullet1') }}</li>
-          <li>{{ $t('pages.services.explain.bullet2') }}</li>
-          <li>{{ $t('pages.services.explain.bullet3') }}</li>
-          <li>{{ $t('pages.services.explain.bullet4') }}</li>
-          <li>{{ $t('pages.services.explain.bullet5') }}</li>
-        </ul>
-        <NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
-      </div>
-      
-    </section>   -->
-
-
-    
     <section class="sectionSolutions">
       <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"/>
@@ -90,9 +60,9 @@
                 before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png" 
                 after-image="/uploads/BSK_After_9de7feda0b.webp" 
               />  
-              <h3>Webseiten für Schulen und Bildungseinrichtungen</h3>
+              <h3 v-show="false">Webseiten für Schulen und Bildungseinrichtungen</h3>
               <p v-show="false">Wir gestalten barrierefreie, DSGVO-konforme Schulwebseiten mit modernem Content-Management-System und einfacher Pflege durch das Schulpersonal.</p>
-              <NuxtLinkLocale :to="'sectors-schools'" class="btn">Informationen zu Schulhompages</NuxtLinkLocale>
+              <NuxtLinkLocale :to="'sectors-schools'" class="btn">Webseiten für Schulen und Bildungseinrichtungen</NuxtLinkLocale>
             </div>                
           </div>
           <div class="sector">    
@@ -108,15 +78,15 @@
                 before-image="/uploads/herb_X_vorher_Image_5cef5738f9.webp" 
                 after-image="/uploads/herb_X_nachher_Image_e2d2a388ff.webp" 
               />      
-              <h3>Webauftritte für die Film- und Fernsehbranche</h3>
+              <h3 v-show="false">Webauftritte für die Film- und Fernsehbranche</h3>
               <p v-show="false">Maßgeschneiderte Weblösungen für Produktionen, Studios und Agenturen. Visuell stark, technisch top und bereit für Awards.</p>
-              <NuxtLinkLocale :to="'sectors-film'" class="btn">Informationen für die Filmbranche</NuxtLinkLocale>
+              <NuxtLinkLocale :to="'sectors-film'" class="btn">Webauftritte für die Film- und Fernsehbranche</NuxtLinkLocale>
             </div>            
           </div>
         </div>
 
       </div>
-      <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+      <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>
@@ -278,10 +248,13 @@ const logoItems = computed(() => {
 .sectionSolutions
   background-image: linear-gradient(to bottom right, $beige, white, $beige)
   min-height: 200px
-  padding: 5rem 0 7rem 0
+  margin: 6rem 0
+  padding: 6rem 0 7rem 0
   position: relative
   overflow: hidden
 
+  h2
+    font-size: 1.8rem
   .sectorsBox
     display: flex
     gap: 5%
@@ -292,12 +265,12 @@ const logoItems = computed(() => {
       position: relative
       flex: 1 1 30%
       background: #f9f9f9
-      padding: 2rem
+      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: 350px
+      max-width: 450px
       margin-bottom: 2rem
 
       .bgImage

pages/services/cms/index.vue

@@ -250,6 +250,8 @@ const timeline = [
 .cmsPage
   .whatIs
     margin: 4rem 0  
+    padding-bottom: 5vw
+    
     img
       float: right
       width: 100%