home: swap Bundles + cream banner order

Bundles now sits directly under the Pulver hero (surface band), with
the cream "ein Pulver, hundert Anwendungen" banner below it. Wave
dividers re-routed brand → surface → cream → brand to keep the
colour rhythm continuous across the new ordering.

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

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-D0cEQhQL.js"></script>
+    <script type="module" crossorigin src="/assets/index-BU2-m5yd.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/pages/HomePage.vue

@@ -385,20 +385,51 @@ onBeforeUnmount(() => {
     </template>
   </Hero>
 
-  <!-- Wave brand → cream for the second-fold cream banner. -->
+  <!-- Wave brand → surface — sets up the Bundles section, which now
+       sits directly under the Pulver hero (banner + bundles swapped). -->
   <svg
     aria-hidden="true"
     class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-brand"
     viewBox="0 0 1440 64"
     preserveAspectRatio="none"
   >
-    <rect width="1440" height="64" fill="var(--color-cream)" />
+    <rect width="1440" height="64" fill="var(--color-surface)" />
     <path
       d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
       fill="var(--color-brand)"
     />
   </svg>
 
+  <!-- Bundles — surface (warm off-white). Three bundles, three items
+       per bundle, three benefits. Mobile stacks the cards; md+ flips
+       to a one-at-a-time scroll-snap carousel. -->
+  <Bundles
+    class="-mt-px"
+    layout="stacked"
+    :bundles="bundles"
+    :headline="bundlesCopy.headline"
+    :headline-em="bundlesCopy.headlineEm"
+    :sub="bundlesCopy.sub"
+    :benefits="bundlesCopy.benefits"
+    :join-cta="bundlesCopy.joinCta"
+    @add="onBundleAdd"
+    @join="onBundleJoin"
+  />
+
+  <!-- Wave surface → cream into the second-fold cream banner. -->
+  <svg
+    aria-hidden="true"
+    class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-surface"
+    viewBox="0 0 1440 64"
+    preserveAspectRatio="none"
+  >
+    <rect width="1440" height="64" fill="var(--color-cream)" />
+    <path
+      d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
+      fill="var(--color-surface)"
+    />
+  </svg>
+
   <!-- Second-fold product banner — same Hero component, cream surface,
        split layout reversed so the product sits on the left. `compact`
        tightens the desktop media sizing so this section reads as a
@@ -425,53 +456,17 @@ onBeforeUnmount(() => {
     </template>
   </Hero>
 
-  <!-- Cream → surface wave between the second banner and the bundles
-       section. Same construction as the green→cream wave on the first
-       fold: solid rect fills the destination color (surface), a path
-       paints the wavy top in the source color (cream). `-mb-px` overlaps
-       the bundles section by a device pixel to hide hairline seams. -->
+  <!-- Wave cream → brand into the Revitalization section. -->
   <svg
     aria-hidden="true"
     class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-cream"
     viewBox="0 0 1440 64"
     preserveAspectRatio="none"
-  >
-    <rect width="1440" height="64" fill="var(--color-surface)" />
-    <path
-      d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
-      fill="var(--color-cream)"
-    />
-  </svg>
-
-  <!-- Bundles — surface (warm off-white) so the cream banner above and the
-       cream cards below both stand out as distinct layers. Three bundles,
-       three items per bundle, three benefits. Mobile stacks the cards;
-       md+ flips to a one-at-a-time scroll-snap carousel. -->
-  <Bundles
-    class="-mt-px"
-    layout="stacked"
-    :bundles="bundles"
-    :headline="bundlesCopy.headline"
-    :headline-em="bundlesCopy.headlineEm"
-    :sub="bundlesCopy.sub"
-    :benefits="bundlesCopy.benefits"
-    :join-cta="bundlesCopy.joinCta"
-    @add="onBundleAdd"
-    @join="onBundleJoin"
-  />
-
-  <!-- Surface → brand wave. rect is the destination (brand), path is the
-       source (surface) painted over the top of the wave. -->
-  <svg
-    aria-hidden="true"
-    class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-surface"
-    viewBox="0 0 1440 64"
-    preserveAspectRatio="none"
   >
     <rect width="1440" height="64" fill="var(--color-brand)" />
     <path
       d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
-      fill="var(--color-surface)"
+      fill="var(--color-cream)"
     />
   </svg>