Move product catalog to Payload CMS

Products now come from Payload's new "products" collection instead of a
hardcoded catalog, same pattern already used for blog posts:

- lib/payload.ts: getProducts()/getProductBySlug() (server-side fetch,
  60s ISR)
- New /api/products route so client components (CartContent,
  RelatedProducts) can reach the same data without a server-only import
- lib/products.ts: useProducts() hook replacing the old PRODUCTS record
- ProductGrid (/shop) fetches server-side directly; now shows all
  catalog products except notizbuch-klarheit (matches Figma's 4-card
  page-shop-overview — still cross-sold via RelatedProducts)
- ProductSpotlight and /todo-cards' Pricing now pull price/photo from
  the same CMS product instead of a separately hardcoded "12,90 €", so
  the two can't silently drift apart
- formatPrice moved to a new lib/format.ts (plain, no "use client") —
  Server Components can't call functions exported from a "use client"
  module directly, which lib/products.ts now is because of the hook

Also fixes two unrelated bugs surfaced along the way: the add-to-cart
button visibly resizing when its "Hinzugefügt ✓" success state showed
(fixed with a CSS-grid text stack sized to the wider of the two
strings), and removes the now-unused local product images from public/.

app/lib/payload.ts

@@ -55,3 +55,60 @@ export async function getBlogPosts(limit = 3): Promise<BlogPost[]> {
         : null,
   }));
 }
+
+// Frontend-facing shape — `id` is Payload's `slug` field, not its numeric
+// row id. Cart items are stored in localStorage keyed by this string (see
+// lib/cart.ts), so slugs were chosen in the Products collection to match
+// the ids the old hardcoded catalog used ("todo-karten" etc.) — switching
+// to numeric ids here would silently orphan every existing shopper's cart.
+export type Product = {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  image: string;
+  href: string | null;
+};
+
+type PayloadProduct = {
+  id: number;
+  name: string;
+  slug: string;
+  description: string | null;
+  price: number;
+  image: { url: string } | number | null;
+  detailHref: string | null;
+};
+
+export async function getProducts(): Promise<Product[]> {
+  const params = new URLSearchParams({
+    "where[tenant.slug][equals]": TENANT_SLUG,
+    sort: "sortOrder",
+    depth: "2",
+    limit: "100",
+  });
+
+  const res = await fetch(`${PAYLOAD_URL}/api/products?${params}`, {
+    next: { revalidate: 60 },
+  });
+  if (!res.ok) {
+    console.error(`getProducts: Payload returned ${res.status} ${res.statusText}`);
+    return [];
+  }
+
+  const data: { docs?: PayloadProduct[] } = await res.json();
+  const docs = Array.isArray(data.docs) ? data.docs : [];
+  return docs.map((product) => ({
+    id: product.slug,
+    name: product.name,
+    description: product.description ?? "",
+    price: product.price,
+    image: typeof product.image === "object" && product.image ? product.image.url : "",
+    href: product.detailHref || null,
+  }));
+}
+
+export async function getProductBySlug(slug: string): Promise<Product | null> {
+  const products = await getProducts();
+  return products.find((p) => p.id === slug) ?? null;
+}