add panel images and make changes to the accessibility style

parfum-shop/src/components/ProductDetailPage.jsx

@@ -65,8 +65,6 @@ const getSampleImage = (perfume) =>
 const getImageForSize = (perfume, size) =>
   size === "sample" ? getSampleImage(perfume) : getFullSizeImage(perfume);
 
-const STORY_PANEL_IMAGE = "/placeholder-character-panel.jpg";
-
 function ProductPurchasePanel({
   perfume,
   selectedSize,
@@ -262,7 +260,7 @@ function ProductStorySection({ perfume }) {
       <div className="story-visual-panel" data-reveal="fade">
         <img
           className="story-visual-image"
-          src={STORY_PANEL_IMAGE}
+          src={perfume.storyVisualImage || perfume.image}
           alt={`Material- und Stimmungsstudie zu ${perfume.name}`}
           loading="lazy"
           decoding="async"

parfum-shop/src/data/perfumes.js

@@ -4,6 +4,7 @@ const perfumes = [
     slug: "kalter-beton",
     name: "KALTER BETON",
     image: "/kalter-beton-product-image.webp",
+    storyVisualImage: "/kalter-beton-story-visual-image.webp",
     fillImage: "/platzhalter.png",
     fillVideo: "/kalter-beton-hover.webm",
     text: "Mineralisch. Roh. Unberührt.",
@@ -27,8 +28,7 @@ const perfumes = [
     edition: "Batch 04/24",
     gallery: [
       "/kalter-beton-product-image.webp",
-      "/kalter-beton-product-sample-webp",
-      "/kalter-beton-product-image.png",
+      "/kalter-beton-product-sample-image.webp",
     ],
     reviews: {
       score: 4.8,
@@ -84,6 +84,7 @@ const perfumes = [
     slug: "nasser-marmor",
     name: "NASSER MARMOR",
     image: "/nasser-marmor-product-image.webp",
+    storyVisualImage: "/nasser-marmor-story-visual-image.webp",
     fillImage: "/platzhalter.png",
     fillVideo: "/nasser-marmor-hover.webm",
     text: "Kühl. Glatt. Sinnlich.",
@@ -108,7 +109,6 @@ const perfumes = [
     gallery: [
       "/nasser-marmor-product-image.webp",
       "/nasser-marmor-product-sample-image.webp",
-      "/nasser-marmor-product-image.png",
     ],
     reviews: {
       score: 4.7,
@@ -164,6 +164,7 @@ const perfumes = [
     slug: "blasse-seide",
     name: "BLASSE SEIDE",
     image: "/blasse-seide-product-image.webp",
+    storyVisualImage: "/blasse-seide-story-visual-image.webp",
     fillImage: "/platzhalter.png",
     fillVideo: "/blasse-seide-hover.webm",
     text: "Blass. Sanft. Kostbar.",
@@ -188,7 +189,6 @@ const perfumes = [
     gallery: [
       "/blasse-seide-product-image.webp",
       "/blasse-seide-product-sample-image.webp",
-      "/blasse-seide-product-image.png",
     ],
     reviews: {
       score: 4.6,
@@ -244,6 +244,7 @@ const perfumes = [
     slug: "weisse-asche",
     name: "WEISSE ASCHE",
     image: "/weisse-asche-product-image.webp",
+    storyVisualImage: "/weisse-asche-story-visual-image.webp",
     fillImage: "/platzhalter.png",
     fillVideo: "/weisse-asche-hover.webm",
     text: "Still. Staubig. Erhaben.",
@@ -268,7 +269,6 @@ const perfumes = [
     gallery: [
       "/weisse-asche-product-image.webp",
       "/weisse-asche-product-sample-image.webp",
-      "/weisse-asche-product-image.png",
     ],
     reviews: {
       score: 4.7,
@@ -324,6 +324,7 @@ const perfumes = [
     slug: "verbranntes-chrom",
     name: "VERBRANNTES CHROM",
     image: "/verbranntes-chrom-product-image.webp",
+    storyVisualImage: "/verbranntes-chrom-story-visual-image.webp",
     fillImage: "/platzhalter.png",
     fillVideo: "/verbranntes-chrom-hover.webm",
     text: "Metallisch. Verzehrt. Edel.",
@@ -348,7 +349,6 @@ const perfumes = [
     gallery: [
       "/verbranntes-chrom-product-image.webp",
       "/verbrannteschrom-product-sample-image.webp",
-      "/verbranntes-chrom-product-image.png",
     ],
     reviews: {
       score: 4.9,
@@ -404,6 +404,7 @@ const perfumes = [
     slug: "schwarzes-benzin",
     name: "SCHWARZES BENZIN",
     image: "/schwarzes-benzin-product-image.webp",
+    storyVisualImage: "/schwarzes-benzin-story-visual-image.webp",
     fillImage: "/platzhalter.png",
     fillVideo: "/schwarzes-benzin-hover.webm",
     text: "Dunkel. Glänzend. Verboten.",
@@ -428,7 +429,6 @@ const perfumes = [
     gallery: [
       "/schwarzes-benzin-product-image.webp",
       "/schwarzes-benzin-product-sample-image.webp",
-      "/schwarzes-benzin-product-image.png",
     ],
     reviews: {
       score: 4.8,
@@ -481,4 +481,4 @@ const perfumes = [
   },
 ];
 
-export default perfumes;
+export default perfumes;

parfum-shop/src/pages/LandingPage.css

@@ -689,17 +689,15 @@ body.theme-light .hero-wordmark__image {
   }
 
   .hero-product {
-    /* Phone: slot spans the page width minus the standard
-       --page-x gutter on each side. The img inside uses
-       object-fit: contain, so the bottle stays naturally
-       centered and proportional within the box. */
+    /* Phone: keep the product centered, but narrower than the viewport
+       so it does not crowd the copy block near the bottom. */
     aspect-ratio: auto;
     top: clamp(11rem, 24svh, 14rem);
-    left: var(--page-x);
-    right: var(--page-x);
-    width: auto;
-    height: clamp(18rem, 44svh, 24rem);
-    transform: none;
+    left: 50%;
+    right: auto;
+    width: clamp(15rem, 74vw, 21rem);
+    height: clamp(16rem, 38svh, 21rem);
+    transform: translateX(-50%);
   }
 
   .hero-content {
@@ -767,10 +765,10 @@ body.theme-light .hero-wordmark__image {
   }
 
   .hero-product {
-    /* Slightly tighter slot for compact phones; centering and
-       full-width box come from the .hero-product base above. */
+    /* Slightly tighter slot for compact phones. */
     top: clamp(10rem, 22svh, 13rem);
-    height: clamp(17rem, 42svh, 22rem);
+    width: clamp(14rem, 70vw, 18.5rem);
+    height: clamp(15rem, 36svh, 19rem);
   }
 
   .hero-copy {

parfum-shop/src/style/tokens.css

@@ -20,7 +20,7 @@
   /* Brand */
   --theme-black: #262626;
   --theme-white: #eaeaea;
-  --theme-accent: #ff6a00;
+  --theme-accent: #c24700;
   --theme-accent-rgb: 255 106 0;
   --theme-accent-fill: #c24700;
   --theme-accent-fill-rgb: 194 71 0;
@@ -73,7 +73,7 @@
   /* Containers */
   --container: min(calc(100% - (var(--page-x) * 2)), 1440px);
   --container-narrow: min(calc(100% - (var(--page-x) * 2)), 920px);
-  --container-wide: min(calc(100% - (var(--page-x) * 2)), 1680px);
+  --container-wide: min(calc(100% - (var(--page-x) * 2)), 2400px);
   --text-measure: 68ch;
 
   /* Spacing — reusable gaps */