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/blog/[slug]/page.tsx

@@ -120,27 +120,34 @@ export default async function BlogDetailPage({
           {post.relatedProduct?.href && (
             <Link
               href={post.relatedProduct.href}
-              className="group flex items-center gap-6 border border-border rounded-md px-9 py-7 hover:border-brand transition-colors"
+              className="group flex items-center gap-4 sm:gap-6 border border-border rounded-md px-5 py-5 sm:px-9 sm:py-7 hover:border-brand transition-colors"
             >
               <div className="relative w-16 h-[4.6875rem] shrink-0 rounded-sm overflow-hidden">
                 <Image alt="" src={post.relatedProduct.image} fill sizes="64px" className="object-cover" />
               </div>
               <div className="flex-1 min-w-0 flex flex-col gap-2.5">
                 <p className="font-bold text-[0.8125rem] text-brand">Passend dazu:</p>
-                <div className="flex items-end justify-between gap-4 w-full">
-                  {/* w-[19rem] (305px) — matches Figma's title-col exactly,
-                      so the description wraps at the same point instead of
-                      stretching out to fill the space before "Entdecken". */}
-                  <div className="flex flex-col gap-2 items-start w-[19rem] shrink-0">
+                {/* Stacked below sm: — the fixed w-[19rem] title column plus
+                    "Entdecken" on the same row overflowed a mobile-width
+                    card (fixed 2026-07-24). "Entdecken" wraps to its own
+                    line with a little space above it; back to the
+                    side-by-side row (matching Figma) from sm: up, where
+                    there's room for both. */}
+                <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 w-full">
+                  {/* w-[19rem] (305px) only from sm: — matches Figma's
+                      title-col exactly there, so the description wraps at
+                      the same point instead of stretching out to fill the
+                      space before "Entdecken"; full width below sm:. */}
+                  <div className="flex flex-col gap-2 items-start w-full sm:w-[19rem] sm:shrink-0">
                     <p
-                      className="font-semibold text-[1.375rem] text-text-primary whitespace-nowrap"
+                      className="font-semibold text-[1.375rem] text-text-primary sm:whitespace-nowrap"
                       style={{ fontFamily: "var(--font-lora)" }}
                     >
                       {post.relatedProduct.name}
                     </p>
                     <p className="text-[0.9375rem] text-text-muted leading-[1.45]">{post.relatedProduct.description}</p>
                   </div>
-                  <span className="flex items-center gap-1.5 font-bold text-[0.875rem] text-text-primary whitespace-nowrap">
+                  <span className="flex items-center gap-1.5 font-bold text-[0.875rem] text-text-primary whitespace-nowrap mt-1 sm:mt-0">
                     Entdecken
                     <svg
                       viewBox="0 0 20 20"