From 8860508afd49628331b01c70de77531c7f7c8bb9 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Tue, 31 Mar 2026 00:02:49 +0200
Subject: [PATCH] Refactor advertisement styling for improved layout,
 responsiveness, and dynamic sizing

---
 ad_recommendation.php | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/ad_recommendation.php b/ad_recommendation.php
index 1d41672..631a01f 100644
--- a/ad_recommendation.php
+++ b/ad_recommendation.php
@@ -22,14 +22,13 @@ html, body {
     background: linear-gradient(45deg, #ff0000, #ff8c00, #ff007f);
     background-size: 600% 600%;
     animation: gradientShift 5s ease infinite;
-    padding: 80px 3vw;
+    padding: 90px 0;
     margin: 40px 0;
-    
-    /* Zwingt den Container auf die exakte Bildschirmbreite, ignoriert alle Eltern-Container */
+
     width: 100vw;
     margin-left: calc(50% - 50vw);
     box-sizing: border-box;
-    
+
     position: relative;
     display: flex;
     justify-content: center;
@@ -63,17 +62,19 @@ html, body {
 
 .ad-container {
     max-width: none;
-    width: 100%;
+    width: 100vw;
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 8vw;
+    justify-content: space-between;
+    gap: 6vw;
+    padding: 0 4vw;
+    box-sizing: border-box;
 }
 
 .ad-image-container {
     flex-shrink: 0;
-    width: 400px;
-    height: 400px;
+    width: clamp(360px, 34vw, 560px);
+    height: clamp(360px, 34vw, 560px);
     background: radial-gradient(circle, #fff 0%, #ffe6e6 100%);
     border-radius: 50%;
     display: flex;
@@ -123,7 +124,7 @@ html, body {
 }
 
 .ad-title {
-    font-size: 4rem;
+    font-size: clamp(3.2rem, 5.4vw, 6rem);
     font-weight: 900;
     margin: 0 0 15px 0;
     line-height: 1.1;
@@ -223,9 +224,15 @@ html, body {
 }
 
 @media (max-width: 900px) {
+    .ad-recommendation {
+        padding: 60px 0;
+    }
     .ad-container {
+        width: 100%;
         flex-direction: column;
         text-align: center;
+        gap: 28px;
+        padding: 0 5vw;
     }
     .ad-title { font-size: 2.2rem; }
     .ad-description { border-left: none; border-top: 5px solid #ffd700; border-radius: 0 0 10px 10px; }