Refactor SCSS and HTML for improved layout, typography, and animations

layouts/index.html

@@ -1,6 +1,5 @@
 {{ define "main" }}
 <header id="mainHeader">
-
   {{ with .Params.banner }}
   {{ if .enable }}
   <!-- HERO / SLIDER -->
@@ -8,7 +7,7 @@
     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* -->
+      <!-- Logo-Zeile mit zwei Frames -->
       <div class="logo-container">
         <div class="frame1">
           <img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo">
@@ -18,7 +17,7 @@
         </div>
       </div>
 
-      <!-- *Haupttitel + Button* -->
+      <!-- Haupttitel + Button -->
       <div class="hero-section" style="margin-top: 10rem;">
         {{ with .title }}
         <h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
@@ -45,7 +44,7 @@
 <script>
 document.addEventListener('DOMContentLoaded', function () {
   const hero = document.getElementById('hero');
-  const targetSection = document.getElementById('leistungen');
+  const targetSection = document.getElementById('leistungen-fokusthemen');
   const scrolldown = document.querySelector('.scrolldown');
   const header = document.getElementById('mainHeader');
   let lastScroll = window.scrollY;
@@ -61,40 +60,36 @@ document.addEventListener('DOMContentLoaded', function () {
     
     window.scrollTo({ top: y, behavior: 'smooth' });
     
-    // Warte bis Scroll-Animation fertig ist
     setTimeout(() => {
       isAutoScrolling = false;
       autoScrollDone = true;
     }, 1000);
   }
 
-  // Klick auf Chevron → scrollen
+  // Click handler für Scrolldown
   scrolldown?.addEventListener('click', (e) => {
     e.preventDefault();
     e.stopPropagation();
     scrollToTarget();
   });
 
-  // Scrollrad nach unten → am Ende von Hero → scrollen
+  // Wheel handler für Auto-Scroll am Ende der Hero-Section
   let wheelTimeout;
   window.addEventListener('wheel', function (e) {
-    // Verhindere Auto-Scroll während manueller Scroll oder wenn bereits ausgeführt
     if (autoScrollDone || isAutoScrolling || e.deltaY <= 0 || !hero || !targetSection) return;
 
-    // Debounce wheel events
     clearTimeout(wheelTimeout);
     wheelTimeout = setTimeout(() => {
       const heroBottom = hero.getBoundingClientRect().bottom;
       const threshold = 50;
 
-      // Nur wenn wir wirklich am Ende der Hero-Section sind
       if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) {
         scrollToTarget();
       }
     }, 50);
   }, { passive: true });
 
-  // Scroll-Verhalten (Chevron + Header + Reset)
+  // Scroll handler für Header und Chevron
   let scrollTimeout;
   window.addEventListener('scroll', function () {
     clearTimeout(scrollTimeout);
@@ -114,42 +109,39 @@ document.addEventListener('DOMContentLoaded', function () {
         lastScroll = currentScroll;
       }
 
-      // Reset der Auto-Scroll-Sperre nur wenn wir wieder komplett im Hero sind
+      // Reset Auto-Scroll wenn zurück im Hero
       const heroTop = hero.getBoundingClientRect().top;
       const heroBottom = hero.getBoundingClientRect().bottom;
       
-      // Nur resetten wenn Hero-Section vollständig sichtbar ist
       if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
         autoScrollDone = false;
       }
     }, 10);
   });
 
-  // Reset beim Seitenwechsel oder Refresh
+  // Reset beim Seitenwechsel
   window.addEventListener('beforeunload', () => {
     window.scrollTo(0, 0);
   });
 });
 </script>
 
-  <!-- Leistungen -->
-<section id="leistungen" class="section">
-  {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom") }}
+<!-- KOMBINIERTE SECTION: Leistungen & Fokusthemen -->
+<section id="leistungen-fokusthemen" class="section combined-services">
+  <div class="my-container">
+  {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }}
+  <div style="margin-top: 5rem;"></div>
+  {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }}
+  </div>
 </section>
 
-<!-- Fokusthemen -->
-<section id="fokusthemen" class="section">
-  {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom") }}
-</section>
-
-
-<!-- DARUM AMPERION – kompakt & detailliert -->
-<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 28rem; padding: 3rem 0;">
+<!-- DARUM AMPERION -->
+<section class="whyamperion section" style="background-color:#f3f3f3;">
   <div class="container my-container">
 
     <!-- Titelblock -->
     <div class="row">
-      <div class="text-center">
+      <div class="text-center" data-aos="fade-up" data-aos-delay="100">
         <h1>Darum AMPERION</h1>
         <h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
       </div>
@@ -157,7 +149,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
     <!-- Karten -->
     <div class="why-grid mt-5">
-      <article class="service-card text-center">
+      {{ $delay := 0 }}
+      {{ $delayStep := 100 }}
+
+      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <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">
@@ -165,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function () {
         </p>
       </article>
 
-      <article class="service-card text-center">
+      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <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">
@@ -173,7 +168,7 @@ document.addEventListener('DOMContentLoaded', function () {
         </p>
       </article>
 
-      <article class="service-card text-center">
+      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <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">
@@ -181,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
         </p>
       </article>
 
-      <article class="service-card text-center">
+      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <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">
@@ -189,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function () {
         </p>
       </article>
 
-      <article class="service-card text-center">
+      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <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">
@@ -197,7 +192,7 @@ document.addEventListener('DOMContentLoaded', function () {
         </p>
       </article>
 
-      <article class="service-card text-center">
+      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <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">
@@ -205,35 +200,41 @@ document.addEventListener('DOMContentLoaded', function () {
         </p>
       </article>
     </div>
-
   </div>
 </section>
 
+
 <!-- ÜBER AMPERION -->
 {{ with .Params.about }}
 {{ if .enable }}
-<section id="about" class="about section" style="margin-top: 20rem; margin-bottom: 20rem; padding: 3rem 0;">
+<section id="about" class="about section">
   <div class="container">
+
+    <!-- Titelbereich -->
     <div class="row">
-      <div class="col-12 text-center">
+      <div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100">
         <h1>Über AMPERION</h1>
         {{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }}
       </div>
     </div>
+
+    <!-- Inhalt -->
     <div class="row mt-4">
-      <div class="col-md-9 col-sm-12">
+
+      <!-- Textbereich -->
+      <div class="col-md-9 col-sm-12" data-aos="fade-right" data-aos-delay="200">
         <div class="text-left">
           {{ with .content }}{{ . | markdownify }}{{ end }}
         </div>
-        <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">
+
+      <!-- Bildbereich -->
+      <div class="col-md-3 col-sm-12" data-aos="zoom-in" data-aos-delay="300">
         <div class="block text-center">
           <img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild">
         </div>
       </div>
+
     </div>
   </div>
 </section>
@@ -249,7 +250,7 @@ document.addEventListener('DOMContentLoaded', function () {
 <!-- FACTS -->
 {{ with .Params.facts }}
 {{ if .enable }}
-<section class="facts">
+<section class="facts section">
   <div class="container">
     <div class="row">
       {{ range .fact_item }}
@@ -264,4 +265,4 @@ document.addEventListener('DOMContentLoaded', function () {
 </section>
 {{ end }}
 {{ end }}
-{{ end }}
+{{ end }}