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/components/Hero.tsx

@@ -55,9 +55,19 @@ export function Hero() {
           {/* CTA */}
           <Link
             href="/challenge"
-            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
+            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
           >
-            <span className="font-semibold leading-[2.375rem] text-text-primary text-h3 whitespace-nowrap not-italic">
+            {/* whitespace-nowrap only from lg: up, where the 5-col text
+                column has room for the full phrase on one line. Below
+                lg: (stacked, narrower column) nowrap forced this button
+                wider than the column itself, overflowing on mobile —
+                fixed 2026-07-24 by letting it wrap to two lines instead
+                (leading-[2.375rem] was already sized for that). max-w-full
+                on the Link above is what actually makes the wrap happen —
+                without it, a flex item with items-start siblings just
+                grows to fit the unwrapped text instead of respecting the
+                column width. */}
+            <span className="font-semibold leading-[2.375rem] text-text-primary text-h3 lg:whitespace-nowrap not-italic">
               Starte mit der 7-Tage-Challenge
             </span>
             <div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">