Wire up product variants end-to-end, add tracking-number display

Completes the frontend half of the Payload backend's variant/inventory/
tracking work (see that repo's own commit):

- **Cart**: CartItem gained an optional `variant?: string` field — every
  function that used to match a line by `id` alone (addToCart/
  removeFromCart/setQuantity) now matches by `(id, variant)` together via
  a shared sameLine() helper, so two lines for the same product with
  different variants stay separate entries. `variant` undefined on both
  sides (the no-variants case) still matches by simple equality, so every
  pre-existing call site keeps working unchanged.
- **Selection UI**: AddToCartInlineButton renders a <select> above the
  button when given a non-empty `variants` prop (ProductGrid/
  RelatedProducts pass product.variants straight through); defaults to
  the first variant.
- **Pricing**: cartTotals.ts's new effectivePrice(entry, product) — a
  variant's priceOverride wins over the base product price. Every cart/
  checkout/order-confirmation total and per-line price display now goes
  through this instead of reading product.price directly (fixes both a
  wrong-price bug and a duplicate-React-key bug the old `key={product.id}`
  pattern would have had the moment two variants of one product were both
  in the cart).
- **Checkout**: re-validates the requested variant server-side (same
  "never trust the client" reasoning as price re-derivation) — a variant
  name that doesn't exist on that product fails the whole checkout.
  variantName snapshots onto orders.items, shown as a parenthetical next
  to the product name on the confirmation email, both invoice PDF types,
  and the order-detail page.
- **Cross-device cart**: Customers.cart[].variantName (synced via
  /api/account/cart) carries the selection through a login/logout cycle,
  not just the current session.

Also adds tracking-number display: /konto/bestellungen/[orderNumber]
shows a clickable link when orders.trackingNumber is set, built by a new
app/lib/tracking.ts that mirrors the Payload backend's own copy
byte-for-byte close (same carrier set/URL patterns) so what a customer
sees here matches exactly what the order-shipped email already links to.

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

app/components/AddToCartInlineButton.tsx

@@ -20,12 +20,19 @@ export function AddToCartInlineButton({
   id,
   label = "In den Warenkorb",
   className,
+  variants = [],
 }: {
   id: string;
   label?: string;
   className?: string;
+  /** Optional — products.variants (name + optional priceOverride). When
+   * non-empty, a variant must be picked (defaults to the first one) before
+   * "add to cart" is enabled — the selected variant's name is snapshotted
+   * onto the cart line and, later, the order itself. */
+  variants?: { name: string; priceOverride: number | null }[];
 }) {
   const [added, setAdded] = useState(false);
+  const [selectedVariant, setSelectedVariant] = useState(variants[0]?.name);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const { fly } = useCartFly();
@@ -33,7 +40,7 @@ export function AddToCartInlineButton({
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
 
   function handleClick() {
-    addToCart(id);
+    addToCart(id, 1, selectedVariant);
     if (buttonRef.current) fly(buttonRef.current);
     setAdded(true);
     clearTimeout(timeoutRef.current);
@@ -53,16 +60,32 @@ export function AddToCartInlineButton({
     : "border-border hover:border-brand";
 
   return (
-    <button ref={buttonRef} type="button" onClick={handleClick} className={`${base} ${stateClasses}`}>
-      <span
-        className={
-          "text-body-sm transition-colors " +
-          (added ? "font-semibold text-success" : "text-text-primary")
-        }
-      >
-        {added ? "Hinzugefügt ✓" : label}
-      </span>
-      <Image alt="" src="/icon-cart-outline.png" width={32} height={30} className="h-[1.875rem] w-8 object-contain" />
-    </button>
+    <div className="flex flex-col gap-2 w-full">
+      {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}
+            </option>
+          ))}
+        </select>
+      )}
+      <button ref={buttonRef} type="button" onClick={handleClick} className={`${base} ${stateClasses}`}>
+        <span
+          className={
+            "text-body-sm transition-colors " +
+            (added ? "font-semibold text-success" : "text-text-primary")
+          }
+        >
+          {added ? "Hinzugefügt ✓" : label}
+        </span>
+        <Image alt="" src="/icon-cart-outline.png" width={32} height={30} className="h-[1.875rem] w-8 object-contain" />
+      </button>
+    </div>
   );
 }