Refactor advertisement recommendation styling for improved layout and responsiveness

ad_recommendation.php

@@ -13,20 +13,29 @@ if ($adProduct):
     $fakeStock = rand(2, 5);
 ?>
 <style>
+/* Verhindert horizontales Scrollen falls 100vw den vertikalen Scrollbar überlappt */
+html, body {
+    overflow-x: hidden;
+}
+
 .ad-recommendation {
     background: linear-gradient(45deg, #ff0000, #ff8c00, #ff007f);
     background-size: 600% 600%;
     animation: gradientShift 5s ease infinite;
-    padding: 60px 5%;
+    padding: 80px 3vw;
     margin: 40px 0;
-    width: 100%;
+    
+    /* 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;
     color: #fff;
     box-shadow: 0 10px 30px rgba(0,0,0,0.5);
     overflow: hidden;
-    box-sizing: border-box;
 }
 
 @keyframes gradientShift {
@@ -53,17 +62,18 @@ if ($adProduct):
 }
 
 .ad-container {
-    max-width: 1800px;
+    max-width: none;
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 60px;
+    justify-content: center;
+    gap: 8vw;
 }
 
 .ad-image-container {
     flex-shrink: 0;
-    width: 350px;
-    height: 350px;
+    width: 400px;
+    height: 400px;
     background: radial-gradient(circle, #fff 0%, #ffe6e6 100%);
     border-radius: 50%;
     display: flex;
@@ -165,7 +175,8 @@ if ($adProduct):
     padding: 20px;
     border-left: 5px solid #ffd700;
     border-radius: 0 10px 10px 0;
-    max-width: 1000px;
+    max-width: none;
+    width: 100%;
 }
 
 .ad-urgency {