diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index a1085ab..738c7d7 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -70,7 +70,7 @@ section {
 .gif-background {
   background-image: url('/images/BackgroundAnimation.svg');
   background-size: cover;
-  background-position: center -220px;
+  background-position: center 50%;
   background-repeat: no-repeat;
   position: relative;
 
diff --git a/assets/scss/templates/_about.scss b/assets/scss/templates/_about.scss
index 67bf5cb..5c7cf48 100644
--- a/assets/scss/templates/_about.scss
+++ b/assets/scss/templates/_about.scss
@@ -1,21 +1,44 @@
 .about{
   .block{
-    h2 {
-      padding-top: 30px;
-      padding-bottom: 30px;
-      margin:0;
-    }
+    h1 {
+  font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+  color: #046e6e;
+}
 
-    h3 {
-      padding-top: 30px;
-      padding-bottom: 50px;
-      margin:0;
-    }
+h1.page-title {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  margin-top: 2rem;
+  text-transform: capitalize;
+}
 
-    p {
-      padding-top: 20px;
-      line-height:28px;
-    }
+
+h2 {
+  font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1.4;
+  margin-bottom: 1rem;
+  color: #222;
+}
+
+
+h3 {
+  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
+  font-weight: normal;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  color: inherit;
+}
+
+p {
+  font-style: normal;
+  font-size: clamp(1.3rem, 1.5vw, 1.4rem);
+  margin-bottom: 1.25rem;
+  line-height: 1.6;
+}
 
     img {
       width: 100%;
diff --git a/layouts/partials/page-title.html b/layouts/partials/page-title.html
index 93b5c4a..7eece97 100644
--- a/layouts/partials/page-title.html
+++ b/layouts/partials/page-title.html
@@ -1,21 +1,40 @@
-<section class="page-title gif-background" style="position: relative; padding: 64px 0 40px;">
-
-  <!-- Transparenter Overlay für bessere Lesbarkeit -->
-  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-              background: rgba(0, 0, 0, 0.4); z-index: 1;"></div>
-
-  <div class="container" style="position: relative; z-index: 2;">
+<section class="page-title gif-background">
+  <div class="container1">
     <div class="row">
       <div class="col-md-12 text-center">
-        <h1 style="color: white; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 0;">
-          {{ .Title }}
-        </h1>
+        <div class="servie-title fade-in">
+          <h1>{{ .Title }}</h1>
+        </div>
         {{ with .Params.description }}
-        <h2 style="color: white; font-weight: 400; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); margin-top: 0;">
-          {{ . | markdownify }}
-        </h2>
+        </div>
         {{ end }}
       </div>
     </div>
   </div>
 </section>
+
+<style>
+
+.fade-in {
+  animation: fadeInUp 1s ease-out
+}
+
+.container1 {
+  position: relative;
+  z-index: 2;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
index c42daa8..55fe7cb 100644
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@@ -1697,19 +1697,38 @@ h2, h3 {
   width: auto !important;
   padding: 20px; }
 
+.about .block h1 {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+  color: #046e6e; }
+
+.about .block h1.page-title {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  margin-top: 2rem;
+  text-transform: capitalize; }
+
 .about .block h2 {
-  padding-top: 30px;
-  padding-bottom: 30px;
-  margin: 0; }
+  font-size: clamp(1.25rem, 2vw, 1.5rem);
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1.4;
+  margin-bottom: 1rem;
+  color: #222; }
 
 .about .block h3 {
-  padding-top: 30px;
-  padding-bottom: 50px;
-  margin: 0; }
+  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
+  font-weight: normal;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  color: inherit; }
 
 .about .block p {
-  padding-top: 20px;
-  line-height: 28px; }
+  font-style: normal;
+  font-size: clamp(1.3rem, 1.5vw, 1.4rem);
+  margin-bottom: 1.25rem;
+  line-height: 1.6; }
 
 .about .block img {
   width: 100%; }
@@ -2563,7 +2582,7 @@ section {
 .gif-background {
   background-image: url("/images/BackgroundAnimation.svg");
   background-size: cover;
-  background-position: center -220px;
+  background-position: center 50%;
   background-repeat: no-repeat;
   position: relative; }
   .gif-background::after {