home: bundle imagery + side-fade timing polish

· Wire bundle cards to /bundles/transparent/* artwork; rename the
  ä/ü/&-bearing source files to ASCII-safe names so dev server and
  CDN paths don't choke on URL-encoding edge cases.
· BundleCard gains an `imageFit` prop (`contain` default vs `cover`)
  so per-bundle artwork can opt into edge-to-edge framing without
  forcing the whole grid to the same fit.
· BrandHero side-fade fade-out now syncs with the tagline fade-in
  (700ms ease 1150ms) — one smooth landing instead of two staggered
  beats.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dist/assets/BundleCard-DlVtWgvc.js

@@ -1 +0,0 @@
-import{C as e,G as t,O as n,T as r,c as i,ft as a,j as o,l as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./Icon-BCo6-bGH.js";import{t as g}from"./i18n-VERRV-oN.js";import{t as _}from"./Badge-DiccZCC_.js";import{t as v}from"./Button-D1Rp2Xe1.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-1.5`},x={key:0,class:`text-xs font-semibold tracking-label text-muted uppercase`},S={class:`flex flex-col gap-1.5`},C={key:0,class:`text-sm text-muted tracking-label`},w={class:`flex flex-col gap-0.5`},T={class:`text-xs tracking-label text-muted uppercase`},E={class:`font-display text-2xl font-normal text-brand leading-none`},D={key:0,class:`text-xs text-muted mt-1`},O={key:1,class:`text-xs font-semibold tracking-label uppercase text-danger mt-1`},k=3,A={__name:`BundleCard`,props:{name:{type:String,required:!0},items:{type:Array,required:!0},price:{type:Number,required:!0},memberPrice:{type:Number,default:null},usage:{type:String,default:``},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},layout:{type:String,default:`vertical`,validator:e=>[`vertical`,`horizontal`].includes(e)},inStock:{type:Boolean,default:!0},currency:{type:String,default:`€`},href:{type:String,default:``}},emits:[`add`],setup(A){let j=A,{t:M}=g(),N={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},P=l(()=>N[j.tone]);function F(e){return`${j.currency} ${e.toFixed(2).replace(`.`,`,`)}`}let I=l(()=>F(j.price)),L=l(()=>j.memberPrice==null?``:F(j.memberPrice)),R=l(()=>j.items.slice(0,k)),z=l(()=>Math.max(0,j.items.length-k));return(l,g)=>(e(),p(`article`,{class:m([`group flex overflow-hidden rounded-md border transition-all duration-base ease-out`,A.layout===`horizontal`?`flex-col md:flex-row`:`flex-col`,P.value.surface,P.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(e(),i(n(A.href?`a`:`div`),{href:A.href||null,class:m([`relative block overflow-hidden`,A.layout===`horizontal`?`aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]`:`aspect-[4/3]`,P.value.media])},{default:o(()=>[A.badge?(e(),i(_,{key:0,variant:A.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:o(()=>[u(a(A.badge),1)]),_:1},8,[`variant`])):s(``,!0),f(`img`,{src:A.image,alt:A.imageAlt||A.name,loading:`lazy`,decoding:`async`,class:m([`absolute inset-0 w-full h-full object-contain transition-transform duration-slow ease-out group-hover:scale-105`,A.layout===`horizontal`?`p-6 md:p-5`:`p-8`])},null,10,y)]),_:1},8,[`href`,`class`])),f(`div`,{class:m([`flex flex-col gap-4 p-6`,A.layout===`horizontal`?`md:p-6 md:flex-1`:``])},[f(`div`,b,[A.usage?(e(),p(`span`,x,a(A.usage),1)):s(``,!0),(e(),i(n(A.href?`a`:`h3`),{href:A.href||null,class:m([`font-display text-xl font-normal leading-tight text-ink`,A.href?`hover:text-brand transition-colors duration-base`:``])},{default:o(()=>[u(a(A.name),1)]),_:1},8,[`href`,`class`]))]),f(`ul`,S,[(e(!0),p(d,null,r(R.value,t=>(e(),p(`li`,{key:t,class:`text-sm text-ink/80 leading-relaxed`},a(t),1))),128)),z.value>0?(e(),p(`li`,C,`+ `+a(z.value)+` `+a(t(M)(`bundles.card.moreItems`)),1)):s(``,!0)]),f(`div`,{class:m([`mt-auto pt-4 border-t border-line flex gap-3`,A.layout===`horizontal`?`flex-col sm:flex-row sm:items-end sm:justify-between`:`flex-col`])},[f(`div`,w,[f(`span`,T,a(t(M)(`bundles.card.priceLabel`)),1),f(`span`,E,a(I.value),1),L.value?(e(),p(`span`,D,a(t(M)(`bundles.card.memberPrefix`))+` `+a(L.value),1)):s(``,!0),A.inStock?s(``,!0):(e(),p(`span`,O,a(t(M)(`ds.product.outOfStock`)),1))]),c(v,{variant:`primary`,size:`md`,block:A.layout===`vertical`,disabled:!A.inStock,onClick:g[0]||=e=>l.$emit(`add`)},{before:o(()=>[c(h,{name:`plus`,size:16})]),default:o(()=>[u(` `+a(t(M)(`ds.buttons.addToCart`)),1)]),_:1},8,[`block`,`disabled`])],2)],2)],2))}};export{A as t};

dist/assets/BundleCard-U_CLQ_pL.js

@@ -0,0 +1 @@
+import{C as e,G as t,O as n,T as r,c as i,ft as a,j as o,l as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./Icon-BCo6-bGH.js";import{t as g}from"./i18n-VERRV-oN.js";import{t as _}from"./Badge-DiccZCC_.js";import{t as v}from"./Button-D1Rp2Xe1.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-1.5`},x={key:0,class:`text-xs font-semibold tracking-label text-muted uppercase`},S={class:`flex flex-col gap-1.5`},C={key:0,class:`text-sm text-muted tracking-label`},w={class:`flex flex-col gap-0.5`},T={class:`text-xs tracking-label text-muted uppercase`},E={class:`font-display text-2xl font-normal text-brand leading-none`},D={key:0,class:`text-xs text-muted mt-1`},O={key:1,class:`text-xs font-semibold tracking-label uppercase text-danger mt-1`},k=3,A={__name:`BundleCard`,props:{name:{type:String,required:!0},items:{type:Array,required:!0},price:{type:Number,required:!0},memberPrice:{type:Number,default:null},usage:{type:String,default:``},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},layout:{type:String,default:`vertical`,validator:e=>[`vertical`,`horizontal`].includes(e)},inStock:{type:Boolean,default:!0},currency:{type:String,default:`€`},href:{type:String,default:``},imageFit:{type:String,default:`contain`,validator:e=>[`contain`,`cover`].includes(e)}},emits:[`add`],setup(A){let j=A,{t:M}=g(),N={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},P=l(()=>N[j.tone]);function F(e){return`${j.currency} ${e.toFixed(2).replace(`.`,`,`)}`}let I=l(()=>F(j.price)),L=l(()=>j.memberPrice==null?``:F(j.memberPrice)),R=l(()=>j.items.slice(0,k)),z=l(()=>Math.max(0,j.items.length-k));return(l,g)=>(e(),p(`article`,{class:m([`group flex overflow-hidden rounded-md border transition-all duration-base ease-out`,A.layout===`horizontal`?`flex-col md:flex-row`:`flex-col`,P.value.surface,P.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(e(),i(n(A.href?`a`:`div`),{href:A.href||null,class:m([`relative block overflow-hidden`,A.layout===`horizontal`?`aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]`:`aspect-[4/3]`,P.value.media])},{default:o(()=>[A.badge?(e(),i(_,{key:0,variant:A.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:o(()=>[u(a(A.badge),1)]),_:1},8,[`variant`])):s(``,!0),f(`img`,{src:A.image,alt:A.imageAlt||A.name,loading:`lazy`,decoding:`async`,class:m([`absolute inset-0 w-full h-full transition-transform duration-slow ease-out group-hover:scale-105`,A.imageFit===`cover`?`object-cover`:`object-contain `+(A.layout===`horizontal`?`p-6 md:p-5`:`p-8`)])},null,10,y)]),_:1},8,[`href`,`class`])),f(`div`,{class:m([`flex flex-col gap-4 p-6`,A.layout===`horizontal`?`md:p-6 md:flex-1`:``])},[f(`div`,b,[A.usage?(e(),p(`span`,x,a(A.usage),1)):s(``,!0),(e(),i(n(A.href?`a`:`h3`),{href:A.href||null,class:m([`font-display text-xl font-normal leading-tight text-ink`,A.href?`hover:text-brand transition-colors duration-base`:``])},{default:o(()=>[u(a(A.name),1)]),_:1},8,[`href`,`class`]))]),f(`ul`,S,[(e(!0),p(d,null,r(R.value,t=>(e(),p(`li`,{key:t,class:`text-sm text-ink/80 leading-relaxed`},a(t),1))),128)),z.value>0?(e(),p(`li`,C,`+ `+a(z.value)+` `+a(t(M)(`bundles.card.moreItems`)),1)):s(``,!0)]),f(`div`,{class:m([`mt-auto pt-4 border-t border-line flex gap-3`,A.layout===`horizontal`?`flex-col sm:flex-row sm:items-end sm:justify-between`:`flex-col`])},[f(`div`,w,[f(`span`,T,a(t(M)(`bundles.card.priceLabel`)),1),f(`span`,E,a(I.value),1),L.value?(e(),p(`span`,D,a(t(M)(`bundles.card.memberPrefix`))+` `+a(L.value),1)):s(``,!0),A.inStock?s(``,!0):(e(),p(`span`,O,a(t(M)(`ds.product.outOfStock`)),1))]),c(v,{variant:`primary`,size:`md`,block:A.layout===`vertical`,disabled:!A.inStock,onClick:g[0]||=e=>l.$emit(`add`)},{before:o(()=>[c(h,{name:`plus`,size:16})]),default:o(()=>[u(` `+a(t(M)(`ds.buttons.addToCart`)),1)]),_:1},8,[`block`,`disabled`])],2)],2)],2))}};export{A as t};

dist/assets/BundleCardSection-ShpbRdSI.js

@@ -1,4 +1,4 @@
-import{B as e,C as t,G as n,c as r,ft as i,j as a,l as o,m as s,p as c,s as l,u,y as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./i18n-VERRV-oN.js";import{t as p}from"./BundleCard-DlVtWgvc.js";import{t as m}from"./SectionShell-osccWl4j.js";var h={class:`eyebrow mb-5`},g={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},_={key:0,class:`mt-5 text-sm text-muted`},v={class:`font-mono text-[12px]`},y={class:`grid gap-6`},b={class:`eyebrow mb-5`},x={class:`grid sm:grid-cols-2 gap-6`},S={class:`eyebrow mb-5`},C=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,w={__name:`BundleCardSection`,setup(w){let{t:T}=f(),E=e(``);function D(e){E.value=e,setTimeout(()=>{E.value===e&&(E.value=``)},2e3)}let O={name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:C,imageAlt:`Haushalts-Bundle`},k={...O,items:[...O.items,`1× Holste Wasch-Soda 500 g`,`1× Allzweckreiniger 750 ml`]};return(e,f)=>(t(),r(m,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.bundleCard.title`),description:n(T)(`ds.bundleCard.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,h,i(n(T)(`ds.heading.default`)),1),l(`div`,g,[s(p,d(O,{onAdd:f[0]||=e=>D(`default`)}),null,16),s(p,d(O,{badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[1]||=e=>D(`bestseller`)}),null,16),s(p,d(O,{tone:`cream`,onAdd:f[2]||=e=>D(`cream`)}),null,16)]),E.value?(t(),u(`p`,_,[c(i(n(T)(`ds.product.added`))+`: `,1),l(`code`,v,i(E.value),1)])):o(``,!0)]),l(`section`,null,[f[5]||=l(`h2`,{class:`eyebrow mb-5`},`Horizontal layout`,-1),f[6]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},[c(` Passed as `),l(`code`,{class:`font-mono text-[12px]`},`layout="horizontal"`),c(`. From `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` up the media takes ~38% of the row and the body fills the rest, with the CTA inlined next to the price block. Below `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` it collapses back to vertical. `)],-1),l(`div`,y,[s(p,d(O,{layout:`horizontal`,badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[3]||=e=>D(`horizontal`)}),null,16)])]),l(`section`,null,[l(`h2`,b,i(n(T)(`ds.heading.states`)),1),f[7]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},` Same bundle across both cards — only the state being demonstrated changes. `,-1),l(`div`,x,[s(p,d(O,{"in-stock":!1}),null,16),s(p,d(k,{onAdd:f[4]||=e=>D(`overflow`)}),null,16)]),f[8]||=l(`p`,{class:`mt-3 text-sm text-muted max-w-2xl`},[c(` More than three items collapse the tail into a `),l(`code`,{class:`font-mono text-[12px]`},`+ N weitere`),c(` line so the card stays scannable. `)],-1)]),l(`section`,null,[l(`h2`,S,i(n(T)(`ds.heading.usage`)),1),f[9]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<BundleCard
+import{B as e,C as t,G as n,c as r,ft as i,j as a,l as o,m as s,p as c,s as l,u,y as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./i18n-VERRV-oN.js";import{t as p}from"./BundleCard-U_CLQ_pL.js";import{t as m}from"./SectionShell-osccWl4j.js";var h={class:`eyebrow mb-5`},g={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},_={key:0,class:`mt-5 text-sm text-muted`},v={class:`font-mono text-[12px]`},y={class:`grid gap-6`},b={class:`eyebrow mb-5`},x={class:`grid sm:grid-cols-2 gap-6`},S={class:`eyebrow mb-5`},C=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,w={__name:`BundleCardSection`,setup(w){let{t:T}=f(),E=e(``);function D(e){E.value=e,setTimeout(()=>{E.value===e&&(E.value=``)},2e3)}let O={name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:C,imageAlt:`Haushalts-Bundle`},k={...O,items:[...O.items,`1× Holste Wasch-Soda 500 g`,`1× Allzweckreiniger 750 ml`]};return(e,f)=>(t(),r(m,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.bundleCard.title`),description:n(T)(`ds.bundleCard.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,h,i(n(T)(`ds.heading.default`)),1),l(`div`,g,[s(p,d(O,{onAdd:f[0]||=e=>D(`default`)}),null,16),s(p,d(O,{badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[1]||=e=>D(`bestseller`)}),null,16),s(p,d(O,{tone:`cream`,onAdd:f[2]||=e=>D(`cream`)}),null,16)]),E.value?(t(),u(`p`,_,[c(i(n(T)(`ds.product.added`))+`: `,1),l(`code`,v,i(E.value),1)])):o(``,!0)]),l(`section`,null,[f[5]||=l(`h2`,{class:`eyebrow mb-5`},`Horizontal layout`,-1),f[6]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},[c(` Passed as `),l(`code`,{class:`font-mono text-[12px]`},`layout="horizontal"`),c(`. From `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` up the media takes ~38% of the row and the body fills the rest, with the CTA inlined next to the price block. Below `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` it collapses back to vertical. `)],-1),l(`div`,y,[s(p,d(O,{layout:`horizontal`,badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[3]||=e=>D(`horizontal`)}),null,16)])]),l(`section`,null,[l(`h2`,b,i(n(T)(`ds.heading.states`)),1),f[7]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},` Same bundle across both cards — only the state being demonstrated changes. `,-1),l(`div`,x,[s(p,d(O,{"in-stock":!1}),null,16),s(p,d(k,{onAdd:f[4]||=e=>D(`overflow`)}),null,16)]),f[8]||=l(`p`,{class:`mt-3 text-sm text-muted max-w-2xl`},[c(` More than three items collapse the tail into a `),l(`code`,{class:`font-mono text-[12px]`},`+ N weitere`),c(` line so the card stays scannable. `)],-1)]),l(`section`,null,[l(`h2`,S,i(n(T)(`ds.heading.usage`)),1),f[9]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<BundleCard
   name="Haushalts-Bundle"
   usage="2–3× pro Quartal empfohlen"
   :items="[

dist/assets/BundlesPreview-XnI_1IOT.js

@@ -1 +1 @@
-import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a}from"./vue-router-Cyqru1db.js";import{t as o}from"./i18n-VERRV-oN.js";import{t as s}from"./Bundles-CDxxY_BR.js";var c={class:`min-h-screen bg-surface`},l={__name:`BundlesPreview`,setup(l){let{t:u}=o(),d=a(),f=r(()=>d.query.layout===`stacked`?`stacked`:`sidebar`),p=[{id:`haushalt`,name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,imageAlt:`Haushalts-Bundle mit Kaiser-Natron`,badge:`Bestseller`,badgeVariant:`accent`},{id:`waesche`,name:`Wäsche & Pflege`,usage:`1–2× pro Quartal`,items:[`1× Holste Wasch-Soda 500 g`,`1× Gazelle Wäschestärke 1 l`,`1× Linda Fleckenweg 200 ml`],price:22.9,memberPrice:19.47,image:`/products/holste-wasch-soda-500-g-beutel.webp`,imageAlt:`Wäsche & Pflege Bundle`},{id:`wohlfuehl`,name:`Wohlfühl-Bundle`,usage:`1× pro Quartal`,items:[`1× Kaiser-Natron Tabletten 100 g`,`1× Kaiser-Natron Bad 500 g`,`1× Kaiser-Natron Fußbad 500 g`],price:29.9,memberPrice:25.42,image:`/products/kaiser-natron-bad-500-g.webp`,imageAlt:`Wohlfühl-Bundle`}],m=r(()=>[u(`bundles.benefit.1.title`),u(`bundles.benefit.2.title`),u(`bundles.benefit.3.title`)]);return(r,a)=>(e(),i(`div`,c,[n(s,{layout:f.value,bundles:p,headline:t(u)(`bundles.headline.a`),"headline-em":t(u)(`bundles.headline.em`),sub:t(u)(`bundles.sub`),benefits:m.value,"join-cta":t(u)(`bundles.joinCta`)},null,8,[`layout`,`headline`,`headline-em`,`sub`,`benefits`,`join-cta`])]))}};export{l as default};
+import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a}from"./vue-router-Cyqru1db.js";import{t as o}from"./i18n-VERRV-oN.js";import{t as s}from"./Bundles-DBhinuKD.js";var c={class:`min-h-screen bg-surface`},l={__name:`BundlesPreview`,setup(l){let{t:u}=o(),d=a(),f=r(()=>d.query.layout===`stacked`?`stacked`:`sidebar`),p=[{id:`haushalt`,name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,imageAlt:`Haushalts-Bundle mit Kaiser-Natron`,badge:`Bestseller`,badgeVariant:`accent`},{id:`waesche`,name:`Wäsche & Pflege`,usage:`1–2× pro Quartal`,items:[`1× Holste Wasch-Soda 500 g`,`1× Gazelle Wäschestärke 1 l`,`1× Linda Fleckenweg 200 ml`],price:22.9,memberPrice:19.47,image:`/products/holste-wasch-soda-500-g-beutel.webp`,imageAlt:`Wäsche & Pflege Bundle`},{id:`wohlfuehl`,name:`Wohlfühl-Bundle`,usage:`1× pro Quartal`,items:[`1× Kaiser-Natron Tabletten 100 g`,`1× Kaiser-Natron Bad 500 g`,`1× Kaiser-Natron Fußbad 500 g`],price:29.9,memberPrice:25.42,image:`/products/kaiser-natron-bad-500-g.webp`,imageAlt:`Wohlfühl-Bundle`}],m=r(()=>[u(`bundles.benefit.1.title`),u(`bundles.benefit.2.title`),u(`bundles.benefit.3.title`)]);return(r,a)=>(e(),i(`div`,c,[n(s,{layout:f.value,bundles:p,headline:t(u)(`bundles.headline.a`),"headline-em":t(u)(`bundles.headline.em`),sub:t(u)(`bundles.sub`),benefits:m.value,"join-cta":t(u)(`bundles.joinCta`)},null,8,[`layout`,`headline`,`headline-em`,`sub`,`benefits`,`join-cta`])]))}};export{l as default};

dist/assets/HomePage-BhQtJF4F.css

@@ -1 +0,0 @@
-@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-5982746d]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .4s 1.85s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-5982746d]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-5982746d]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-5982746d],.right-m[data-v-5982746d]{fill:#b5d8b6}.mound-m[data-v-5982746d]{fill:#fff}.layer.left-m[data-v-5982746d]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-5982746d]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-5982746d]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-5982746d]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-5982746d],.brand-hero.go .layer.right-m[data-v-5982746d]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-5982746d],.brand-hero.go .brand-hero__copy[data-v-5982746d]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-5982746d],.layer.right-m[data-v-5982746d],.layer.mound-m[data-v-5982746d],.brand-hero__copy[data-v-5982746d]{opacity:1!important;transition:none!important;transform:none!important}}

dist/assets/HomePage-EMteu7_e.css

@@ -0,0 +1 @@
+@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-e9619974]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .7s 1.15s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-e9619974]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-e9619974]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-e9619974],.right-m[data-v-e9619974]{fill:#b5d8b6}.mound-m[data-v-e9619974]{fill:#fff}.layer.left-m[data-v-e9619974]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-e9619974]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-e9619974]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-e9619974]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-e9619974],.brand-hero.go .layer.right-m[data-v-e9619974]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-e9619974],.brand-hero.go .brand-hero__copy[data-v-e9619974]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-e9619974],.layer.right-m[data-v-e9619974],.layer.mound-m[data-v-e9619974],.brand-hero__copy[data-v-e9619974]{opacity:1!important;transition:none!important;transform:none!important}}

dist/index.html

@@ -12,7 +12,7 @@
       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-C0u67XXb.js"></script>
+    <script type="module" crossorigin src="/assets/index-D0cEQhQL.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DTXUv7Wx.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CXLmyuFK.js">

src/design-system/components/BrandHero.vue

@@ -202,7 +202,10 @@ const shopLabel = t('nav.shop')
     #000 calc(100% - var(--hero-feather)),
     transparent 100%
   );
-  transition: --hero-feather 400ms ease 1850ms;
+  /* Synced with the tagline fade-in below (700ms ease 1150ms) so
+     the side feathers dissolve in the same beat as the copy
+     resolves — one smooth landing instead of two staggered ones. */
+  transition: --hero-feather 700ms ease 1150ms;
 }
 
 .brand-hero.go .brand-hero__svg--bg {

src/design-system/components/BundleCard.vue

@@ -39,6 +39,18 @@ const props = defineProps({
   inStock: { type: Boolean, default: true },
   currency: { type: String, default: '€' },
   href: { type: String, default: '' },
+  // How the bundle artwork sits inside the media area:
+  //   · `contain` (default) — full artwork visible with breathing
+  //     padding around it. Works for line-up product silhouettes
+  //     where cropping would lose information.
+  //   · `cover` — fills the media area edge-to-edge, may crop edges.
+  //     Use when the artwork is a styled scene that benefits from
+  //     full-bleed framing (e.g. lifestyle bundle photography).
+  imageFit: {
+    type: String,
+    default: 'contain',
+    validator: (v) => ['contain', 'cover'].includes(v),
+  },
 })
 
 defineEmits(['add'])
@@ -100,8 +112,10 @@ const extraCount = computed(() => Math.max(0, props.items.length - MAX_ITEMS))
         loading="lazy"
         decoding="async"
         :class="[
-          'absolute inset-0 w-full h-full object-contain transition-transform duration-slow ease-out group-hover:scale-105',
-          layout === 'horizontal' ? 'p-6 md:p-5' : 'p-8',
+          'absolute inset-0 w-full h-full transition-transform duration-slow ease-out group-hover:scale-105',
+          imageFit === 'cover'
+            ? 'object-cover'
+            : 'object-contain ' + (layout === 'horizontal' ? 'p-6 md:p-5' : 'p-8'),
         ]"
       />
     </component>

