feat(ui): Sendungsverfolgung im Wabenstil

- DHL-Verlauf: neuestes Ereignis als Wabe in Statusfarbe (pulsiert, solange
  unterwegs), aeltere als leere Waben, Eintraege erscheinen gestaffelt
- Bestellung verfolgen: Suchformular in der Formular-Karte, Ergebnis als
  abgehobene Karte

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

src/app/bestellung-verfolgen/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { Container, SectionHeading, Button } from "@/components/ui";
+import { Container, SectionHeading, Button, FormPanel } from "@/components/ui";
 import { OrderStatusBadge, OrderStatusTimeline } from "@/components/account-ui";
 import { getOrderForTracking } from "@/lib/account-data";
 import { formatPrice, formatDate } from "@/lib/format";
@@ -52,7 +52,8 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
         <SectionHeading eyebrow={t.trackOrderPage.eyebrow} title={t.trackOrderPage.title} />
         <p className="mt-4 text-ink/70 leading-relaxed">{t.trackOrderPage.intro}</p>
 
-        <form method="GET" className="mt-8 space-y-4">
+        <FormPanel className="mt-8">
+        <form method="GET" className="space-y-4">
           <label className="block text-sm">
             <span className="text-ink/70">{t.trackOrderPage.orderNumberLabel}</span>
             <input
@@ -77,6 +78,7 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
           </label>
           <Button type="submit">{t.trackOrderPage.submit}</Button>
         </form>
+        </FormPanel>
 
         {rateLimited ? (
           <p className="mt-8 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">
@@ -91,7 +93,7 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
         ) : null}
 
         {order ? (
-          <div className="mt-10 border border-ink/10 p-6">
+          <div className="mt-10 border border-ink/10 bg-background p-6 shadow-[0_24px_50px_-34px_rgba(36,53,43,0.45)] sm:p-8">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div>
                 <p className="text-forest">{order.orderNumber}</p>

src/app/globals.css

@@ -283,3 +283,21 @@ textarea::placeholder {
     animation: none !important;
   }
 }
+
+/* Listeneintraege erscheinen gestaffelt (Delay per style am Element). */
+@keyframes wh-rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-rise {
+    animation: none !important;
+  }
+}