Update: Abschluss 29.07.2025

layouts/_default/about.html

@@ -2,48 +2,76 @@
 
 {{ partial "page-title.html" . }}
 
-<!-- Intro Section: Wir sind AMPERION -->
+<!-- Intro + Mission/Vision Section -->
 {{ with .Params.intro_section }}
 {{ if .enable }}
 <section id="about-intro" class="section py-5">
-  <div class="my-container">
 
-    <!-- Zentrale Unterüberschrift mit reduziertem Abstand -->
-    <div class="text-center" style="margin-top: -25px; margin-bottom: 20px;">
-      <h3 class="services-description" style="margin-top: 0; font-weight: 400;">
-        Technik mit Verantwortung. Planung mit Weitblick.
-      </h3>
-    </div>
-
-    <div class="row align-items-center">
-
-      <!-- TEXT (links, mobil oben) -->
-      <div class="col-md-6 col-sm-12 text-left">
-        <div class="content">
+  <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 -->
+    <div class="row align-items-center gx-5 gy-4 mb-5">
+      
+      <!-- TEXT -->
+      <div class="col-lg-6 order-2 order-lg-1 text-left">
+        <div class="intro-text px-2 px-md-4" data-aos="fade-up" data-aos-delay="100">
           {{ .text | markdownify }}
         </div>
+
+        <!-- Visual Tags -->
+        <div class="mb-4 mt-3" data-aos="fade-up" data-aos-delay="200">
+          {{ $icons := dict "Unabhängig" "✅" "Technisch fundiert" "⚡" "Zukunftsorientiert" "🌍" }}
+          {{ range .tags }}
+            <span class="badge rounded-pill me-2" style="font-size:1.5rem; padding:0.45em 0.9em; background:#006464; border-radius:999px;">
+              {{ index $icons . }} {{ . }}
+            </span>
+          {{ end }}
+        </div>
       </div>
 
-      <!-- BILD (rechts, mobil unten) -->
-      <div class="col-md-6 col-sm-12 text-center">
+      <!-- BILD -->
+      <div class="col-lg-6 order-1 order-lg-2 d-flex justify-content-center" data-aos="zoom-out" data-aos-delay="200">
         <img
           src="{{ .image | relURL }}"
-          alt="AMPERION Intro"
-          class="img-responsive"
-          style="max-width:420px; width:100%; height:auto; margin:0 auto;">
+          alt="AMPERION – Erneuerbare Energie"
+          loading="lazy"
+          decoding="async"
+          class="img-fluid"
+          style="width:100%; max-width:600px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08);">
       </div>
-
     </div>
+
+    <!-- ROW 2: MISSION / VISION / ZIEL -->
+    {{ with $.Params.mission_vision }}
+    {{ if .enable }}
+    <div class="row mt-4">
+      <div class="col-md-12">
+        <div class="tabCommon">
+          <ul class="nav nav-tabs">
+            {{ range $index, $elements := .tabs }}
+            <li {{ if eq $index 0 }} class="active" {{ end }}>
+              <a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
+            </li>
+            {{ end }}
+          </ul>
+          <div class="tab-content pt-3">
+            {{ range $index, $elements := .tabs }}
+            <div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
+              {{ .content | $.Page.RenderString (dict "display" "block") }}
+            </div>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+    </div>
+    {{ end }}
+    {{ end }}
+
   </div>
 </section>
 {{ end }}
 {{ end }}
 
-
-
-
-
-
 <!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
 <section class="section p-0 m-0" style="background-color: #f7f7f7;">
   <div class="container text-center mb-5">
@@ -93,34 +121,6 @@
     </div>
   </div>
 
-  <!-- Mission, Vision, Ziel -->
-  <div class="container py-5" style="padding-top: 6rem;">
-    <div class="row">
-      {{ with .Params.mission_vision }}
-      {{ if .enable }}
-      <div class="col-md-12">
-        <div class="tabCommon">
-          <ul class="nav nav-tabs">
-            {{ range $index, $elements := .tabs }}
-            <li {{ if eq $index 0 }} class="active" {{ end }}>
-              <a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
-            </li>
-            {{ end }}
-          </ul>
-          <div class="tab-content">
-            {{ range $index, $elements := .tabs }}
-            <div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
-              {{ .content | $.Page.RenderString (dict "display" "block") }}
-            </div>
-            {{ end }}
-          </div>
-        </div>
-      </div>
-      {{ end }}
-      {{ end }}
-    </div>
-  </div>
-</section>
 
 <!-- About Section (Gründerteam) -->
 {{ with .Params.about }}