feat(ui): Ernten, Chargen-Nachweis und aktive Navigation

- Ernten: Jahrgang als grosse Serifenzahl mit auslaufender Linie, Karten
  heben sich mit Honigschimmer, Pfeil und Unterstrich
- Ernte-Detail: grosser Titel, mitlaufendes Bild, Fuellstandsbalken je
  Charge (verfuegbare von abgefuellten Glaesern)
- Chargen-Seite (QR-Code auf dem Glas): Echtheitssiegel stempelt sich ein,
  Zeitleiste mit Waben und sich fuellender Linie, Werte in Serifenschrift
- Produktverweise heben sich, gezeichneter Pfeil statt Textzeichen
- Fix: aktive Seite in der Kopfzeile zeigte den Unterstrich in Textfarbe
  statt in Honig (unlayered CSS ueberstimmte die Utility-Klasse)

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

src/app/charge/[code]/page.tsx

@@ -57,11 +57,30 @@ export default async function BatchPage(props: PageProps<"/charge/[code]">) {
     <div className="py-20">
       <Container className="max-w-3xl">
         <ScrollReveal>
-          <div className="flex items-center gap-2 text-honey-dark">
-            <ShieldIcon />
-            <span className="tracking-wide-caps text-xs">{t.chargePage.verifiedBatch}</span>
+          {/* Echtheitssiegel: wer den QR-Code vom Glas scannt, landet hier —
+              das Siegel stempelt sich ein, bevor die Details folgen. */}
+          <div className="flex items-center gap-4">
+            <span
+              className="motion-stamp relative flex h-16 w-14 flex-shrink-0 items-center justify-center text-cream animate-[wh-stamp_0.7s_var(--ease-arrive)_both]"
+              style={{ animationDelay: "150ms" }}
+            >
+              <svg viewBox="0 0 24 26" aria-hidden="true" className="absolute inset-0 h-full w-full">
+                <polygon points="12,1 22.4,7 22.4,19 12,25 1.6,19 1.6,7" fill="var(--color-honey-dark)" />
+                <polygon
+                  points="12,3.2 20.5,8.1 20.5,17.9 12,22.8 3.5,17.9 3.5,8.1"
+                  fill="none"
+                  stroke="var(--color-honey-pale)"
+                  strokeWidth="0.6"
+                  strokeDasharray="1.2 1"
+                />
+              </svg>
+              <span className="relative">
+                <ShieldIcon />
+              </span>
+            </span>
+            <span className="tracking-wide-caps text-xs text-honey-dark">{t.chargePage.verifiedBatch}</span>
           </div>
-          <h1 className="mt-3 text-4xl md:text-5xl text-forest">
+          <h1 className="mt-6 text-5xl md:text-6xl leading-[1] tracking-[-0.015em] text-forest">
             {batch.harvest.type} {batch.harvest.year}
           </h1>
           <p className="mt-4 text-sm text-ink/70">{t.chargePage.provenanceNote(batch.code)}</p>
@@ -91,20 +110,32 @@ export default async function BatchPage(props: PageProps<"/charge/[code]">) {
         </div>
 
         <ScrollReveal className="mt-14">
-          <div className="grid grid-cols-3 gap-4">
+          <ol className="grid grid-cols-3 gap-4">
             {steps.map((step, i) => (
-              <div key={step.label} className="relative">
+              <li key={step.label} className="relative">
                 <div className="flex items-center">
-                  <span className="flex-shrink-0 w-2 h-2 rounded-full bg-honey" />
+                  <svg viewBox="0 0 24 26" aria-hidden="true" className="h-4 w-4 flex-shrink-0">
+                    <polygon
+                      points="12,1 22.4,7 22.4,19 12,25 1.6,19 1.6,7"
+                      fill="var(--color-honey)"
+                      stroke="var(--color-honey-dark)"
+                      strokeWidth="2"
+                    />
+                  </svg>
                   {i < steps.length - 1 ? (
-                    <span className="ml-1 h-px flex-1 bg-ink/15" aria-hidden="true" />
+                    <span className="relative ml-1 h-[2px] flex-1 overflow-hidden rounded-full bg-ink/10" aria-hidden="true">
+                      <span
+                        className="motion-grow absolute inset-0 origin-left bg-honey animate-[wh-grow_0.6s_var(--ease-arrive)_both]"
+                        style={{ animationDelay: `${500 + i * 220}ms` }}
+                      />
+                    </span>
                   ) : null}
                 </div>
                 <p className="mt-3 text-xs tracking-wide-caps text-ink/70">{step.label}</p>
-                <p className="mt-1 text-forest">{step.value}</p>
-              </div>
+                <p className="mt-1 font-serif text-xl text-forest tabular-nums">{step.value}</p>
+              </li>
             ))}
-          </div>
+          </ol>
         </ScrollReveal>
 
         <ScrollReveal className="mt-10 border-t border-ink/10 pt-8">