From b18d1e9169bf871e4ef19cedaf28093a8ac2240f Mon Sep 17 00:00:00 2001
From: astosic <alexander.stosic@amperion.at>
Date: Thu, 31 Jul 2025 01:33:44 +0200
Subject: [PATCH] Update: Abschluss 31.07.2025

---
 assets/scss/_common.scss                      |  61 +---
 assets/scss/_typography.scss                  |  40 ++-
 assets/scss/custom.scss                       |  79 ++++-
 assets/scss/style.scss                        |  67 ----
 layouts/index.html                            | 292 ++++++++----------
 layouts/partials/section-grid.html            |  32 ++
 ...s_d9077b5cab49df084fb1a39ad4b1e75d.content | 220 ++++++-------
 ...s_f0dbc780e1c51d7c7ecd78ee0b7f5792.content |   2 +-
 8 files changed, 350 insertions(+), 443 deletions(-)
 create mode 100644 layouts/partials/section-grid.html

diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss
index 9dbb3f9..a411b5d 100644
--- a/assets/scss/_common.scss
+++ b/assets/scss/_common.scss
@@ -154,12 +154,6 @@ input[type="tel"] {
 
 
 
-
-
-
-
-
-
 .mt-10 {
   margin-top: 20px;
 }
@@ -253,13 +247,11 @@ input[type="tel"] {
   padding: 20px 0 30px;
 
   h2 {
-    font-size: 18px;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 2px;
+    margin: 0;
   }
 }
 
+
 .section-title {
   margin-bottom: 20px;
 
@@ -268,20 +260,14 @@ input[type="tel"] {
   }
 
   h2 {
-    text-transform: uppercase;
-    font-weight: 400;
-    margin: 0px;
-    padding: 10px 0px;
-    font-size: 3em; /* Standard Schriftgröße für h2 */
-
-    @media (max-width: 768px) {
-      font-size: 1.5em; /* Kleinere Schriftgröße für mobile Geräte */
-    }
+    margin: 0;
+    padding: 10px 0;
+  }
+}
 
     @media (max-width: 480px) {
       font-size: 1.2em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
     }
-  }
 
   p {
     font-style: italic;
@@ -297,7 +283,6 @@ input[type="tel"] {
       font-size: 0.8em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
     }
   }
-}
 
 
 
@@ -324,18 +309,6 @@ input[type="tel"] {
   .block {
     text-align: center;
 
-    h1 {
-      color: $white;
-      font-weight: 200;
-      letter-spacing: 0.5em;
-      margin-top: 20;
-      margin-bottom: 10;
-      text-transform: capitalize;
-    }
-
-    p {
-      color: $white;
-    }
   }
 }
 
