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

@@ -55,7 +55,14 @@ export function Newsletter({
               width leaves real room. */}
           <div className="flex flex-col items-center gap-4 text-center w-full md:flex-row md:items-start md:gap-8 md:text-left md:w-[var(--newsletter-copy-width)] md:py-4 md:shrink-0">
 
-            {/* Decorative envelope icon, tilted -4° as per design */}
+            {/* Decorative envelope icon, tilted -4° as per design.
+                w-[4rem], not w-16 — this project's --spacing-16 is a
+                fluid token (floors to 40px below 768px, see globals.css),
+                so pairing w-16 with the fixed h-[3.438rem] squished the
+                icon to a 40:55 box on mobile instead of the SVG's native
+                64:55.0096 (it has preserveAspectRatio="none", so it
+                actually stretches to whatever box it's given — fixed
+                2026-07-24). */}
             <div className="flex items-center justify-center shrink-0 w-[4.23rem] h-[3.71rem]">
               <div className="-rotate-4 -scale-y-100">
                 <Image
@@ -63,7 +70,7 @@ export function Newsletter({
                   src="/newsletter-icon.svg"
                   width={64}
                   height={55}
-                  className="w-16 h-[3.438rem] block"
+                  className="w-[4rem] h-[3.438rem] block"
                 />
               </div>
             </div>