From d9e98dcf0199d48c58fde8ff3ae90b81c4e7cc78 Mon Sep 17 00:00:00 2001
From: astosic <alexander.stosic@amperion.at>
Date: Fri, 8 Aug 2025 13:32:21 +0200
Subject: [PATCH] Refactor layout and styles for content section to improve
 alignment and responsiveness

---
 layouts/index.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 600d45d..f741aa4 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -219,19 +219,20 @@ document.addEventListener('DOMContentLoaded', function () {
     </div>
 
     <!-- Inhalt -->
-    <div class="row mt-4">
+    <div class="row mt-4 d-flex align-items-stretch" style="min-height: 400px;">
 
       <!-- Textbereich -->
-      <div class="col-md-9 col-sm-12" data-aos="fade-right" data-aos-delay="200">
-        <div class="text-left">
+      <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 -->
           {{ with .content }}{{ . | markdownify }}{{ end }}
         </div>
       </div>
 
       <!-- 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 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>
       </div>
 
@@ -242,6 +243,8 @@ document.addEventListener('DOMContentLoaded', function () {
 {{ end }}
 
 
+
+
 <!-- CALL TO ACTION -->
 {{ if .Params.cta.enable }}
 {{ partial "cta.html" . }}