feat(ui): Kopfzeile, Fusszeile und Details mit mehr Leben

- Kopfzeile: aktive Seite mit Honig-Unterstrich (auch im Handy-Menue),
  einlaufende Unterstriche beim Hover, beim Scrollen Glas und Schatten;
  weicht beim Runterscrollen aus und ist beim Hochscrollen sofort zurueck
  (steht still, solange Warenkorb oder Menue offen sind)
- Fusszeile mit Wabenraster und einlaufenden Link-Unterstrichen
- Mengensteller: gezeichnete Plus/Minus, taktiles Druecken, tickende Zahl
- Newsletter als eigene Flaeche mit Wabenraster; Erfolg zeichnet ein
  Haekchen in eine Wabe, Fehler werden als Alert angesagt
- 404: Wabe mit einer fehlenden Zelle als Bild fuer die fehlende Seite

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

src/app/not-found.tsx

@@ -15,6 +15,40 @@ export default async function NotFound() {
   return (
     <div className="py-24">
       <Container className="max-w-xl text-center">
+        {/* Eine Wabe, in der genau eine Zelle fehlt — diese Seite. */}
+        <svg viewBox="0 0 120 104" className="mx-auto mb-10 h-28 w-32" fill="none" aria-hidden="true">
+          {/* Exakte Wabengeometrie: Spaltenabstand sqrt(3)*r, Zeilenabstand 1,5*r,
+              jede zweite Zeile um eine halbe Spalte versetzt. */}
+          {[
+            [0.5, 0],
+            [1.5, 0],
+            [0, 1],
+            [1, 1],
+            [2, 1],
+            [0.5, 2],
+            [1.5, 2],
+          ].map(([col, row], i) => {
+            const r = 17;
+            const cx = 60 + (col - 1) * Math.sqrt(3) * (r + 1);
+            const cy = 52 + (row - 1) * 1.5 * (r + 1);
+            const points = Array.from({ length: 6 }, (_, k) => {
+              const a = (Math.PI / 3) * k - Math.PI / 2;
+              return `${(cx + r * Math.cos(a)).toFixed(1)},${(cy + r * Math.sin(a)).toFixed(1)}`;
+            }).join(" ");
+            const missing = i === 4;
+            return (
+              <polygon
+                key={i}
+                points={points}
+                stroke={missing ? "var(--color-honey-dark)" : "var(--color-honey)"}
+                strokeWidth="1.5"
+                strokeDasharray={missing ? "3 3" : undefined}
+                fill={missing ? "none" : i % 3 === 0 ? "var(--color-honey)" : "color-mix(in oklab, var(--color-honey) 35%, transparent)"}
+                className={missing ? "motion-pulse animate-pulse" : undefined}
+              />
+            );
+          })}
+        </svg>
         <SectionHeading
           eyebrow={t.notFoundPage.eyebrow}
           title={t.notFoundPage.title}