Refactor advertisement styling for improved layout, responsiveness, and dynamic sizing

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; }