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

@@ -28,8 +28,17 @@ export async function Pricing() {
   const discount = discountPercent(product.price, product.compareAtPrice);
   const taxRate = effectiveTaxRate(product, defaultTaxRate);
   // Same "any vs. every" split as ProductGrid.tsx/ProductSpotlight.tsx.
-  const fullyOutOfStock = product.variants.length > 0 ? product.variants.every((v) => v.outOfStock) : product.outOfStock;
-  const anyLowStock = product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock;
+  // A deactivated product (product.active === false) isn't caught by
+  // either — the shop grid/spotlight filter those out before they'd ever
+  // reach this page, but this page resolves a product regardless of
+  // active status (existing links to it should still 200, see
+  // mapPayloadProduct's own comment in lib/payload.ts) — so it needs its
+  // own explicit check here to read as "Ausverkauft" rather than fully
+  // buyable (fixed 2026-07-24, feedback: deactivated should look
+  // sold-out on its own detail page).
+  const fullyOutOfStock =
+    !product.active || (product.variants.length > 0 ? product.variants.every((v) => v.outOfStock) : product.outOfStock);
+  const anyLowStock = product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock);
 
   return (
     <section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-8">
@@ -100,12 +109,17 @@ export async function Pricing() {
               this is an add-to-cart step, not the actual payment step, so
               a payment-security reassurance is premature here and just
               duplicates the one shown later at checkout. */}
+          {/* variants={[]} when deactivated — AddToCartButton's own
+              outOfStock prop is ignored whenever variants is non-empty (it
+              defers to each variant's own outOfStock flag instead, see its
+              currentlyOutOfStock calc), so a deactivated product with
+              in-stock variants would otherwise still render as buyable. */}
           <AddToCartButton
             label="In den Warenkorb"
             className="w-full inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-muted"
-            outOfStock={product.outOfStock}
+            outOfStock={!product.active || product.outOfStock}
             maxQty={product.maxQty}
-            variants={product.variants}
+            variants={product.active ? product.variants : []}
           />
         </div>
       </Reveal>

app/todo-cards/components/TodoKartenHero.tsx

@@ -41,7 +41,9 @@ export async function TodoKartenHero() {
   const discount = product ? discountPercent(product.price, product.compareAtPrice) : null;
   const taxRate = product ? effectiveTaxRate(product, defaultTaxRate) : null;
   // Same "any vs. every" split as ProductGrid.tsx/Pricing.tsx.
-  const anyLowStock = product ? (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock) : false;
+  const anyLowStock = product
+    ? product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock)
+    : false;
 
   return (
     <section className="bg-bg-base w-full overflow-hidden">
@@ -133,7 +135,15 @@ export async function TodoKartenHero() {
             </div>
 
             {product && (
-              <AddToCartButton label="ToDo-Karten bestellen" outOfStock={product.outOfStock} maxQty={product.maxQty} variants={product.variants} />
+              // variants={[]} when deactivated — see Pricing.tsx's own
+              // comment on why AddToCartButton's outOfStock prop alone
+              // isn't enough once variants is non-empty.
+              <AddToCartButton
+                label="ToDo-Karten bestellen"
+                outOfStock={!product.active || product.outOfStock}
+                maxQty={product.maxQty}
+                variants={product.active ? product.variants : []}
+              />
             )}
           </div>
         </Reveal>