Fix more mobile responsive issues: Hero, arrows, cart button, checkmarks, modal

- Newsletter card icon: fixed an aspect-ratio distortion bug (w-16 maps
  to this project's fluid --spacing-16, which floors to 40px below
  768px, paired with a fixed 55px height — squished the icon on
  mobile). Same root cause existed in NewsletterModal's envelope icon;
  that one's now just hidden below md: instead per feedback.
- Hero: subtitle sized down and CTA checkmark icon scaled to match
  below lg:, social proof text always wraps below the avatars there
  instead of only when it doesn't fit.
- Werkzeuge connector arrows (todo-cards/newsletter/challenge
  HowItWorks): object-contain added — the SVG has
  preserveAspectRatio="none" and was stretching to fill the square
  mobile box instead of keeping its thin-arrow shape.
- Challenge bottom CTA: icon now stacks above the copy, centered, below
  lg: to match the Home Newsletter card's pattern.
- Homepage Werkzeuge icons: smaller below md: to match the (fluid-floor)
  text size next to them.
- Blog detail "Passend dazu" card: the fixed w-[19rem] title column plus
  "Entdecken" sharing its row overflowed on mobile; stacked below sm:
  instead, with a little top margin on "Entdecken".
- Todo-Karten checklist checkmarks: recolored brand-orange (icon-check
  .svg's fill lives in an internal CSS var that can't be overridden from
  outside an <img>-loaded SVG, so switched to an inline SVG) and
  top-aligned instead of vertically centered.
- AddToCartButton: added whitespace-nowrap to the stacked-label grid
  (used to reserve button width across all possible label texts) — one
  of those labels wrapping to two lines on a narrow w-full button was
  inflating the row height for whichever label is actually showing,
  leaving a tall empty gap under "Ausverkauft".

app/components/Hero.tsx

@@ -47,8 +47,10 @@ export function Hero() {
             </PopIn>
           </p>
 
-          {/* Subheading */}
-          <p className="font-semibold leading-[2.375rem] min-w-full shrink-0 text-text-primary text-h-emphasis w-[min-content] [word-break:break-word] not-italic">
+          {/* Subheading — smaller fixed size below lg:, text-h-emphasis's
+              own 20px floor read too large next to the now-smaller mobile
+              CTA text. leading shrinks to match, not just font-size. */}
+          <p className="font-semibold leading-[1.75rem] lg:leading-[2.375rem] min-w-full shrink-0 text-text-primary text-[1rem] lg:text-h-emphasis w-[min-content] [word-break:break-word] not-italic">
             Für Menschen mit Familie, Verantwortung und zu wenig Zeit
           </p>
 
@@ -67,17 +69,18 @@ export function Hero() {
             <span className="font-semibold leading-[2.375rem] text-text-primary text-[0.8125rem] lg:text-h3 whitespace-nowrap not-italic">
               Starte mit der 7-Tage-Challenge
             </span>
-            <div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
-              <Image alt="" src="/icon-check.svg" fill sizes="26px" />
+            {/* Scaled down to match the smaller mobile CTA text (same
+                ~0.76 aspect ratio as the lg: size), full size again from
+                lg: up alongside text-h3. */}
+            <div className="relative h-[0.8125rem] w-[1.0625rem] lg:h-[1.1875rem] lg:w-[1.5625rem] shrink-0">
+              <Image alt="" src="/icon-check.svg" fill sizes="(min-width: 1024px) 26px, 17px" />
             </div>
           </Link>
 
-          {/* Social proof — flex-wrap + justify-center rather than a fixed
-              breakpoint: at narrow widths avatars+text don't fit on one
-              row, so the text wraps to its own line and both lines end up
-              centered; from lg: up (real column width) it still fits on
-              one row exactly as before, so nothing changes there. */}
-          <div className="flex flex-wrap gap-3 items-center justify-center overflow-clip shrink-0 w-full">
+          {/* Social proof — always avatars-then-text on two lines below
+              lg: (not just when it happens to overflow), single row again
+              from lg: up where the real column width fits it fine. */}
+          <div className="flex flex-col lg:flex-row gap-3 items-center justify-center overflow-clip shrink-0 w-full">
             {/* Avatars — gap 2px, not overlapping */}
             <div className="flex gap-[0.125rem] items-center shrink-0">
               {["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (