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/ernten/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { Container, SectionHeading } from "@/components/ui";
 import { ContentImage } from "@/components/content-image";
 import { ScrollReveal } from "@/components/scroll-reveal";
+import { HexMark } from "@/components/honeycomb";
 import { getHarvests } from "@/lib/data";
 import { formatMonthYear } from "@/lib/format";
 import { getLocale } from "@/i18n/locale";
@@ -34,29 +35,56 @@ export default async function ErntenPage() {
           <SectionHeading level="h1" eyebrow={t.erntenPage.eyebrow} title={t.erntenPage.title} />
         </ScrollReveal>
 
-        <div className="mt-16 space-y-16">
+        <div className="mt-16 space-y-24">
           {years.map((year) => (
             <div key={year}>
               <ScrollReveal>
-                <h2 className="text-2xl text-forest mb-6">{year}</h2>
+                {/* Jahrgang wie auf dem Etikett: grosse Zahl, auslaufende Linie. */}
+                <div className="mb-8 flex items-center gap-6">
+                  <h2 className="font-serif text-6xl md:text-7xl leading-none text-honey-dark tabular-nums">{year}</h2>
+                  <span aria-hidden="true" className="h-px flex-1 bg-gradient-to-r from-honey/50 to-transparent" />
+                </div>
               </ScrollReveal>
-              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-14">
                 {byYear[year].map((harvest, i) => (
                   <ScrollReveal key={harvest.id} delay={(i % 3) * 0.08}>
                     <Link
                       href={`/ernten/${harvest.year}/${encodeURIComponent(harvest.type)}`}
                       className="group block"
                     >
-                      <ContentImage
-                        src={harvest.images[0] || null}
-                        alt={harvest.type}
-                        tone="forest"
-                        className="aspect-[4/3] w-full transition-transform duration-500 group-hover:scale-[1.02]"
-                        label={formatMonthYear(harvest.harvestDate, locale)}
-                        sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
-                      />
-                      <h3 className="mt-4 text-lg text-forest">{harvest.type}</h3>
-                      <p className="text-sm text-ink/65">{t.erntenPage.batchCount(harvest.batches.length)}</p>
+                      <span className="relative block overflow-hidden rounded-lg transition-[transform,box-shadow] duration-500 ease-[var(--ease-arrive)] group-hover:-translate-y-1 group-hover:shadow-[0_28px_50px_-24px_rgba(36,53,43,0.5)]">
+                        <ContentImage
+                          src={harvest.images[0] || null}
+                          alt={harvest.type}
+                          tone="forest"
+                          className="aspect-[4/3] w-full transition-transform duration-700 ease-[var(--ease-arrive)] group-hover:scale-[1.05]"
+                          label={formatMonthYear(harvest.harvestDate, locale)}
+                          sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
+                        />
+                        <span
+                          aria-hidden="true"
+                          className="pointer-events-none absolute inset-0 -translate-x-full bg-[linear-gradient(115deg,transparent_30%,rgba(228,207,164,0.3)_48%,rgba(184,138,68,0.15)_55%,transparent_70%)] transition-transform duration-1000 ease-[var(--ease-arrive)] group-hover:translate-x-full motion-reduce:hidden"
+                        />
+                      </span>
+                      <div className="mt-5 flex items-start justify-between gap-4">
+                        <div>
+                          <h3 className="link-draw inline pb-0.5 font-serif text-2xl text-forest">{harvest.type}</h3>
+                          <p className="mt-2 flex items-center gap-2 text-sm text-ink/65">
+                            <HexMark className="h-2 w-2 text-honey" />
+                            {t.erntenPage.batchCount(harvest.batches.length)}
+                          </p>
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          viewBox="0 0 24 24"
+                          className="mt-2 h-4 w-4 flex-shrink-0 text-forest transition-transform duration-300 ease-[var(--ease-arrive)] group-hover:translate-x-1"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.6"
+                        >
+                          <path d="M4 12h15M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      </div>
                     </Link>
                   </ScrollReveal>
                 ))}