fix(hero): scale product image down 15%

Trim the split/centered mediaSize widths and the responsive max-h caps
on the image itself by ~15% so the product cutout doesn't dominate the
first fold.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

dist/assets/HeroPreview-CSo1qrdX.js

@@ -1 +1 @@
-import{$ as e,L as t,k as n,m as r,o as i,p as a,s as o,tt as s,u as c,x as l}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as u}from"./vue-router-BrNWkU63.js";import{t as d}from"./i18n-B16vzzU0.js";import{t as f}from"./Navbar-DZE5noW0.js";import{t as p}from"./Hero-v0EClnlY.js";var m={class:`italic font-light text-brand-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HeroPreview`,setup(g){let _=u(),{t:v}=d(),y=i(()=>[`split`,`centered`].includes(_.query.variant)?_.query.variant:`split`),b=i(()=>[`cream`,`paper`,`brand`].includes(_.query.tone)?_.query.tone:`cream`),x=i(()=>b.value===`brand`?`brand`:b.value);return(i,u)=>(l(),c(`div`,{class:e([`min-h-screen`,b.value===`brand`?`bg-brand`:`bg-surface`])},[r(f,{variant:x.value,"cart-count":0},null,8,[`variant`]),r(p,{variant:y.value,tone:b.value,eyebrow:t(v)(`ds.hero.eyebrow`),subheadline:t(v)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,badge:t(v)(`ds.badges.featured`),"cta-label":t(v)(`ds.buttons.addToCart`),"secondary-label":t(v)(`ds.buttons.learnMore`)},{headline:n(()=>[a(s(t(v)(`ds.hero.headline.a`))+` `,1),o(`em`,m,s(t(v)(`ds.hero.headline.em`)),1),a(` `+s(t(v)(`ds.hero.headline.b`)),1)]),_:1},8,[`variant`,`tone`,`eyebrow`,`subheadline`,`badge`,`cta-label`,`secondary-label`])],2))}};export{g as default};
+import{$ as e,L as t,k as n,m as r,o as i,p as a,s as o,tt as s,u as c,x as l}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as u}from"./vue-router-BrNWkU63.js";import{t as d}from"./i18n-B16vzzU0.js";import{t as f}from"./Navbar-DZE5noW0.js";import{t as p}from"./Hero-DXU6A0Jy.js";var m={class:`italic font-light text-brand-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HeroPreview`,setup(g){let _=u(),{t:v}=d(),y=i(()=>[`split`,`centered`].includes(_.query.variant)?_.query.variant:`split`),b=i(()=>[`cream`,`paper`,`brand`].includes(_.query.tone)?_.query.tone:`cream`),x=i(()=>b.value===`brand`?`brand`:b.value);return(i,u)=>(l(),c(`div`,{class:e([`min-h-screen`,b.value===`brand`?`bg-brand`:`bg-surface`])},[r(f,{variant:x.value,"cart-count":0},null,8,[`variant`]),r(p,{variant:y.value,tone:b.value,eyebrow:t(v)(`ds.hero.eyebrow`),subheadline:t(v)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,badge:t(v)(`ds.badges.featured`),"cta-label":t(v)(`ds.buttons.addToCart`),"secondary-label":t(v)(`ds.buttons.learnMore`)},{headline:n(()=>[a(s(t(v)(`ds.hero.headline.a`))+` `,1),o(`em`,m,s(t(v)(`ds.hero.headline.em`)),1),a(` `+s(t(v)(`ds.hero.headline.b`)),1)]),_:1},8,[`variant`,`tone`,`eyebrow`,`subheadline`,`badge`,`cta-label`,`secondary-label`])],2))}};export{g as default};

dist/assets/HomePage-di6JY8ls.js

