Out-of-stock UI, variant picker on marketing pages, server-side stock check

- ProductGrid/AddToCartInlineButton/AddToCartButton now show "Ausverkauft"
  and disable add-to-cart per variant (or product-level with no variants),
  derived from trackInventory/stock/allowBackorder via isOutOfStock().
- AddToCartButton (todo-cards Hero+Pricing, homepage spotlight) gains the
  same variant <select> AddToCartInlineButton already had — all three call
  sites already fetch full product data server-side.
- /api/checkout re-validates stock server-side (depth-in-defense, not just
  the disabled button), rejecting when trackInventory is on, allowBackorder
  is off, and requested qty exceeds stock.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018PL4zfTY1sXc8x5QS6FatM

app/components/AddToCartButton.tsx

@@ -17,6 +17,8 @@ export function AddToCartButton({
   label,
   className,
   productId = "todo-karten",
+  outOfStock = false,
+  variants = [],
 }: {
   label: string;
   className?: string;
@@ -24,16 +26,27 @@ export function AddToCartButton({
    * ProductSpotlight passes the actual CMS-selected spotlight product's id
    * explicitly, since that can now be a different product. */
   productId?: string;
+  /** Product-level — only meaningful when `variants` is empty, same split as
+   * AddToCartInlineButton. */
+  outOfStock?: boolean;
+  /** Optional — same shape/semantics as AddToCartInlineButton's own
+   * `variants` prop; all three callers already fetch the full product
+   * server-side, so this is just threaded straight through. */
+  variants?: { name: string; priceOverride: number | null; outOfStock: boolean }[];
 }) {
   const [added, setAdded] = useState(false);
+  const [selectedVariant, setSelectedVariant] = useState(variants.find((v) => !v.outOfStock)?.name ?? variants[0]?.name);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const { fly } = useCartFly();
 
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
 
+  const currentlyOutOfStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.outOfStock ?? false) : outOfStock;
+
   function handleClick() {
-    addToCart(productId);
+    if (currentlyOutOfStock) return;
+    addToCart(productId, 1, selectedVariant);
     if (buttonRef.current) fly(buttonRef.current);
     setAdded(true);
     clearTimeout(timeoutRef.current);
@@ -55,33 +68,59 @@ export function AddToCartButton({
   // a solid bright-green button read as too loud here. `border` (width) is
   // added here too since `base` has none by default, unlike
   // AddToCartInlineButton's own base which already carries a plain border.
-  const stateClasses = added
-    ? "border border-success! bg-success-subtle! hover:bg-success-subtle! text-success!"
-    : "";
+  const stateClasses = currentlyOutOfStock
+    ? "opacity-60 cursor-not-allowed"
+    : added
+      ? "border border-success! bg-success-subtle! hover:bg-success-subtle! text-success!"
+      : "";
+  const displayLabel = currentlyOutOfStock ? "Ausverkauft" : label;
 
   return (
-    <button
-      ref={buttonRef}
-      type="button"
-      onClick={handleClick}
-      className={`${base} ${stateClasses}`}
-    >
-      {/* CSS-grid text-stack, not just swapping the button's text node
-          directly — this button is inline-flex/content-sized (no w-full),
-          so "Hinzugefügt ✓" being shorter than most labels made the whole
-          button visibly shrink while showing the success state. Stacking
-          both possible texts in the same grid cell (both invisible ones
-          still contribute to sizing) reserves width for whichever is
-          wider, so the button's box never changes size either way. */}
-      <span className="relative grid">
-        <span className="invisible [grid-area:1/1]" aria-hidden="true">
-          {label}
+    <div className="flex flex-col gap-2">
+      {variants.length > 0 && (
+        <select
+          value={selectedVariant}
+          onChange={(e) => setSelectedVariant(e.target.value)}
+          className="w-full rounded-sm border border-border px-3 py-2 text-body-sm text-text-primary bg-bg-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+          aria-label="Variante auswählen"
+        >
+          {variants.map((v) => (
+            <option key={v.name} value={v.name}>
+              {v.name}
+              {v.outOfStock ? " (ausverkauft)" : ""}
+            </option>
+          ))}
+        </select>
+      )}
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={handleClick}
+        disabled={currentlyOutOfStock}
+        className={`${base} ${stateClasses}`}
+      >
+        {/* CSS-grid text-stack, not just swapping the button's text node
+            directly — this button is inline-flex/content-sized (no w-full),
+            so "Hinzugefügt ✓" being shorter than most labels made the whole
+            button visibly shrink while showing the success state. Stacking
+            both possible texts in the same grid cell (both invisible ones
+            still contribute to sizing) reserves width for whichever is
+            wider, so the button's box never changes size either way. Now
+            also reserves space for "Ausverkauft" — the widest of the three
+            wins regardless of which is showing. */}
+        <span className="relative grid">
+          <span className="invisible [grid-area:1/1]" aria-hidden="true">
+            {label}
+          </span>
+          <span className="invisible [grid-area:1/1]" aria-hidden="true">
+            Hinzugefügt ✓
+          </span>
+          <span className="invisible [grid-area:1/1]" aria-hidden="true">
+            Ausverkauft
+          </span>
+          <span className="[grid-area:1/1]">{added ? "Hinzugefügt ✓" : displayLabel}</span>
         </span>
-        <span className="invisible [grid-area:1/1]" aria-hidden="true">
-          Hinzugefügt ✓
-        </span>
-        <span className="[grid-area:1/1]">{added ? "Hinzugefügt ✓" : label}</span>
-      </span>
-    </button>
+      </button>
+    </div>
   );
 }