src/pages/HomePage.vue

@@ -158,7 +158,7 @@ const bundles = [
     ],
     price: 24.9,
     memberPrice: 21.17,
-    image: '/bundles/background/Haushalts-Bundle.webp',
+    image: '/bundles/transparent/haushalts-bundle.webp',
     imageAlt: 'Haushalts-Bundle mit Kaiser-Natron',
     badge: 'Bestseller',
     badgeVariant: 'accent',
@@ -170,7 +170,7 @@ const bundles = [
     items: ['1× Holste Wasch-Soda 500 g', '1× Gazelle Wäschestärke 1 l', '1× Linda Fleckenweg 200 ml'],
     price: 22.9,
     memberPrice: 19.47,
-    image: '/bundles/background/Wäsche & Pflege-Bundle.webp',
+    image: '/bundles/transparent/waesche-pflege-bundle.webp',
     imageAlt: 'Wäsche & Pflege Bundle',
     badge: '',
     badgeVariant: 'accent',
@@ -182,7 +182,7 @@ const bundles = [
     items: ['1× Kaiser-Natron Tabletten 100 g', '1× Kaiser-Natron Bad 500 g', '1× Kaiser-Natron Fußbad 500 g'],
     price: 29.9,
     memberPrice: 25.42,
-    image: '/bundles/background/Wohlfühl_Bundle.webp',
+    image: '/bundles/transparent/wohlfuehl-bundle.webp',
     imageAlt: 'Wohlfühl-Bundle mit Kaiser-Natron Bad',
     badge: '',
     badgeVariant: 'accent',