Refactor SCSS and HTML for improved layout, styling, and responsiveness in various sections

layouts/_default/baseof.html

@@ -64,6 +64,7 @@ AUTHOR WEBSITE: https://gethugothemes.com
 	{{ end }}
 
 
+<script defer src="/js/amp-grid.js"></script>
 
 </body>
 

layouts/index.html

@@ -127,16 +127,21 @@ document.addEventListener('DOMContentLoaded', function () {
 </script>
 
 <!-- KOMBINIERTE SECTION: Leistungen & Fokusthemen -->
-<section id="leistungen-fokusthemen" class="section combined-services">
+<section id="leistungen-fokusthemen" class="section combined-services " style="background-color:#f3f3f3;">
   <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 class="grid-section services-grid" data-aos="fade-up" data-aos-delay="50">
+      {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }}
+    </div>
+    <div class="grid-spacer" aria-hidden="true"></div>
+    <div class="grid-section focus-grid" data-aos="fade-up" data-aos-delay="100">
+      {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }}
+    </div>
   </div>
 </section>
 
+
 <!-- DARUM AMPERION -->
-<section class="whyamperion section" style="background-color:#f3f3f3;">
+<section class="whyamperion section">
   <div class="container my-container">
 
     <!-- Titelblock -->
@@ -201,13 +206,47 @@ document.addEventListener('DOMContentLoaded', function () {
       </article>
     </div>
   </div>
+
+<!-- Affiliations / Verbände unterhalb der Cards -->
+<div class="darum-aff-row" data-aos="fade-up" data-aos-delay="100">
+
+  <!-- Linker Block: Ingenieurbüros + Co. -->
+  <div class="aff-group aff-left">
+    <div class="aff-logos">
+      <!-- Deine Logos hier (Beispiele) -->
+      <img src="images/logo-fusszeile-mitglieder-2018.webp" alt="Ingenieurbüros Österreich">
+    </div>
+  </div>
+
+  <!-- Rechter Block: PV Austria (klickbar) -->
+  <a class="aff-group aff-right"
+     href="https://pvaustria.at/"
+     target="_blank"
+     rel="noopener external nofollow"
+     aria-label="Photovoltaic Austria – Website öffnen"
+     title="Photovoltaic Austria">
+    <p class="aff-text">
+      AMPERION ist Mitglied bei Photovoltaic Austria und bietet normgerechte Planung, herstellerunabhängige Beratung und praxisnahe Innovation – 
+      damit jedes Projekt technisch, wirtschaftlich und langfristig überzeugt.
+    </p>
+    <img src="/images/mitglied-photovoltaic-austria.png" alt="Mitglied bei Photovoltaic Austria" class="aff-pva-logo">
+  </a>
+
+</div>
+
+
+
+
+</div>
+
+
 </section>
 
 
 <!-- ÜBER AMPERION -->
 {{ with .Params.about }}
 {{ if .enable }}
-<section id="about" class="about section">
+<section id="about" class="about section" style="background-color:#f3f3f3"> 
   <div class="container">
 
     <!-- Titelbereich -->
@@ -219,20 +258,19 @@ document.addEventListener('DOMContentLoaded', function () {
     </div>
 
     <!-- Inhalt -->
-    <div class="row mt-4 d-flex align-items-stretch" style="min-height: 400px;">
+    <div class="row mt-4 d-flex align-items-stretch about-row">
 
       <!-- Textbereich -->
       <div class="col-md-7 col-sm-12 d-flex h-100" data-aos="fade-right" data-aos-delay="200">
-        <div class="text-left w-100 my-auto"> <!-- vertikal zentriert -->
+        <div class="text-left w-100 my-auto">
           {{ with .content }}{{ . | markdownify }}{{ end }}
         </div>
       </div>
 
       <!-- Bildbereich -->
       <div class="col-md-5 col-sm-12 d-flex h-100" data-aos="zoom-in" data-aos-delay="300">
-        <div class="w-100 d-flex align-items-end" style="padding-top: 30px;"> <!-- Bild etwas nach unten -->
-          <img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild"
-               style="width: 100%; height: auto; object-fit: contain;">
+        <div class="about-image-wrap">
+          <img src="{{ .image | relURL }}" class="about-image" alt="Über AMPERION Bild">
         </div>
       </div>
 
@@ -244,28 +282,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
 
 
-
 <!-- CALL TO ACTION -->
 {{ if .Params.cta.enable }}
 {{ partial "cta.html" . }}
 {{ end }}
-
-<!-- FACTS -->
-{{ with .Params.facts }}
-{{ if .enable }}
-<section class="facts section">
-  <div class="container">
-    <div class="row">
-      {{ range .fact_item }}
-      <div class="col-md-6">
-        <div class="fact-item text-center">
-          <img src="{{ .image | relURL }}" alt="{{ .name }}" class="fact-image">
-        </div>
-      </div>
-      {{ end }}
-    </div>
-  </div>
-</section>
-{{ end }}
-{{ end }}
 {{ end }}