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/challenge/page.tsx

@@ -258,12 +258,15 @@ export default async function ChallengePage() {
                   // stacked below lg, this page's own structural
                   // breakpoint) rather than hidden below lg like before.
                   <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
+                    {/* object-contain — same preserveAspectRatio="none" fix
+                        as todo-cards/newsletter's HowItWorks; the square
+                        mobile box was stretching this into a blob. */}
                     <Image
                       alt=""
                       src="/icon-arrow-connector.svg"
                       width={24}
                       height={24}
-                      className="w-6 h-6 rotate-90 lg:w-10 lg:h-3 lg:rotate-0"
+                      className="w-6 h-6 object-contain rotate-90 lg:w-10 lg:h-3 lg:rotate-0"
                     />
                   </div>
                 ) : null,
@@ -334,8 +337,11 @@ export default async function ChallengePage() {
           <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto">
             <Reveal className="bg-[#f8f3ec] rounded-xl flex flex-col lg:flex-row gap-8 lg:gap-[3.5rem] items-start lg:items-center px-6 lg:px-10 py-8">
 
-              {/* Left: icon + copy */}
-              <div className="flex gap-5 items-start flex-1 min-w-0">
+              {/* Left: icon + copy — icon above text, centered, below lg:
+                  (matches the Home Newsletter card's icon-above-text
+                  pattern), row layout again from lg: up alongside the
+                  outer Reveal's own flex-col -> lg:flex-row switch. */}
+              <div className="flex flex-col items-center text-center gap-5 lg:flex-row lg:items-start lg:text-left flex-1 min-w-0">
                 <div className="shrink-0 -rotate-4">
                   <svg width="52" height="44" viewBox="0 0 52 44" fill="none">
                     <rect x="2" y="2" width="48" height="40" rx="3" stroke="#f6a701" strokeWidth="2" />