feat(admin): Bestelldetail mit Zeitleiste, Produktformular gegliedert

- Bestelldetail: Status-Badge neben der Nummer, Waben-Zeitleiste
  (dieselbe wie im Kundenkonto) zeigt auf einen Blick den Stand
- Produkt bearbeiten: Abschnitte (Text und Bilder, Geschmack, Preis und
  Bestand, Sichtbarkeit), "Im Shop sichtbar" als Schalter (gleiches Feld
  isActive), Speicherleiste bleibt beim Scrollen unten erreichbar
- Kartentitel im gesamten Admin als lesbare Serifentitel statt winziger
  Versal-Etiketten (zentral per .admin-content, farbige Titel bleiben)

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/app/admin/bestellungen/[id]/page.tsx

@@ -14,6 +14,7 @@ import { checkOrderDeletable } from "@/lib/order-delete";
 import { getLocale } from "@/i18n/locale";
 import { getDictionary } from "@/i18n/get-dictionary";
 import { isDhlConfigured } from "@/lib/dhl";
+import { OrderStatusBadge, OrderStatusTimeline } from "@/components/account-ui";
 
 export default async function AdminOrderDetailPage(props: PageProps<"/admin/bestellungen/[id]">) {
   const t = getDictionary(await getLocale());
@@ -43,13 +44,16 @@ export default async function AdminOrderDetailPage(props: PageProps<"/admin/best
   }).deletable;
 
   return (
-    <div className="max-w-3xl">
+    <div className="max-w-4xl">
       <BackLink href="/admin/bestellungen" label={t.adminOrderDetailPage.backToOrders} />
 
 
       <div className="flex flex-wrap items-start justify-between gap-4 mb-8">
         <div>
-          <h1 className="text-2xl text-forest">{order.orderNumber}</h1>
+          <div className="flex flex-wrap items-center gap-3">
+            <h1 className="text-2xl text-forest">{order.orderNumber}</h1>
+            <OrderStatusBadge status={order.status} label={statusLabels[order.status] ?? order.status} />
+          </div>
           <p className="text-sm text-ink/65 mt-1">{formatDate(order.createdAt)}</p>
         </div>
         <form action={updateOrderStatusAction} className="flex items-center gap-2">
@@ -71,6 +75,25 @@ export default async function AdminOrderDetailPage(props: PageProps<"/admin/best
         </form>
       </div>
 
+      {/* Wo steht die Bestellung? Dieselbe Waben-Zeitleiste wie im Kundenkonto. */}
+      <div className="mb-8 border border-ink/10 bg-background px-6 py-5">
+        <OrderStatusTimeline
+          status={order.status}
+          fulfillmentMethod={order.fulfillmentMethod}
+          labels={{
+            ordered: t.orderStatusTimeline.ordered,
+            paid: t.orderStatusTimeline.paid,
+            preparing: t.orderStatusTimeline.preparing,
+            readyToShip: t.orderStatusTimeline.readyToShip,
+            shipped: t.orderStatusTimeline.shipped,
+            readyForPickup: t.orderStatusTimeline.readyForPickup,
+            pickedUp: t.orderStatusTimeline.pickedUp,
+            cancelled: t.orderStatusTimeline.cancelled,
+            ariaLabel: t.orderStatusTimeline.ariaLabel,
+          }}
+        />
+      </div>
+
       {order.giftMessage ? (
         <div className="bg-honey/10 border border-honey-dark/30 p-6 mb-8">
           <h2 className="text-xs tracking-wide-caps text-honey-dark mb-3">{t.adminOrderDetailPage.giftHeading}</h2>