@@ -1 +1 @@
-import{L as e,k as t,m as n,p as r,s as i,tt as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as c}from"./i18n-B16vzzU0.js";import{t as l}from"./Navbar-DZE5noW0.js";import{t as u}from"./Hero-v0EClnlY.js";var d={class:`h-svh flex flex-col bg-brand overflow-hidden`},f={class:`flex-1 flex items-center`},p={class:`italic font-light text-accent-soft`},m=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,h={__name:`HomePage`,setup(h){let{t:g}=c();return(c,h)=>(s(),o(`div`,d,[n(l,{variant:`brand`,layout:`standard`,"cart-count":0}),i(`div`,f,[n(u,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:e(g)(`ds.hero.eyebrow`),subheadline:e(g)(`ds.hero.sub`),image:m,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":e(g)(`ds.buttons.addToCart`),"secondary-label":e(g)(`ds.buttons.learnMore`),"cta-href":`/shop`,"secondary-href":`/anwendungen`},{headline:t(()=>[r(a(e(g)(`ds.hero.headline.a`))+` `,1),i(`em`,p,a(e(g)(`ds.hero.headline.em`)),1),r(` `+a(e(g)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])])]))}};export{h as default};
+import{L as e,k as t,m as n,p as r,s as i,tt as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as c}from"./i18n-B16vzzU0.js";import{t as l}from"./Navbar-DZE5noW0.js";import{t as u}from"./Hero-DXU6A0Jy.js";var d={class:`h-svh flex flex-col bg-brand overflow-hidden`},f={class:`flex-1 flex items-center`},p={class:`italic font-light text-accent-soft`},m=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,h={__name:`HomePage`,setup(h){let{t:g}=c();return(c,h)=>(s(),o(`div`,d,[n(l,{variant:`brand`,layout:`standard`,"cart-count":0}),i(`div`,f,[n(u,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:e(g)(`ds.hero.eyebrow`),subheadline:e(g)(`ds.hero.sub`),image:m,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":e(g)(`ds.buttons.addToCart`),"secondary-label":e(g)(`ds.buttons.learnMore`),"cta-href":`/shop`,"secondary-href":`/anwendungen`},{headline:t(()=>[r(a(e(g)(`ds.hero.headline.a`))+` `,1),i(`em`,p,a(e(g)(`ds.hero.headline.em`)),1),r(` `+a(e(g)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])])]))}};export{h as default};

dist/index.html

@@ -12,12 +12,12 @@
       href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-jhyLd1n1.js"></script>
+    <script type="module" crossorigin src="/assets/index-CopuHhRz.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-CXTkFu_Z.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-CjdnoyKJ.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-DWTDSpp2.js">
     <link rel="modulepreload" crossorigin href="/assets/vue-router-BrNWkU63.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-iUH3kpng.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-DZsInX8d.css">
   </head>
   <body>
     <div id="app"></div>

src/design-system/components/Hero.vue

@@ -69,7 +69,7 @@ const layout = computed(() => {
       copy: 'max-w-2xl mx-auto items-center text-center',
       actions: 'justify-center',
       media: 'mt-4 md:mt-6',
-      mediaSize: 'w-[260px] sm:w-[320px] md:w-[400px] lg:w-[480px]',
+      mediaSize: 'w-[221px] sm:w-[272px] md:w-[340px] lg:w-[408px]',
     }
   }
   // Split: image on top on mobile/tablet, text-left/image-right on desktop.
@@ -81,7 +81,7 @@ const layout = computed(() => {
     copy: 'order-2 lg:order-1 max-w-xl mx-auto lg:mx-0 items-center text-center lg:items-start lg:text-left lg:justify-center',
     actions: 'justify-center lg:justify-start',
     media: 'order-1 lg:order-2',
-    mediaSize: 'w-[260px] sm:w-[340px] md:w-[420px] lg:w-full lg:max-w-[520px]',
+    mediaSize: 'w-[221px] sm:w-[289px] md:w-[357px] lg:w-full lg:max-w-[442px]',
   }
 })
 </script>
@@ -192,7 +192,7 @@ const layout = computed(() => {
               :alt="imageAlt || headline"
               loading="eager"
               decoding="async"
-              class="relative mx-auto w-auto max-w-full max-h-[40svh] md:max-h-[55svh] lg:max-h-[70svh] object-contain drop-shadow-[0_20px_40px_rgba(28,58,40,0.18)]"
+              class="relative mx-auto w-auto max-w-full max-h-[34svh] md:max-h-[47svh] lg:max-h-[60svh] object-contain drop-shadow-[0_20px_40px_rgba(28,58,40,0.18)]"
             />
           </slot>
         </div>