feat(ui): Dunkelmodus fuer Shop und Admin mit Umschalter

Rollen-Farben statt reiner Markenfarben, damit hell und dunkel aus einem
Satz Klassen entstehen:
- heading (Ueberschriften, Links, Rahmen): hell Waldgruen, dunkel Creme
- surface (abgesetzte Flaeche): hell Creme, dunkel angehobenes Dunkelgruen
- forest bleibt die dunkle Markenflaeche (Hero, Baender, Knoepfe,
  Admin-Leiste), cream der helle Text darauf
- honey-deep als fester Honigton fuer Flaechen; honey-dark (Text) wird
  im Dunkelmodus heller und bleibt lesbar
Codemod ueber src: text-/border-forest -> *-heading, bg-cream ->
bg-surface, bg-honey-dark -> bg-honey-deep. Im hellen Modus haben die
Rollen exakt die bisherigen Werte - das Erscheinungsbild bleibt gleich.

Umschalter (components/theme-toggle.tsx) Automatisch -> Hell -> Dunkel in
Kopfzeile, Mobilmenue und Admin-Leiste. Die Wahl liegt im Cookie "theme"
(nur light/dark, geprueft in lib/theme.ts); der Server setzt data-theme
schon beim Ausliefern, nichts blitzt hell auf. "Automatisch" folgt der
Systemeinstellung. Gewaehlter und automatischer Dunkelblock in
globals.css werden per Test auf Gleichheit geprueft.

Logo, Biene und Select-Pfeil nutzen die Rollenfarben. In der Kopfzeile
steht "Honig entdecken" zwischen 1280 und 1535 px nicht mehr doppelt
neben "Shop" (sonst stiess die Navigation an), der Slogan erscheint erst
ab 1680 px.

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

src/components/account-ui.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 
 /**
  * Verlinkte Karte fuer die Konto-Uebersicht (Bestellungen, Adressen, ...).
- * Ersetzt den zuvor identischen, icon-losen "border + hover:border-forest"-
+ * Ersetzt den zuvor identischen, icon-losen "border + hover:border-heading"-
  * Kartenstil, der auf jeder Konto-Seite gleich aussah.
  */
 export function AccountNavCard({
@@ -27,7 +27,7 @@ export function AccountNavCard({
       className={`group relative flex items-start gap-5 border p-6 transition-[transform,border-color,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-1 ${
         accent
           ? "border-honey/40 bg-honey/5 hover:border-honey hover:shadow-[0_22px_40px_-24px_rgba(184,138,68,0.45)]"
-          : "border-ink/10 bg-background hover:border-forest/60 hover:shadow-[0_22px_40px_-24px_rgba(36,53,43,0.35)]"
+          : "border-ink/10 bg-background hover:border-heading/60 hover:shadow-[0_22px_40px_-24px_rgba(36,53,43,0.35)]"
       } ${className}`}
     >
       {/* Icon in einer Wabe, die sich beim Hover mit Honig fuellt. */}
@@ -39,20 +39,20 @@ export function AccountNavCard({
         />
         <span
           className={`relative transition-colors duration-500 group-hover:text-cream ${
-            accent ? "text-honey-dark" : "text-forest"
+            accent ? "text-honey-dark" : "text-heading"
           }`}
         >
           {icon}
         </span>
       </span>
       <span className="flex-1 pt-1">
-        <span className="block font-serif text-2xl leading-tight text-forest">{title}</span>
+        <span className="block font-serif text-2xl leading-tight text-heading">{title}</span>
         <span className="block mt-1.5 text-sm text-ink/70">{description}</span>
       </span>
       <svg
         aria-hidden="true"
         viewBox="0 0 24 24"
-        className="mt-2 h-4 w-4 flex-shrink-0 -translate-x-2 text-forest opacity-0 transition-[opacity,transform] duration-500 ease-[var(--ease-arrive)] group-hover:translate-x-0 group-hover:opacity-100"
+        className="mt-2 h-4 w-4 flex-shrink-0 -translate-x-2 text-heading opacity-0 transition-[opacity,transform] duration-500 ease-[var(--ease-arrive)] group-hover:translate-x-0 group-hover:opacity-100"
         fill="none"
         stroke="currentColor"
         strokeWidth="1.6"
@@ -68,9 +68,9 @@ const ORDER_STATUS_STYLES: Record<string, string> = {
   BEZAHLT: "border-honey/40 text-honey-dark bg-honey/5",
   IN_VORBEREITUNG: "border-honey/40 text-honey-dark bg-honey/5",
   VERSANDBEREIT: "border-honey/40 text-honey-dark bg-honey/5",
-  VERSENDET: "border-forest/40 text-forest bg-forest/5",
-  ABHOLBEREIT: "border-forest/40 text-forest bg-forest/5",
-  ABGEHOLT: "border-forest/40 text-forest bg-forest/5",
+  VERSENDET: "border-heading/40 text-heading bg-forest/5",
+  ABHOLBEREIT: "border-heading/40 text-heading bg-forest/5",
+  ABGEHOLT: "border-heading/40 text-heading bg-forest/5",
   STORNIERT: "border-red-200 text-red-700 bg-red-50",
 };
 
@@ -182,7 +182,7 @@ export function OrderStatusTimeline({
                 </span>
               ) : null}
             </div>
-            <p className={`mt-2 text-[11px] text-center leading-tight ${isDone ? "text-forest" : "text-ink/55"}`}>
+            <p className={`mt-2 text-[11px] text-center leading-tight ${isDone ? "text-heading" : "text-ink/55"}`}>
               {step.label}
             </p>
           </div>
@@ -218,7 +218,7 @@ export function AccountEmptyState({
         </svg>
         <span className="relative">{icon}</span>
       </span>
-      <p className="mt-5 font-serif text-2xl text-forest">{title}</p>
+      <p className="mt-5 font-serif text-2xl text-heading">{title}</p>
       {description ? (
         <p className="mt-1 text-sm text-ink/70 max-w-sm mx-auto">{description}</p>
       ) : null}