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

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">

app/components/Navbar.tsx

@@ -475,8 +475,18 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean }
               (below lg). Grouped so spacing stays consistent as individual
               children hide/show across the three breakpoint tiers. */}
           <div className="flex items-center gap-2">
-            <AccountLink />
-            <CartLink />
+            {/* No gap between these two — each is already a 44px touch
+                target with the icon centered inside, so even gap-0 here
+                still leaves ~20px of visual space between the actual
+                glyphs. The outer gap-2 is what separates this pair from
+                the CTA-buttons/hamburger group that follows, and stays
+                untouched. Fixed 2026-07-24: gap-2 here on top of that
+                built-in padding read as too much space on mobile, where
+                these two icons are the only always-visible controls. */}
+            <div className="flex items-center">
+              <AccountLink />
+              <CartLink />
+            </div>
 
             {/* CTA buttons — inline from md (768px) up, i.e. through both
                 "Collapsed-CTA" and full Desktop tiers */}