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/Divider.tsx

@@ -4,7 +4,7 @@ import { Reveal } from "./Reveal";
 function Word({ children }: { children: string }) {
   return (
     <p
-      className="font-bold leading-normal text-text-primary text-h2 whitespace-nowrap"
+      className="font-bold leading-normal text-text-primary text-[length:var(--divider-word-size)] whitespace-nowrap"
       style={{ fontFamily: "var(--font-caveat)" }}
     >
       {children}
@@ -28,25 +28,30 @@ export function Divider() {
   return (
     <Reveal
       delay={0.3}
-      className="flex items-center justify-center flex-wrap gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
+      className="flex items-center justify-center flex-wrap gap-x-3 sm:gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
     >
 
       {/* Word + its trailing icon are grouped into one shrink-0 flex unit
           so flex-wrap only ever breaks BETWEEN pairs, never leaving an
           arrow stranded alone on its own line — the arrows are always
           visible now (previously hidden below md: entirely to sidestep
-          that exact problem), this fixes the root cause instead. */}
-      <div className="flex items-center gap-8 shrink-0">
+          that exact problem), this fixes the root cause instead.
+          gap-3/sm:gap-8 (not a flat gap-8): below 640px the words and
+          icons already shrink via --divider-word-size/--divider-arrow-*
+          (see globals.css), tightening the gaps too is what gets the
+          whole phrase close to fitting on one row instead of each pair
+          wrapping to its own line. */}
+      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
         <Word>Klarheit</Word>
         <Arrow />
       </div>
 
-      <div className="flex items-center gap-8 shrink-0">
+      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
         <Word>Fokus</Word>
         <Arrow />
       </div>
 
-      <div className="flex items-center gap-8 shrink-0">
+      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
         <Word>Entlastung</Word>
 
         {/* Sparkle icon — sizes now fluid (--divider-sparkle-*) to match