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/todo-cards/components/Focus.tsx

@@ -9,6 +9,17 @@ const bullets = [
   "Inklusive Mini-Anleitung mit Tipps für den Start",
 ];
 
+// Inline, brand-orange stroke — same fix/reasoning as TodoKartenHero.tsx's
+// own IconCheck (icon-check.svg's fill can't be recolored from outside
+// the SVG when loaded via <img src>/next/image).
+function IconCheck() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-0.5">
+      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 export function Focus() {
   return (
     <section className="w-full bg-bg-base flex flex-col lg:flex-row gap-10 lg:gap-16 items-center py-12 md:py-16 px-[var(--layout-padding-x)]">
@@ -33,8 +44,8 @@ export function Focus() {
         </p>
         <ul className="flex flex-col gap-3 items-start w-full">
           {bullets.map((b) => (
-            <li key={b} className="flex gap-[0.625rem] items-center w-full">
-              <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0" />
+            <li key={b} className="flex gap-[0.625rem] items-start w-full">
+              <IconCheck />
               <span className="flex-1 font-semibold text-body text-text-primary">{b}</span>
             </li>
           ))}

app/todo-cards/components/HowItWorks.tsx

@@ -83,12 +83,18 @@ export function HowItWorks() {
               // — same margin-based centering technique as Challenge's
               // step connector, not just the same icon asset.
               <div className="flex items-center justify-center shrink-0 md:mt-[1.625rem]">
+                {/* object-contain — the SVG has preserveAspectRatio="none"
+                    (viewBox 40x12) and stretches to fill whatever box
+                    it's given; the square w-6 h-6 mobile box squished it
+                    into a blob instead of a thin arrow. contain keeps its
+                    real ratio, letterboxed inside the (still square, so
+                    rotate-90 doesn't shift its footprint) box. */}
                 <Image
                   alt=""
                   src="/icon-arrow-connector.svg"
                   width={24}
                   height={24}
-                  className="w-6 h-6 rotate-90 md:w-10 md:h-3 md:rotate-0"
+                  className="w-6 h-6 object-contain rotate-90 md:w-10 md:h-3 md:rotate-0"
                 />
               </div>
             )}

app/todo-cards/components/TodoKartenHero.tsx

@@ -12,6 +12,19 @@ const checklist = [
   "Minimalistisch, analog, effektiv",
 ];
 
+// Inline, brand-orange stroke — icon-check.svg's fill is hardcoded to
+// #222221 via an internal CSS var that only resolves inside the SVG's own
+// document, so it can't be recolored from the host page when loaded via
+// <img src>/next/image. Same simple checkmark path as Challenge's own
+// Check() component, for the same orange-checkmark look (fixed 2026-07-24).
+function IconCheck() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-0.5">
+      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 // Same "todo-karten" product Pricing.tsx reads further down the page —
 // this is just a compact early teaser so the hero's CTA isn't asking for
 // a click without saying what it costs. Delivery time is repeated here too
@@ -94,8 +107,8 @@ export async function TodoKartenHero() {
 
             <ul className="flex flex-col gap-3 items-start w-full">
               {checklist.map((item) => (
-                <li key={item} className="flex gap-[0.625rem] items-center w-full">
-                  <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0" />
+                <li key={item} className="flex gap-[0.625rem] items-start w-full">
+                  <IconCheck />
                   <span className="flex-1 text-body text-text-primary">{item}</span>
                 </li>
               ))}