From baebf78ee43eec8a37c3e8c8c5543aac1c3f5d09 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Fri, 25 Sep 2026 13:19:42 +0200
Subject: [PATCH] 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) <noreply@anthropic.com>
---
 src/app/bestellung-verfolgen/page.tsx        |  8 ++--
 src/app/globals.css                          | 18 +++++++++
 src/components/shipment-tracking-history.tsx | 41 ++++++++++++++------
 3 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/app/bestellung-verfolgen/page.tsx b/src/app/bestellung-verfolgen/page.tsx
index 2c9b4c5..a5428aa 100644
--- a/src/app/bestellung-verfolgen/page.tsx
+++ b/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>
diff --git a/src/app/globals.css b/src/app/globals.css
index 25eec3a..7ded2aa 100644
--- a/src/app/globals.css
+++ b/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;
+  }
+}
diff --git a/src/components/shipment-tracking-history.tsx b/src/components/shipment-tracking-history.tsx
index cf9df6c..03b8c20 100644
--- a/src/components/shipment-tracking-history.tsx
+++ b/src/components/shipment-tracking-history.tsx
@@ -12,12 +12,13 @@ export interface ShipmentTrackingHistoryLabels {
   statuses: Record<DhlTrackingStatus, string>;
 }
 
-const STATUS_DOT: Record<DhlTrackingStatus, string> = {
-  "pre-transit": "bg-ink/30",
-  transit: "bg-honey-dark",
-  delivered: "bg-forest",
-  failure: "bg-red-500",
-  unknown: "bg-ink/30",
+// Ausgeschrieben: Tailwind erzeugt nur Klassen, die woertlich im Quelltext stehen.
+const STATUS_FILL: Record<DhlTrackingStatus, string> = {
+  "pre-transit": "fill-ink/30",
+  transit: "fill-honey-dark",
+  delivered: "fill-forest",
+  failure: "fill-red-500",
+  unknown: "fill-ink/30",
 };
 
 const STATUS_TEXT: Record<DhlTrackingStatus, string> = {
@@ -74,15 +75,31 @@ export function ShipmentTrackingHistory({
       {info.events.length > 0 ? (
         <ol className="mt-4">
           {info.events.map((event, i) => (
-            <li key={`${event.timestamp.getTime()}-${i}`} className="relative pl-5 pb-4 last:pb-0">
+            <li
+              key={`${event.timestamp.getTime()}-${i}`}
+              className="motion-rise relative pl-7 pb-5 last:pb-0 animate-[wh-rise_0.45s_var(--ease-arrive)_both]"
+              style={{ animationDelay: `${Math.min(i, 8) * 70}ms` }}
+            >
               {i < info.events.length - 1 ? (
-                <span className="absolute left-[4px] top-3 bottom-0 w-px bg-ink/15" aria-hidden="true" />
+                <span className="absolute left-[6px] top-4 bottom-0 w-px bg-ink/15" aria-hidden="true" />
               ) : null}
-              <span
-                className={`absolute left-0 top-1.5 w-2.5 h-2.5 rounded-full ${i === 0 ? STATUS_DOT[event.status] : "bg-ink/20"}`}
+              {/* Neuestes Ereignis als Wabe in Statusfarbe (pulsiert, solange
+                  das Paket unterwegs ist), aeltere als leere Waben. */}
+              <svg
+                viewBox="0 0 24 26"
                 aria-hidden="true"
-              />
-              <p className={`text-sm ${i === 0 ? "text-ink" : "text-ink/70"}`}>{event.description}</p>
+                className={`absolute left-0 top-1 h-3.5 w-3.5 rounded-full ${
+                  i === 0 && event.status === "transit" ? "motion-pulse animate-[wh-pulse_2.2s_ease-out_infinite]" : ""
+                }`}
+              >
+                <polygon
+                  points="12,1 22.4,7 22.4,19 12,25 1.6,19 1.6,7"
+                  className={i === 0 ? STATUS_FILL[event.status] : "fill-background"}
+                  stroke={i === 0 ? "none" : "color-mix(in oklab, var(--color-ink) 30%, transparent)"}
+                  strokeWidth="2"
+                />
+              </svg>
+              <p className={`text-sm ${i === 0 ? "font-serif text-lg text-forest" : "text-ink/70"}`}>{event.description}</p>
               <p className="mt-0.5 text-xs text-ink/55">
                 <time dateTime={event.timestamp.toISOString()}>{formatDateTime(event.timestamp, locale)}</time>
                 {event.location ? ` · ${event.location}` : null}