Move trust badges, shipping/payment methods, Werkzeuge cards, product spotlight into CMS

New Payload collections, all editable without a code deploy:
- TrustBadges: the horizontal Schneller-Versand/Versandkostenfrei/Mit-
  Liebe-verpackt row (TrustRow.tsx, now an async server component).
- CartTrustBadges: the Sichere-Zahlung/14-Tage-Rückgaberecht/Nachhaltig-
  verpackt sidebar bullets — shared by /cart (title only) and /checkout
  (title + description), which previously had two different hardcoded
  bullet lists for what's conceptually the same content.
- ShippingMethods: /checkout's Versandart radios. Each method has its own
  optional freeShippingThreshold — omitted means "never free" (Express),
  not "always free". /cart's FreeShippingBanner now targets the lowest
  threshold among active methods instead of a single global constant, and
  hides entirely if no active method has one.
- PaymentMethods: /checkout's Zahlungsart radios, icons as an array
  (Kreditkarte shows 3 logos, PayPal/Überweisung show 1).
- Products: new spotlight/spotlightHeadline/spotlightText/spotlightImage/
  compareAtPrice fields. ProductSpotlight.tsx (homepage) now shows
  whichever product has `spotlight` checked instead of being hardcoded to
  ToDo-Karten, with its own marketing copy separate from the plain
  catalog name/description. AddToCartButton takes an explicit productId
  prop now instead of a hardcoded "todo-karten" constant.
- WerkzeugeCards: the homepage's "Meine Werkzeuge" 3-card grid (Tools.tsx,
  now async). Icons use a uniform box instead of the previous per-card
  hand-tuned width/height/rotation, which only worked for 3 known,
  upside-down-authored SVGs — those were re-exported as pre-flipped PNGs.

lib/payload.ts gained getTrustBadges/getCartTrustBadges/getShippingMethods/
getPaymentMethods/getWerkzeugeCards/getSpotlightProduct, all with the same
graceful-empty-array-on-fetch-failure pattern as the existing functions.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/components/Tools.tsx

@@ -1,28 +1,18 @@
 import Link from "next/link";
 import { Reveal, RevealGroup, RevealItem } from "./Reveal";
+import { getWerkzeugeCards } from "../lib/payload";
 
-const tools = [
-  {
-    icon: { src: "/icon-rocket.svg", w: "3.375rem", h: "4.122rem", transform: "-scale-y-100" },
-    title: "Mini-Challenge",
-    description: "In 7 Tagen zu mehr Klarheit. Kleine Gewohnheiten, die Großes bewirken.",
-    cta: { label: "Starten", href: "/challenge" },
-  },
-  {
-    icon: { src: "/icon-todo.svg", w: "3rem", h: "3.879rem", transform: "-scale-y-100" },
-    title: "ToDo-Karten",
-    description: "Das Werkzeug für Fokus im Alltag. bringe Struktur in deine Aufgaben und gewinne Zeit zurück.",
-    cta: { label: "Entdecken", href: "/todo-cards" },
-  },
-  {
-    icon: { src: "/icon-newsletter.svg", w: "3rem", h: "2.579rem", transform: "-rotate-4 -scale-y-100" },
-    title: "Impulse & Tipps",
-    description: "Wöchentliche Impulse mit konkreten Ideen und erprobten Tipps für weniger Reibung und mehr Leichtigkeit.",
-    cta: { label: "Anmelden", href: "/newsletter" },
-  },
-];
+// Content now lives in Payload (WerkzeugeCards collection). Icons use a
+// uniform box here (object-contain) rather than the previous hardcoded
+// per-card hand-tuned width/height/rotation — that only made sense for a
+// fixed, known set of 3 SVGs authored upside-down for a specific
+// hand-drawn look, which doesn't generalize to a real CMS field. The 3
+// original icons were re-exported pre-flipped/rotated as PNGs so they
+// still display correctly with plain object-contain.
+export async function Tools() {
+  const tools = await getWerkzeugeCards();
+  if (tools.length === 0) return null;
 
-export function Tools() {
   return (
     <div id="werkzeuge" className="flex flex-col gap-12 items-start pb-16 pt-8 w-full bg-bg-base">
 
@@ -44,20 +34,12 @@ export function Tools() {
       <RevealGroup className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-[var(--layout-grid-gap)] px-[var(--layout-padding-x)] w-full">
         {tools.map((tool) => (
           <RevealItem
-            key={tool.title}
+            key={tool.id}
             className="md:col-span-4 flex gap-8 items-start rounded-md transition-transform duration-300 hover:-translate-y-1"
           >
-            {/* Icon */}
-            <div className="flex items-center justify-center shrink-0">
-              <div className={tool.icon.transform}>
-                <div className="relative" style={{ width: tool.icon.w, height: tool.icon.h }}>
-                  <img
-                    alt=""
-                    src={tool.icon.src}
-                    className="absolute inset-0 w-full h-full"
-                  />
-                </div>
-              </div>
+            {/* Icon — uniform box, pre-flipped/rotated source asset */}
+            <div className="flex items-center justify-center shrink-0 size-14">
+              <img alt="" src={tool.icon} className="max-w-full max-h-full object-contain" />
             </div>
 
             {/* Card content — self-stretch + h-full + justify-between so
@@ -85,10 +67,10 @@ export function Tools() {
                 </p>
               </div>
               <Link
-                href={tool.cta.href}
+                href={tool.ctaHref}
                 className="font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
               >
-                → {tool.cta.label}
+                → {tool.ctaLabel}
               </Link>
             </div>
           </RevealItem>