feat(ui): Fundament und Einkaufserlebnis visuell aufgewertet

- Fundament: feine Papierkoernung, Scrollbar/Cursor/Fokusring/Markierung in
  Markenfarben, gleich breite Ziffern fuer Preise, einlaufende Unterstriche
- Knoepfe fuellen sich beim Hover von unten wie ein Glas (Honig/Waldgruen),
  geben beim Klick nach
- Wabenmotiv aus dem Logo als Komponente (Raster, Markierung, Haekchen)
- In den Warenkorb: ein Honigtropfen fliegt im Bogen zum Korb, der Korb
  wippt, der Zaehler springt, erst dann oeffnet die Schublade; Knopf zeigt
  gezeichnetes Haekchen. Reduzierte Bewegung: Schublade oeffnet sofort.
- Produktkarten: Honigschimmer, Anheben, Serifen-Preis, gestaffeltes
  Erscheinen, Pfeil-Links
- Produktseite: mitlaufendes Bild auf Wabenraster, groesserer Titel und
  Preis, sich fuellende Geschmacksskala, Waben-Haekchen statt "✓"
- Shop-Filter als einheitliche Werkzeugleiste mit Schalter
- Warenkorb-Schublade: Dialog-Semantik, animierte Positionen, tickende
  Summe, gestalteter leerer Zustand

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

src/app/globals.css

@@ -34,16 +34,56 @@
 
   --font-serif: var(--font-cormorant), Georgia, serif;
   --font-sans: var(--font-inter), system-ui, sans-serif;
+
+  /* Eine Bewegungssprache fuer die ganze Seite: selbstbewusstes Ankommen,
+     schnelles Gehen (siehe impeccable animate: exit faster than entrance). */
+  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);
 }
 
 html {
   scroll-behavior: smooth;
+  /* Browserflaechen tragen die Marke mit: Scrollbar im Waldton statt Grau. */
+  scrollbar-color: color-mix(in oklab, var(--color-forest) 45%, transparent) transparent;
+  accent-color: var(--color-forest);
 }
 
 body {
   background: var(--color-background);
   color: var(--color-ink);
   font-family: var(--font-sans);
+  caret-color: var(--color-honey-dark);
+}
+
+/* Feine Papierkoernung ueber allem: bricht die digitale Glaette der
+   Cremeflaechen, wie Etikettenpapier auf dem Glas. Fest, klickdurchlaessig,
+   sehr leise — auf dunklen Flaechen kaum, auf hellen gerade spuerbar. */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  pointer-events: none;
+  opacity: 0.032;
+  mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-honey-dark);
+  outline-offset: 3px;
+}
+
+a {
+  text-underline-offset: 0.22em;
+  text-decoration-thickness: 1px;
+}
+
+/* Preise, Mengen, Datumsangaben: gleich breite Ziffern, damit Spalten und
+   wechselnde Summen nicht springen. */
+.tabular-nums,
+[data-numeric] {
+  font-variant-numeric: tabular-nums;
 }
 
 h1,
@@ -66,8 +106,30 @@ p {
 }
 
 ::selection {
-  background: var(--color-honey);
-  color: var(--color-cream);
+  /* Honig auf Creme erreichte nur ~2,6:1 — markierter Text war kaum lesbar. */
+  background: var(--color-honey-pale);
+  color: var(--color-forest);
+}
+
+/* Unterstrich, der beim Hover von links "einlaeuft" — fuer Textlinks in
+   Fliesstext und Navigation. */
+.link-draw {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: 0% 1px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition: background-size 350ms var(--ease-arrive);
+}
+.link-draw:hover,
+.link-draw:focus-visible,
+.link-draw[aria-current="page"] {
+  background-size: 100% 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .link-draw {
+    transition: none;
+  }
 }
 
 /* Knopf eines gerade laufenden Server-Action-Formulars (components/