Deactivated product shows as sold out, StepArrow to black, newsletter checkmarks fixed

- /todo-cards's detail page (the only page resolving a product regardless
  of active status) now renders both CTAs as "Ausverkauft" and disabled
  when the product is deactivated, instead of fully buyable — variants are
  dropped too, since AddToCartButton's outOfStock prop is otherwise ignored
  whenever variants is non-empty.
- StepArrow: brand orange didn't fit here after all, switched to
  near-black (#222221) per feedback.
- Newsletter/"Impulse & Tipps" checklist checkmarks (WeeklyImpulsesHero.tsx,
  WeeklyBenefits.tsx) were still the old un-recolorable icon-check.svg —
  same inline-SVG orange-checkmark fix as todo-cards/Challenge, plus
  items-start instead of items-center on WeeklyImpulsesHero's list for
  top-alignment consistency.

app/components/StepArrow.tsx

@@ -7,14 +7,16 @@
 // 2. Its color lives in a `var(--stroke-0, #C9C9C9)` CSS custom property
 //    that's scoped to the SVG file's own document when loaded via <img
 //    src>/next/image — un-recolorable from the host page's CSS, so it could
-//    never actually become the brand orange used everywhere else (buttons,
-//    checkmarks, icons). Inline SVG sidesteps that entirely.
+//    never actually become a solid dark color like the rest of this file's
+//    icons. Inline SVG sidesteps that entirely. Stroke color tried brand
+//    orange first, then switched to near-black (#222221, same as
+//    icon-check.svg's original fill) per feedback the same day.
 export function StepArrow({ className }: { className?: string }) {
   return (
     <svg width="40" height="16" viewBox="0 0 40 16" fill="none" aria-hidden="true" className={className}>
       <path
         d="M1 8H33M26 14.5L34.5 8L26 1.5"
-        stroke="#f6a701"
+        stroke="#222221"
         strokeWidth="2.5"
         strokeLinecap="round"
         strokeLinejoin="round"