From 53eff1def7e36e5a3e0745d04b5e4d4c723e9dc1 Mon Sep 17 00:00:00 2001
From: astosic <alexander.stosic@amperion.at>
Date: Mon, 4 Aug 2025 19:03:47 +0200
Subject: [PATCH] Refactor SCSS and HTML for improved layout, typography, and
 animations

---
 assets/scss/_common.scss                      |   1 +
 assets/scss/_typography.scss                  |   9 +-
 assets/scss/custom.scss                       | 142 ++++++++++++----
 layouts/_default/about.html                   |  17 +-
 layouts/index.html                            |  85 +++++-----
 layouts/partials/section-grid.html            |  11 +-
 layouts/partials/style.html                   |   2 +-
 ...s_d9077b5cab49df084fb1a39ad4b1e75d.content | 156 ++++++++++--------
 8 files changed, 265 insertions(+), 158 deletions(-)

diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss
index 10051ab..66e2030 100644
--- a/assets/scss/_common.scss
+++ b/assets/scss/_common.scss
@@ -723,3 +723,4 @@ 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 86a39aa..bca4dea 100644
--- a/assets/scss/_typography.scss
+++ b/assets/scss/_typography.scss
@@ -27,7 +27,7 @@ body {
 // ---------------------------
 
 h1 {
-  font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
+  font-size: clamp(2.5rem, 5vw, 4rem); // ~32px auf Desktop
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 1rem;
@@ -42,7 +42,7 @@ h1.page-title {
 
 
 h2 {
-  font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix
+  font-size: clamp(2rem, 3vw, 2.5rem); // Reaktionsfähig statt fix
   font-style: italic;
   font-weight: 400;
   line-height: 1.4;
@@ -52,16 +52,17 @@ h2 {
 
 
 h3 {
-  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
+  font-size: clamp(1.8rem, 1.8vw, 2rem);
   font-weight: normal;
   line-height: 1.6;
   margin-bottom: 1rem;
   color: inherit;
+  color: #F5A623;
 }
 
 p {
   font-style: normal;
-  font-size: clamp(1.3rem, 1.5vw, 1.4rem);
+  font-size: clamp(1.5rem, 1.5vw, 1.8rem);
   margin-bottom: 1.25rem;
   line-height: 1.6;
 }
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 8ab2768..1db52ba 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -6,7 +6,7 @@
 }
 
 .hero-title {
-  font-size: clamp(2.5rem, 4vw, 4rem); // skaliert stark bei kleinen Screens
+  font-size: clamp(2.5rem, 4vw, 4rem);
   font-weight: 400;
   line-height: 1.2;
   color: #046e6e;
@@ -14,7 +14,6 @@
   hyphens: none;
 }
 
-
 .text-center {
   text-align: center;
 }
@@ -23,11 +22,19 @@
   text-align: justify;
 }
 
+/* ========== Vereinheitlichte Section-Abstände ========== */
 section {
   margin-bottom: 0;
 }
 
-/* ========== Sektionen Padding (Intro etc.) ========== */
+.section {
+  padding-top: 90px;
+  padding-bottom: 90px;
+  margin-top: 80px;
+  margin-bottom: 80px;
+}
+
+/* Spezielle Section-Anpassungen */
 #welcome.section,
 #service.section {
   padding-top: 90px;
@@ -40,7 +47,6 @@ section {
   margin-top: 5rem;
 }
 
-
 /* ========== Beschreibung ========== */
 .description {
   font-size: 22px;
@@ -83,18 +89,14 @@ section {
   background-image: url('/images/BackgroundAnimation.svg');
   background-repeat: no-repeat;
   position: relative;
-
-  // Desktop
   background-size: cover;
   background-position: center 50%;
   
-  // Tablet
   @media (max-width: 991px) {
     background-size: 120% auto;
     background-position: center 40%;
   }
   
-  // Mobile
   @media (max-width: 575px) {
     background-size: 180% auto;
     background-position: center 50%;
@@ -115,10 +117,7 @@ section {
   }
 }
 
-
-
-/* ========== Service-Layout (Kacheln / Pfeile) ========== */
-
+/* ========== Service-Layout ========== */
 .service-arrow .block {
   display: flex;
   align-items: center;
@@ -170,7 +169,6 @@ section {
   padding: 0 1rem;
 }
 
-
 .service-item-fixed {
   width: 100%;
   border-radius: 10px;
@@ -220,8 +218,7 @@ section {
   z-index: 2;
 }
 
-/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
-
+/* ========== Zusatz-Layouts ========== */
 .spacer-lg {
   height: 0px;
 }
@@ -243,9 +240,8 @@ section {
   }
 
   .overlay-text {
-  font-size: clamp(2rem, 2vw, 3rem);
-}
-
+    font-size: clamp(2rem, 2vw, 3rem);
+  }
 }
 
 .info-card {
@@ -271,37 +267,30 @@ section {
   }
 }
 
-/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
+/* ========== WHY AMPERION Grid ========== */
 .why-grid {
   display: grid;
   gap: 2rem;
-
-  /* Desktop: 3 Spalten => 3×2 */
   grid-template-columns: repeat(3, minmax(0, 1fr));
-
-  /* Jede Zeile passt sich der höchsten Karte an */
   align-items: stretch;
 }
 
-/* Tablet: 2 Spalten => 2×3 */
 @media (max-width: 991.98px) {
   .why-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-/* Mobil: 1 Spalte => 1×6 */
 @media (max-width: 575.98px) {
   .why-grid {
     grid-template-columns: 1fr;
   }
 }
 
-/* Karten sollen die Zellen voll ausfüllen */
 .service-card {
   display: flex;
   flex-direction: column;
-  height: 100%;                 /* gleiche Höhe pro Zeile */
+  height: 100%;
   background: #fff;
   padding: 1.5rem;
   border-radius: 10px;
@@ -310,7 +299,6 @@ section {
   text-align: center;
 }
 
-/* Icon einheitlich */
 .service-icon {
   width: 56px;
   height: 56px;
@@ -319,7 +307,6 @@ section {
   display: block;
 }
 
-/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
 .service-card-title {
   font-weight: 600;
   margin: .25rem 0 .5rem;
@@ -330,12 +317,19 @@ section {
   margin: 0;
 }
 
-/* ========== Container & Layout-Hilfen ========== */
+/* ========== Container & Layout ========== */
 .my-container {
   width: 80%;
   margin: 0 auto;
 }
 
+.custom-container {
+  max-width: 1800px;
+  margin: 0 auto;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
 .fixed-width {
   max-width: 1200px;
   margin: 0 auto;
@@ -445,4 +439,92 @@ section {
   }
 }
 
+/* ========== Logo Animation ========== */
+.logo-container {
+  width: 80%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+.frame1 {
+  flex: 0 0 40%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.frame2 {
+  flex: 0 0 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.banner-logo {
+  max-width: 100%;
+  height: auto;
+  opacity: 0;
+}
+
+/* Animationen */
+.frame1 .banner-logo {
+  animation: moveIn 1s forwards;
+}
+
+.frame2 .banner-logo {
+  animation: moveIn 1s 0.5s forwards;
+}
+
+@keyframes moveIn {
+  from {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in-title {
+  opacity: 0;
+  animation: fadeTitle 1.5s forwards 1s;
+}
+
+@keyframes fadeTitle {
+  to { opacity: 1; }
+}
+
+@media (max-width: 768px) {
+  .logo-container {
+    flex-direction: column;
+    width: 90%;
+  }
+  .frame1, .frame2 {
+    flex: 0 0 auto;
+    width: 100%;
+    margin-bottom: 20px; 
+  }
+}
+/* ========== Body Base (aus style.scss) ========== */
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #ffffff;
+    margin: 0;
+    padding: 20px;
+}
 
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 05817d8..a2394df 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -4,8 +4,7 @@
 <!-- Intro + Mission/Vision Section -->
 {{ with .Params.intro_section }}
 {{ if .enable }}
-<section id="about-intro" class="section py-5">
-
+<section id="about-intro" class="section">
   <div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
     
     <!-- ROW 1: TEXT + BILD -->
@@ -71,7 +70,7 @@
 {{ end }}
 {{ end }}
 
-<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
+<!-- AMPERION Mehrwerte -->
 <section class="section p-0 m-0" style="background-color: #f7f7f7;">
   <div class="container text-center mb-5">
     <h3 class="mb-4">
@@ -119,12 +118,12 @@
       </div>
     </div>
   </div>
-
+</section>
 
 <!-- About Section (Gründerteam) -->
 {{ with .Params.about }}
 {{ if .enable }}
-<section class="about section pt-0">
+<section class="about section">
   <div class="container-fluid">
     
     <!-- Überschrift -->
@@ -132,9 +131,8 @@
 
     <!-- Zentraler Einleitungstext -->
     <p class="text-center px-3" style="margin-bottom: 40px;">
-  Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
-</p>
-
+      Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
+    </p>
 
     <div class="row gx-5 gy-5 align-items-center">
       
@@ -176,10 +174,9 @@
 {{ end }}
 {{ end }}
 
-
 <!-- Call to Action -->
 {{ if .Params.cta.enable }}
 {{ partial "cta.html" . }}
 {{ end }}
 
-{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index d46500a..600d45d 100644
--- a/layouts/index.html
+++ b/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 }}
\ No newline at end of file
diff --git a/layouts/partials/section-grid.html b/layouts/partials/section-grid.html
index 8450768..965f6dc 100644
--- a/layouts/partials/section-grid.html
+++ b/layouts/partials/section-grid.html
@@ -1,16 +1,15 @@
 {{ 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>
+          <h1 data-aos="fade-up">{{ .title | markdownify }}</h1>
+          <h2 data-aos="fade-up">{{ .description | markdownify }}</h2>
         </div>
 
-        <div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}">
+        <div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}" data-aos="zoom-in-up">
           {{ range .service_item }}
             {{ if eq $.type "zoom" }}
-              <div class="service-item zoom-wrap">
+              <div class= "service-item zoom-wrap" >
                 <a href="{{ .link | relURL }}">
                   <img src="{{ .picture | relURL }}" alt="{{ .name }}">
                   <div class="overlay"></div>
@@ -27,6 +26,6 @@
           {{ end }}
         </div>
       </div>
-    </section>
+
   {{ end }}
 {{ end }}
diff --git a/layouts/partials/style.html b/layouts/partials/style.html
index 26e840b..5c10a04 100644
--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@@ -13,4 +13,4 @@
 {{ end }}
 {{ $styles := $styles | append (resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS) }}
 {{ $styles := $styles | resources.Concat "/css/style.css" | minify | fingerprint "sha512"}}
-<style type="text/css">{{$styles.Content | safeCSS}}</style>
\ No newline at end of file
+<link rel="stylesheet" href="{{ $styles.Permalink }}">
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
index c3115b5..ef85b8a 100644
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@@ -18,7 +18,7 @@ body {
   margin-top: 1rem; }
 
 h1 {
-  font-size: clamp(2rem, 5vw, 3rem);
+  font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 1rem;
@@ -30,7 +30,7 @@ h1.page-title {
   text-transform: capitalize; }
 
 h2 {
-  font-size: clamp(1.25rem, 2vw, 1.5rem);
+  font-size: clamp(2rem, 3vw, 2.5rem);
   font-style: italic;
   font-weight: 400;
   line-height: 1.4;
@@ -38,15 +38,16 @@ h2 {
   color: #222; }
 
 h3 {
-  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
+  font-size: clamp(1.8rem, 1.8vw, 2rem);
   font-weight: normal;
   line-height: 1.6;
   margin-bottom: 1rem;
-  color: inherit; }
+  color: inherit;
+  color: #F5A623; }
 
 p {
   font-style: normal;
-  font-size: clamp(1.3rem, 1.5vw, 1.4rem);
+  font-size: clamp(1.5rem, 1.5vw, 1.8rem);
   margin-bottom: 1.25rem;
   line-height: 1.6; }
 
@@ -2522,10 +2523,17 @@ header .navbar-default .navbar-nav li a:hover {
 .text-justify {
   text-align: justify; }
 
+/* ========== Vereinheitlichte Section-Abstände ========== */
 section {
   margin-bottom: 0; }
 
-/* ========== Sektionen Padding (Intro etc.) ========== */
+.section {
+  padding-top: 90px;
+  padding-bottom: 90px;
+  margin-top: 80px;
+  margin-bottom: 80px; }
+
+/* Spezielle Section-Anpassungen */
 #welcome.section,
 #service.section {
   padding-top: 90px;
@@ -2592,7 +2600,7 @@ section {
     @media (max-width: 575px) {
       .gif-background::after {
         background-color: rgba(255, 255, 255, 0.5); } }
-/* ========== Service-Layout (Kacheln / Pfeile) ========== */
+/* ========== Service-Layout ========== */
 .service-arrow .block {
   display: flex;
   align-items: center;
@@ -2679,7 +2687,7 @@ section {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
   z-index: 2; }
 
-/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
+/* ========== Zusatz-Layouts ========== */
 .spacer-lg {
   height: 0px; }
 
@@ -2713,31 +2721,25 @@ section {
     font-size: 1rem;
     color: #333; }
 
-/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
+/* ========== WHY AMPERION Grid ========== */
 .why-grid {
   display: grid;
   gap: 2rem;
-  /* Desktop: 3 Spalten => 3×2 */
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  /* Jede Zeile passt sich der höchsten Karte an */
   align-items: stretch; }
 
-/* Tablet: 2 Spalten => 2×3 */
 @media (max-width: 991.98px) {
   .why-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 
-/* Mobil: 1 Spalte => 1×6 */
 @media (max-width: 575.98px) {
   .why-grid {
     grid-template-columns: 1fr; } }
 
-/* Karten sollen die Zellen voll ausfüllen */
 .service-card {
   display: flex;
   flex-direction: column;
   height: 100%;
-  /* gleiche Höhe pro Zeile */
   background: #fff;
   padding: 1.5rem;
   border-radius: 10px;
@@ -2745,7 +2747,6 @@ section {
   transition: transform .25s ease, box-shadow .25s ease;
   text-align: center; }
 
-/* Icon einheitlich */
 .service-icon {
   width: 56px;
   height: 56px;
@@ -2753,7 +2754,6 @@ section {
   margin: 0 auto .75rem auto;
   display: block; }
 
-/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
 .service-card-title {
   font-weight: 600;
   margin: .25rem 0 .5rem; }
@@ -2762,11 +2762,17 @@ section {
   line-height: 1.6;
   margin: 0; }
 
-/* ========== Container & Layout-Hilfen ========== */
+/* ========== Container & Layout ========== */
 .my-container {
   width: 80%;
   margin: 0 auto; }
 
+.custom-container {
+  max-width: 1800px;
+  margin: 0 auto;
+  padding-left: 30px;
+  padding-right: 30px; }
+
 .fixed-width {
   max-width: 1200px;
   margin: 0 auto; }
@@ -2852,58 +2858,78 @@ section {
   @media (min-width: 992px) {
     #about-intro .intro-text {
       font-size: 1.35rem; } }
-/* ========== Call-to-Action ========== */
-.call-to-action.cta-animated {
-  position: relative;
-  background-attachment: fixed;
-  background-size: cover;
-  background-position: center;
-  color: #ffffff;
-  padding: 6rem 1rem; }
-  .call-to-action.cta-animated .overlay-dark {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    z-index: 0; }
-  .call-to-action.cta-animated .block {
-    position: relative;
-    z-index: 1; }
-  .call-to-action.cta-animated .cta-title {
-    font-size: clamp(1.8rem, 4vw, 2.8rem);
-    font-weight: 600;
-    margin-bottom: 1rem; }
-  .call-to-action.cta-animated .cta-subtitle {
-    font-size: clamp(1rem, 2vw, 1.4rem);
-    max-width: 800px;
-    margin: 0 auto 2rem auto;
-    line-height: 1.6; }
-  .call-to-action.cta-animated .cta-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    flex-wrap: wrap; }
-  .call-to-action.cta-animated .btn {
-    padding: 0.9rem 2rem;
-    font-size: 1rem;
-    transition: all 0.3s ease; }
-    .call-to-action.cta-animated .btn:hover {
-      transform: scale(1.05); }
+/* ========== Logo Animation ========== */
+.logo-container {
+  width: 80%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 20px; }
 
-.fade-in {
-  opacity: 0;
-  transform: translateY(20px);
-  animation: fadeInUp 1s ease forwards; }
+.frame1 {
+  flex: 0 0 40%;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
 
-.delay-1 {
-  animation-delay: 0.2s; }
+.frame2 {
+  flex: 0 0 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
 
-.delay-2 {
-  animation-delay: 0.4s; }
+.banner-logo {
+  max-width: 100%;
+  height: auto;
+  opacity: 0; }
 
-@keyframes fadeInUp {
+/* Animationen */
+.frame1 .banner-logo {
+  animation: moveIn 1s forwards; }
+
+.frame2 .banner-logo {
+  animation: moveIn 1s 0.5s forwards; }
+
+@keyframes moveIn {
+  from {
+    transform: translateX(50px);
+    opacity: 0; }
   to {
-    opacity: 1;
-    transform: translateY(0); } }
+    transform: translateX(0);
+    opacity: 1; } }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+.fade-in-title {
+  opacity: 0;
+  animation: fadeTitle 1.5s forwards 1s; }
+
+@keyframes fadeTitle {
+  to {
+    opacity: 1; } }
+
+@media (max-width: 768px) {
+  .logo-container {
+    flex-direction: column;
+    width: 90%; }
+  .frame1, .frame2 {
+    flex: 0 0 auto;
+    width: 100%;
+    margin-bottom: 20px; } }
+
+/* ========== Body Base (aus style.scss) ========== */
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: #ffffff;
+  margin: 0;
+  padding: 20px; }
 
 /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
 .logo-container {