Fix three mobile layout issues on the homepage

- Hero CTA: whitespace-nowrap forced the button as wide as the full
  32-char phrase, overflowing the stacked mobile column. Now wraps to
  two lines below lg:, single line from lg: up where there's room.
- Navbar: the account/cart icons are 44px touch targets with the glyph
  centered inside, so the outer gap-2 read as too much space on top of
  that padding. Grouped them with no gap between just the two.
- Divider: "Klarheit -> Fokus -> Entlastung" plus its connector icons
  needs ~550px to fit one row even at the site's 768px fluid floor, far
  more than a phone's ~310px content width. Added a component-scoped
  --divider-word-size (independent from --text-h2) plus a <640px
  override that shrinks the words/icons/gaps together.

app/globals.css

@@ -141,6 +141,35 @@
   --divider-sparkle-h: clamp(2.0625rem, 1.5554rem + 1.0565vw, 2.50625rem);
   --divider-sparkle-inner-w: clamp(1.4375rem, 1.09875rem + 0.706vw, 1.734rem);
   --divider-sparkle-inner-h: clamp(1.9375rem, 1.4375rem + 1.0417vw, 2.375rem);
+  /* Own token, mirrors --text-h2's clamp() exactly rather than the Word
+     component reading var(--text-h2) directly — that's what lets the
+     mobile override below shrink just this component's words without
+     touching every other text-h2 heading site-wide. */
+  --divider-word-size: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
+}
+
+/* This project's fluid() scale (see fluid.ts) is calibrated for the
+   768-1440px Tablet-Desktop range and floors out at the 768px value for
+   any narrower viewport (clamp()'s MIN bound) — by design, see the other
+   fluid tokens above. Divider is the one spot that floor doesn't work:
+   the "Klarheit → Fokus → Entlastung" phrase plus its connector icons
+   needs ~550px of width to lay out on one row even at the 768px floor
+   size, far more than a phone's ~310px content width. Below Tailwind's
+   sm: breakpoint, shrink these tokens further so the phrase gets much
+   closer to fitting on one row instead of stacking into three separate
+   centered lines (see Divider.tsx's gap-x-3/gap-3 mobile overrides,
+   same breakpoint). Scoped to these component-only tokens, not
+   --text-h2 itself. */
+@media (max-width: 639px) {
+  :root {
+    --divider-word-size: 1.125rem;
+    --divider-arrow-w: 1.125rem;
+    --divider-arrow-h: 0.3125rem;
+    --divider-sparkle-w: 0.875rem;
+    --divider-sparkle-h: 1.15rem;
+    --divider-sparkle-inner-w: 0.8rem;
+    --divider-sparkle-inner-h: 1.075rem;
+  }
 }
 
 html {