fix: eliminate checkout/cart layout shift and low-contrast muted text

Live Lighthouse + performance-trace audits against the running dev app
found two real, measurable defects:

- /checkout and /warenkorb rendered the cart-store's default empty
  state before Zustand's persist middleware finished reading
  localStorage, so any customer who already had items in their cart
  saw an "empty cart" flash before the real form appeared (CLS 0.82).
  Fixed by tracking hasHydrated in the store and rendering the
  existing route skeleton until rehydration completes. Verified via
  Chrome DevTools performance trace: CLS 0.82 -> 0.00 on both pages.

- axe-core (via Lighthouse) flagged text-ink/60 on the cream
  background at 4.09:1 contrast, under the 4.5:1 WCAG AA minimum for
  normal-size text. Bumped to text-ink/70 (5.61:1) everywhere the same
  token is used at text-xs/text-sm across 7 files.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/app/checkout/checkout-form.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { Container, SectionHeading, Button } from "@/components/ui";
 import { TrustBadges } from "@/components/trust-badges";
 import { useCartStore, cartTotalCents, cartItemCount } from "@/store/cart-store";
+import CheckoutLoading from "./loading";
 import { formatPrice } from "@/lib/format";
 import { resolveShippingCostCents, type ShippingTierLike } from "@/lib/shipping-calc";
 import { resolveBulkDiscount, type BulkDiscountTierLike } from "@/lib/bulk-discount-calc";
@@ -33,6 +34,7 @@ export function CheckoutForm({
 }) {
   const { t, locale } = useI18n();
   const items = useCartStore((s) => s.items);
+  const hasHydrated = useCartStore((s) => s.hasHydrated);
   const subtotal = cartTotalCents(items);
   const totalQuantity = cartItemCount(items);
   const router = useRouter();
@@ -109,6 +111,15 @@ export function CheckoutForm({
     }
   }
 
+  // Der Cart-Store haelt seine Positionen nur im Browser (persist/localStorage)
+  // und liest sie erst nach dem ersten Client-Render nach. Ohne diese Weiche
+  // wuerde jede:r Kund:in mit gefuelltem Warenkorb kurz die "leer"-Meldung
+  // sehen, bevor auf das echte Formular umgeschaltet wird — ein grosser,
+  // messbarer Layout-Sprung (siehe CLS) und verwirrend fuer echte Kaeufer:innen.
+  if (!hasHydrated) {
+    return <CheckoutLoading />;
+  }
+
   if (items.length === 0) {
     return (
       <div className="py-20">
@@ -179,7 +190,7 @@ export function CheckoutForm({
               ))}
             </div>
             {fulfillment === "VERSAND" ? (
-              <p className="mt-2 text-xs text-ink/60">
+              <p className="mt-2 text-xs text-ink/70">
                 {t.checkoutPage.deliveryTimeNote}
               </p>
             ) : null}