@@ -343,30 +316,9 @@ input[type="tel"] {
 .heading {
   padding-bottom: 60px;
   text-align: center;
-
-  h2 {
-    color: $black;
-    font-size: 30px;
-    line-height: 40px;
-    font-weight: 400;
-  }
-
-  p {
-    font-size: 18px;
-    line-height: 40px;
-    color: lighten( $black, 16.078);
-    font-weight: 300;
-  }
 }
 
 
-
-
-
-
-
-
-
 .page-wrapper {
   padding: 70px 0;
 
@@ -807,4 +759,3 @@ span.cloaked-e-mail:before {
 .why-title1 {
   margin: 0; /* Entfernt zusätzliche Ränder */
 }
-
diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss
index 864f2a3..991f90b 100644
--- a/assets/scss/_typography.scss
+++ b/assets/scss/_typography.scss
@@ -11,35 +11,61 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.hero-subtitle {
+  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  text-align: center;
+  color: $text-dark;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  line-height: 1.4;
+  margin-top: 1rem;
+}
+
+
 // ---------------------------
 // Überschriften-Stile
 // ---------------------------
 
 h1 {
-  font-size: 3rem; // Größere Hauptüberschrift
+  font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 1rem;
   color: #046e6e;
 }
 
+h1.page-title {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  margin-top: 2rem;
+  text-transform: capitalize;
+}
+
+
 h2 {
-  font-size: 2rem; // Deutlich kleiner als H1
+  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; // Normale Textfarbe
+  color: #222;
 }
 
+
 h3 {
-  font-size: 1.5rem;
+  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
   font-weight: normal;
   line-height: 1.6;
   margin-bottom: 1rem;
-  color: inherit; // wie Fließtext
+  color: inherit;
 }
 
+p {
+  font-size: clamp(1rem, 1.5vw, 1.125rem);
+  margin-bottom: 1.25rem;
+  line-height: 1.6;
+}
+
+
 // ---------------------------
 // Textausrichtung
 // ---------------------------
@@ -57,10 +83,6 @@ strong, b {
   font-weight: 700;
 }
 
-em, i {
-  font-style: italic;
-}
-
 p {
   margin-bottom: 1.25rem;
 }
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 6dc7a93..26a4f59 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -22,6 +22,13 @@ section {
   padding-bottom: 4px;
 }
 
+.section-spacing {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  margin-top: 5rem;
+}
+
+
 /* ========== Beschreibung ========== */
 .description {
   font-size: 22px;
@@ -76,6 +83,7 @@ section {
 }
 
 /* ========== Service-Layout (Kacheln / Pfeile) ========== */
+
 .service-arrow .block {
   display: flex;
   align-items: center;
@@ -118,18 +126,16 @@ section {
 /* Service-Gitter */
 .service-grid {
   display: grid;
-  gap: 30px;
-  grid-template-columns: repeat(3, 1fr);
-
-  @media (max-width: 992px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (max-width: 576px) {
-    grid-template-columns: 1fr;
-  }
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  justify-content: center;
+  align-items: stretch;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 1rem;
 }
 
+
 .service-item-fixed {
   width: 100%;
   border-radius: 10px;
@@ -179,6 +185,57 @@ section {
   z-index: 2;
 }
 
+/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
+
+.spacer-lg {
+  height: 0px;
+}
+
+.service-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+
+  img {
+    width: 100%;
+    display: block;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .overlay-text {
+  font-size: clamp(2rem, 2vw, 3rem);
+}
+
+}
+
+.info-card {
+  text-align: center;
+  padding: 1rem;
+
+  i {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  h3 {
+    font-weight: 600;
+    margin-top: 0.5rem;
+    margin-bottom: 0.25rem;
+    font-size: 1.2rem;
+    color: #046e6e;
+  }
+
+  p {
+    font-size: 1rem;
+    color: #333;
+  }
+}
+
 /* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
 .why-grid {
   display: grid;
@@ -355,4 +412,4 @@ section {
   @media (min-width: 992px) {
     font-size: 1.35rem;
   }
-}
+}
\ No newline at end of file
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 2f57863..acb5ec9 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -94,13 +94,6 @@ $h4: 25px;
 @import 'custom.scss';
 
 
-
-
-html {
-    scroll-behavior: smooth;
-  }
-
-
 /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
 .logo-container {
   width: 80%;
@@ -201,63 +194,3 @@ body {
     margin: 0;
     padding: 20px;
 }
-
-.services-title {
-    margin-top: 50px;
-    color: #046e6e;
-}
-
-.services-description {
-    color: black;
-    margin-bottom: 50px;
-}
-
-/* Standard-Desktop-Layout */
-.services-section {
-    background-color: #f1f1f1; /* Hintergrundfarbe der Sektion auf Schwarz setzen */
-    padding: 40px 0; /* Padding für die Sektion */
-    width: 100%; /* Volle Breite */
-    box-sizing: border-box; /* Padding in der Breite berücksichtigen */
-}
-
-.services-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr); /* Drei Spalten für Desktop */
-    gap: 20px;
-    max-width: 1200px;
-    margin: 0 auto; /* Zentriert das Raster */
-    padding: 0 20px; /* Optional: Padding für kleinere Bildschirme */
-}
-
-.service-card {
-    background-color: #f1f1f1; /* Hintergrundfarbe der Boxen auf Schwarz setzen */
-    color: white; /* Textfarbe auf Weiß setzen für bessere Lesbarkeit */
-    
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-.service-icon {
-    width: 60px;
-    height: 60px;
-    margin-bottom: 15px;
-}
-
-.service-card-title {
-    color: black; /* Titel-Textfarbe auf Weiß setzen */
-    margin-bottom: 10px;
-}
-
-.service-card-description {
-    color: black; /* Hellgraue Farbe für den Beschreibungstext */
-    font-size: 14px;
-}
-
-/* Anpassungen für Mobilgeräte */
-@media (max-width: 768px) {
-    .services-grid {
-        grid-template-columns: 1fr; /* Eine Spalte für Mobilgeräte */
-    }
-}
diff --git a/layouts/index.html b/layouts/index.html
index e3b3833..1503aa4 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,8 +4,8 @@
   {{ with .Params.banner }}
   {{ if .enable }}
   <!-- HERO / SLIDER -->
-  <section class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
-    style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
+  <section id="hero" class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
+    style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
     <div class="my-container" style="position: relative; z-index: 2;">
 
       <!-- *Logo-Zeile mit zwei Frames* -->
@@ -44,216 +44,166 @@
 
 <!-- Scroll/Hide Header -->
 <script>
-  document.addEventListener('DOMContentLoaded', function () {
-    var scrolldown = document.querySelector('.scrolldown');
-    scrolldown?.addEventListener('click', function () {
-      const serviceSection = document.getElementById('service');
-      const offset = 100;
-      const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
-      window.scrollTo({ top: targetPosition, behavior: 'smooth' });
-    });
+document.addEventListener('DOMContentLoaded', function () {
+  const hero = document.getElementById('hero');
+  const targetSection = document.getElementById('leistungen');
+  const scrolldown = document.querySelector('.scrolldown');
+  const header = document.getElementById('mainHeader');
+  let lastScroll = window.scrollY;
+  let isScrolling = false;
+  let scrollTriggered = false;
+  const offset = 120;
 
-    window.addEventListener("scroll", function () {
-      if (window.scrollY > 100) {
-        scrolldown?.classList.add('hide');
-      } else {
-        scrolldown?.classList.remove('hide');
-      }
-    });
+  function scrollToTarget() {
+    if (!targetSection) return;
+    const y = targetSection.getBoundingClientRect().top + window.pageYOffset - offset;
+    window.scrollTo({ top: y, behavior: 'smooth' });
+  }
 
-    var header = document.getElementById('mainHeader');
-    var lastScrollPosition = window.scrollY;
-
-    window.addEventListener('scroll', function () {
-      var currentScrollPosition = window.scrollY;
-      header.style.top = (currentScrollPosition > lastScrollPosition) ? '-100vh' : '0';
-      if (currentScrollPosition === 0) header.style.top = '0';
-      lastScrollPosition = currentScrollPosition;
-    });
+  // Klick auf Chevron → scrollen
+  scrolldown?.addEventListener('click', () => {
+    scrollTriggered = true;
+    scrollToTarget();
   });
+
+  // Scrollrad nach unten → am Ende von Hero → scrollen
+  window.addEventListener('wheel', function (e) {
+    if (isScrolling || e.deltaY <= 0 || scrollTriggered || !hero || !targetSection) return;
+
+    const heroBottom = hero.getBoundingClientRect().bottom;
+    const threshold = 50;
+    if (heroBottom <= window.innerHeight + threshold) {
+      isScrolling = true;
+      scrollTriggered = true;
+      scrollToTarget();
+      setTimeout(() => isScrolling = false, 1000);
+    }
+  }, { passive: true });
+
+  // Scroll-Verhalten (Chevron + Header + Reset)
+  window.addEventListener('scroll', function () {
+    // Chevron ausblenden
+    if (window.scrollY > 100) {
+      scrolldown?.classList.add('hide');
+    } else {
+      scrolldown?.classList.remove('hide');
+    }
+
+    // Header verstecken beim Runterscrollen
+    const currentScroll = window.scrollY;
+    header.style.top = (currentScroll > lastScroll) ? '-100vh' : '0';
+    if (currentScroll === 0) header.style.top = '0';
+    lastScroll = currentScroll;
+
+    // ✅ Reset der Scroll-Aktion, wenn man wieder im Hero ist
+    const heroTop = hero.getBoundingClientRect().top;
+    if (heroTop >= 0) {
+      scrollTriggered = false;
+    }
+  });
+});
 </script>
 
-<div style="height: 200px;"></div>
-
-<!-- WHY AMPERION (Kompakte Version) -->
-{{ with site.GetPage "/whyamperion" }}
-{{ with .Params.service }}
-<section class="whyamperion section">
-  <div class="container my-container">
-    <div class="row">
-      <div class="section-title text-center">
-        {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
-        {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
-      </div>
-    </div>
-    <div class="row">
-      {{ range .service_item }}
-      <div class="col-sm-6 col-md-3">
-        <div class="service-item text-center">
-          <i class="{{ .icon }}" aria-hidden="true" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
-          <h3>{{ .name | markdownify }}</h3>
-          <p>{{ .content | markdownify }}</p>
-        </div>
-      </div>
-      {{ end }}
-    </div>
-  </div>
+  <!-- Leistungen -->
+<section id="leistungen" class="section">
+  {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom") }}
 </section>
-{{ end }}
-{{ end }}
 
-<!-- SERVICES -->
-{{ with site.GetPage "/service" }}
-{{ with .Params.service }}
-<section id="service" class="service">
-  <div class="container-fluid my-container">
-    <div class="services-title">
-      {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
-    </div>
-    <div class="services-description">
-      {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
-    </div>
-    <div class="service-grid">
-      {{ range first 3 .service_item }}
-      <div class="service-item-fixed">
-        <div class="zoom-wrap">
-          <a href="{{ .link | relURL }}">
-            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
-            <div class="overlay-text">{{ .name }}</div>
-            <div class="overlay"></div>
-          </a>
-        </div>
-      </div>
-      {{ end }}
-    </div>
-  </div>
+<!-- Fokusthemen -->
+<section id="fokusthemen" class="section">
+  {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom") }}
 </section>
-{{ end }}
-{{ end }}
 
-<!-- FOCUSTOPICS -->
-{{ with site.GetPage "/focustopic" }}
-{{ with .Params.service }}
-<section id="focustopic" class="service">
-  <div class="container-fluid my-container">
-    <div class="services-title">
-      {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
-    </div>
-    <div class="services-description">
-      {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
-    </div>
-    <div class="service-grid">
-      {{ range first 3 .service_item }}
-      <div class="service-item-fixed">
-        <div class="zoom-wrap">
-          <a href="{{ .link | relURL }}">
-            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
-            <div class="overlay-text">{{ .name }}</div>
-            <div class="overlay"></div>
-          </a>
-        </div>
-      </div>
-      {{ end }}
-    </div>
-  </div>
-</section>
-{{ end }}
-{{ end }}
 
-<!-- WHY AMPERION – kompakt & detailliert (Hardcoded Version) -->
-<section class="whyamperion section" style="background-color:#f3f3f3">
+<!-- DARUM AMPERION – kompakt & detailliert -->
+<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 5rem; padding: 3rem 0;">
   <div class="container my-container">
 
-    <!-- Titelblock – eigener Wrapper statt .section-title -->
+    <!-- Titelblock -->
     <div class="row">
-      <div class="why-title text-center">
+      <div class="text-center">
         <h1>Darum AMPERION</h1>
-        <h2 class="why-sub"><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
+        <h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
       </div>
     </div>
 
     <!-- Karten -->
-<div class="why-grid mt-5">
-  <article class="service-card text-center">
-    <img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
-    <h2 class="service-card-title">Technische Planungskompetenz</h2>
-    <p class="service-card-description">
-      <strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher.
-    </p>
-  </article>
+    <div class="why-grid mt-5">
+      <article class="service-card text-center">
+        <img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
+        <h3 class="service-card-title">Technische Planungskompetenz</h3>
+        <p class="service-card-description">
+          <strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher.
+        </p>
+      </article>
 
-  <article class="service-card text-center">
-    <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
-    <h2 class="service-card-title">Intelligente Energiesysteme</h2>
-    <p class="service-card-description">
-      <strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
-    </p>
-  </article>
+      <article class="service-card text-center">
+        <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
+        <h3 class="service-card-title">Intelligente Energiesysteme</h3>
+        <p class="service-card-description">
+          <strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
+        </p>
+      </article>
 
-  <article class="service-card text-center">
-    <img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
-    <h2 class="service-card-title">Persönliche Betreuung</h2>
-    <p class="service-card-description">
-      <strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
-    </p>
-  </article>
+      <article class="service-card text-center">
+        <img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
+        <h3 class="service-card-title">Persönliche Betreuung</h3>
+        <p class="service-card-description">
+          <strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
+        </p>
+      </article>
 
-  <article class="service-card text-center">
-    <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
-    <h2 class="service-card-title">Reibungslose Projektabwicklung</h2>
-    <p class="service-card-description">
-      <strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
-    </p>
-  </article>
+      <article class="service-card text-center">
+        <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
+        <h3 class="service-card-title">Reibungslose Projektabwicklung</h3>
+        <p class="service-card-description">
+          <strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
+        </p>
+      </article>
 
-  <article class="service-card text-center">
-    <img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
-    <h2 class="service-card-title">Vernetzte Energiezukunft</h2>
-    <p class="service-card-description">
-      <strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
-    </p>
-  </article>
+      <article class="service-card text-center">
+        <img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
+        <h3 class="service-card-title">Vernetzte Energiezukunft</h3>
+        <p class="service-card-description">
+          <strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
+        </p>
+      </article>
 
-  <article class="service-card text-center">
-    <img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
-    <h2 class="service-card-title">Präzise Systemplanung</h2>
-    <p class="service-card-description">
-      <strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
-    </p>
-  </article>
-</div>
+      <article class="service-card text-center">
+        <img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
+        <h3 class="service-card-title">Präzise Systemplanung</h3>
+        <p class="service-card-description">
+          <strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
+        </p>
+      </article>
+    </div>
 
   </div>
 </section>
 
-
-<!-- ABOUT (unverändert) -->
+<!-- ÜBER AMPERION -->
 {{ with .Params.about }}
 {{ if .enable }}
-<section id="about" class="about section">
+<section id="about" class="about section" style="margin-top: 5rem; padding: 3rem 0;">
   <div class="my-container">
     <div class="row">
       <div class="col-12 text-center">
-        <div class="services-title">
-          {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
-        </div>
-        <div class="services-description">
-          {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
-        </div>
+        <h1>Über AMPERION</h1>
+        {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
       </div>
     </div>
-    <div class="row">
+    <div class="row mt-4">
       <div class="col-md-9 col-sm-12">
         <div class="text-left">
           {{ with .content }}{{ . | markdownify }}{{ end }}
         </div>
-        <div class="hover-link">
+        <div class="hover-link mt-3">
           {{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
         </div>
       </div>
       <div class="col-md-3 col-sm-12">
-        <div class="block">
-          <img src="{{ .image | relURL }}" class="custom-image" alt="Img">
+        <div class="block text-center">
+          <img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild">
         </div>
       </div>
     </div>
@@ -262,6 +212,7 @@
 {{ end }}
 {{ end }}
 
+
 <!-- CALL TO ACTION -->
 {{ if .Params.cta.enable }}
 {{ partial "cta.html" . }}
@@ -285,5 +236,4 @@
 </section>
 {{ end }}
 {{ end }}
-
 {{ end }}
diff --git a/layouts/partials/section-grid.html b/layouts/partials/section-grid.html
new file mode 100644
index 0000000..8450768
--- /dev/null
+++ b/layouts/partials/section-grid.html
@@ -0,0 +1,32 @@
+{{ with site.GetPage .page }}
+  {{ with .Params.service }}
+    <section class="section">
+      <div class="my-container">
+        <div class="section-title text-center">
+          <h1>{{ .title | markdownify }}</h1>
+          <h2>{{ .description | markdownify }}</h2>
+        </div>
+
+        <div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}">
+          {{ range .service_item }}
+            {{ if eq $.type "zoom" }}
+              <div class="service-item zoom-wrap">
+                <a href="{{ .link | relURL }}">
+                  <img src="{{ .picture | relURL }}" alt="{{ .name }}">
+                  <div class="overlay"></div>
+                  <div class="overlay-text responsive-text">{{ .name }}</div>
+                </a>
+              </div>
+            {{ else }}
+              <div class="info-card">
+                <i class="{{ .icon }}" aria-hidden="true"></i>
+                <h3>{{ .name | markdownify }}</h3>
+                <p>{{ .content | markdownify }}</p>
+              </div>
+            {{ end }}
+          {{ end }}
+        </div>
+      </div>
+    </section>
+  {{ end }}
+{{ end }}
diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
index dd0299c..b633391 100644
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@@ -8,15 +8,29 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
 
+.hero-subtitle {
+  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  text-align: center;
+  color: #004753;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  line-height: 1.4;
+  margin-top: 1rem; }
+
 h1 {
-  font-size: 3rem;
+  font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 1rem;
   color: #046e6e; }
 
+h1.page-title {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  margin-top: 2rem;
+  text-transform: capitalize; }
+
 h2 {
-  font-size: 2rem;
+  font-size: clamp(1.25rem, 2vw, 1.5rem);
   font-style: italic;
   font-weight: 400;
   line-height: 1.4;
@@ -24,12 +38,17 @@ h2 {
   color: #222; }
 
 h3 {
-  font-size: 1.5rem;
+  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
   font-weight: normal;
   line-height: 1.6;
   margin-bottom: 1rem;
   color: inherit; }
 
+p {
+  font-size: clamp(1rem, 1.5vw, 1.125rem);
+  margin-bottom: 1.25rem;
+  line-height: 1.6; }
+
 .text-left {
   text-align: left; }
 
@@ -45,9 +64,6 @@ h3 {
 strong, b {
   font-weight: 700; }
 
-em, i {
-  font-style: italic; }
-
 p {
   margin-bottom: 1.25rem; }
 
@@ -251,10 +267,7 @@ input[type="tel"] {
 .title {
   padding: 20px 0 30px; }
   .title h2 {
-    font-size: 18px;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 2px; }
+    margin: 0; }
 
 .section-title {
   margin-bottom: 20px; }
@@ -262,34 +275,27 @@ input[type="tel"] {
     .section-title {
       margin-bottom: 10px; } }
   .section-title h2 {
-    text-transform: uppercase;
-    font-weight: 400;
-    margin: 0px;
-    padding: 10px 0px;
-    font-size: 3em;
-    /* Standard Schriftgröße für h2 */ }
-    @media (max-width: 768px) {
-      .section-title h2 {
-        font-size: 1.5em;
-        /* Kleinere Schriftgröße für mobile Geräte */ } }
-    @media (max-width: 480px) {
-      .section-title h2 {
-        font-size: 1.2em;
-        /* Noch kleinere Schriftgröße für sehr kleine Geräte */ } }
-  .section-title p {
-    font-style: italic;
-    color: #626262;
-    font-family: "Open Sans Semibold", serif;
-    font-size: 1em;
-    /* Standard Schriftgröße für p */ }
-    @media (max-width: 768px) {
-      .section-title p {
-        font-size: 0.9em;
-        /* Kleinere Schriftgröße für mobile Geräte */ } }
-    @media (max-width: 480px) {
-      .section-title p {
-        font-size: 0.8em;
-        /* Noch kleinere Schriftgröße für sehr kleine Geräte */ } }
+    margin: 0;
+    padding: 10px 0; }
+
+@media (max-width: 480px) {
+  font-size: 1.2em;
+  /* Noch kleinere Schriftgröße für sehr kleine Geräte */ }
+
+p {
+  font-style: italic;
+  color: #626262;
+  font-family: "Open Sans Semibold", serif;
+  font-size: 1em;
+  /* Standard Schriftgröße für p */ }
+  @media (max-width: 768px) {
+    p {
+      font-size: 0.9em;
+      /* Kleinere Schriftgröße für mobile Geräte */ } }
+  @media (max-width: 480px) {
+    p {
+      font-size: 0.8em;
+      /* Noch kleinere Schriftgröße für sehr kleine Geräte */ } }
 .section-subtitle {
   font-size: 28px;
   font-weight: 600;
@@ -306,29 +312,10 @@ input[type="tel"] {
   padding: 85px 0; }
   .page-title .block {
     text-align: center; }
-    .page-title .block h1 {
-      color: #ffffff;
-      font-weight: 200;
-      letter-spacing: 0.5em;
-      margin-top: 20;
-      margin-bottom: 10;
-      text-transform: capitalize; }
-    .page-title .block p {
-      color: #ffffff; }
 
 .heading {
   padding-bottom: 60px;
   text-align: center; }
-  .heading h2 {
-    color: #000000;
-    font-size: 30px;
-    line-height: 40px;
-    font-weight: 400; }
-  .heading p {
-    font-size: 18px;
-    line-height: 40px;
-    color: #292929;
-    font-weight: 300; }
 
 .page-wrapper {
   padding: 70px 0; }
@@ -2553,6 +2540,11 @@ section {
   padding-top: 90px;
   padding-bottom: 4px; }
 
+.section-spacing {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  margin-top: 5rem; }
+
 /* ========== Beschreibung ========== */
 .description {
   font-size: 22px;
@@ -2636,14 +2628,14 @@ section {
 /* Service-Gitter */
 .service-grid {
   display: grid;
-  gap: 30px;
-  grid-template-columns: repeat(3, 1fr); }
-  @media (max-width: 992px) {
-    .service-grid {
-      grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 576px) {
-    .service-grid {
-      grid-template-columns: 1fr; } }
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  justify-content: center;
+  align-items: stretch;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 1rem; }
+
 .service-item-fixed {
   width: 100%;
   border-radius: 10px;
@@ -2686,6 +2678,40 @@ section {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
   z-index: 2; }
 
+/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
+.spacer-lg {
+  height: 0px; }
+
+.service-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px; }
+  .service-item img {
+    width: 100%;
+    display: block; }
+  .service-item .overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3); }
+  .service-item .overlay-text {
+    font-size: clamp(2rem, 2vw, 3rem); }
+
+.info-card {
+  text-align: center;
+  padding: 1rem; }
+  .info-card i {
+    font-size: 2rem;
+    margin-bottom: 0.5rem; }
+  .info-card h3 {
+    font-weight: 600;
+    margin-top: 0.5rem;
+    margin-bottom: 0.25rem;
+    font-size: 1.2rem;
+    color: #046e6e; }
+  .info-card p {
+    font-size: 1rem;
+    color: #333; }
+
 /* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
 .why-grid {
   display: grid;
@@ -2829,9 +2855,6 @@ section {
   @media (min-width: 992px) {
     #about-intro .intro-text {
       font-size: 1.35rem; } }
-html {
-  scroll-behavior: smooth; }
-
 /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
 .logo-container {
   width: 80%;
@@ -2920,64 +2943,3 @@ body {
   background-color: #ffffff;
   margin: 0;
   padding: 20px; }
-
-.services-title {
-  margin-top: 50px;
-  color: #046e6e; }
-
-.services-description {
-  color: black;
-  margin-bottom: 50px; }
-
-/* Standard-Desktop-Layout */
-.services-section {
-  background-color: #f1f1f1;
-  /* Hintergrundfarbe der Sektion auf Schwarz setzen */
-  padding: 40px 0;
-  /* Padding für die Sektion */
-  width: 100%;
-  /* Volle Breite */
-  box-sizing: border-box;
-  /* Padding in der Breite berücksichtigen */ }
-
-.services-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  /* Drei Spalten für Desktop */
-  gap: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-  /* Zentriert das Raster */
-  padding: 0 20px;
-  /* Optional: Padding für kleinere Bildschirme */ }
-
-.service-card {
-  background-color: #f1f1f1;
-  /* Hintergrundfarbe der Boxen auf Schwarz setzen */
-  color: white;
-  /* Textfarbe auf Weiß setzen für bessere Lesbarkeit */
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
-  padding: 20px;
-  box-sizing: border-box; }
-
-.service-icon {
-  width: 60px;
-  height: 60px;
-  margin-bottom: 15px; }
-
-.service-card-title {
-  color: black;
-  /* Titel-Textfarbe auf Weiß setzen */
-  margin-bottom: 10px; }
-
-.service-card-description {
-  color: black;
-  /* Hellgraue Farbe für den Beschreibungstext */
-  font-size: 14px; }
-
-/* Anpassungen für Mobilgeräte */
-@media (max-width: 768px) {
-  .services-grid {
-    grid-template-columns: 1fr;
-    /* Eine Spalte für Mobilgeräte */ } }
diff --git a/resources/_gen/assets/scss/style.scss_f0dbc780e1c51d7c7ecd78ee0b7f5792.content b/resources/_gen/assets/scss/style.scss_f0dbc780e1c51d7c7ecd78ee0b7f5792.content
index 4299f10..0e3c149 100644
--- a/resources/_gen/assets/scss/style.scss_f0dbc780e1c51d7c7ecd78ee0b7f5792.content
+++ b/resources/_gen/assets/scss/style.scss_f0dbc780e1c51d7c7ecd78ee0b7f5792.content
@@ -258,7 +258,7 @@ input[type="tel"] {
     font-weight: 400;
     margin: 0px;
     padding: 10px 0px;
-    font-size: 3em;
+    font-size: 2em;
     /* Standard Schriftgröße für h2 */ }
     @media (max-width: 768px) {
       .section-title h2 {