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/app/warenkorb/warenkorb-content.tsx

@@ -76,7 +76,7 @@ export function WarenkorbContent({
           // verfuegbaren Honige, statt nur eines Satzes und eines Knopfs.
           <div className="mt-14 grid gap-12 lg:grid-cols-12 lg:gap-16">
             <div className="lg:col-span-4">
-              <p className="font-serif text-2xl leading-snug text-forest">{t.cart.empty}</p>
+              <p className="font-serif text-2xl leading-snug text-heading">{t.cart.empty}</p>
               <LinkButton href="/shop" variant="secondary" className="mt-6">
                 {t.cartPage.goToShop}
               </LinkButton>
@@ -106,7 +106,7 @@ export function WarenkorbContent({
                   >
                     <CartItemThumbnail image={item.image} className="w-20 h-20 flex-shrink-0 rounded-lg" />
                     <div className="flex-1 min-w-[160px]">
-                      <Link href={`/honig/${item.slug}`} className="link-draw pb-0.5 font-serif text-2xl text-forest">
+                      <Link href={`/honig/${item.slug}`} className="link-draw pb-0.5 font-serif text-2xl text-heading">
                         {item.name}
                       </Link>
                       <p className="text-sm text-ink/65">{item.weightGrams} g</p>
@@ -127,7 +127,7 @@ export function WarenkorbContent({
                         onChange={(quantity) => setQuantity(item.productId, quantity)}
                         max={itemStock ?? 10}
                       />
-                      <span className="w-24 text-right font-serif text-xl text-forest tabular-nums">
+                      <span className="w-24 text-right font-serif text-xl text-heading tabular-nums">
                         {formatPrice(item.priceCents * item.quantity, "EUR", locale)}
                       </span>
                       <button
@@ -166,7 +166,7 @@ export function WarenkorbContent({
                     initial={{ opacity: 0, scale: 0.96 }}
                     animate={{ opacity: 1, scale: 1 }}
                     transition={{ type: "spring", stiffness: 380, damping: 22 }}
-                    className="flex items-center justify-between rounded-sm bg-honey/10 px-3 py-2 text-forest"
+                    className="flex items-center justify-between rounded-sm bg-honey/10 px-3 py-2 text-heading"
                   >
                     <span className="flex items-center gap-2">
                       <HexCheck className="h-4 w-4 text-honey-dark" />
@@ -193,7 +193,7 @@ export function WarenkorbContent({
                     </div>
                   </div>
                 ) : null}
-                <div className="flex items-baseline justify-between text-forest pt-4 border-t border-ink/10">
+                <div className="flex items-baseline justify-between text-heading pt-4 border-t border-ink/10">
                   <span className="text-base">{t.cartPage.total}</span>
                   <motion.span
                     key={subtotal - bulkDiscountCents + shipping}
@@ -208,7 +208,7 @@ export function WarenkorbContent({
               <LinkButton href="/checkout" className="w-full mt-6">
                 {t.cart.checkout}
               </LinkButton>
-              <Link href="/versand-zahlung" className="mt-4 block text-center text-xs text-ink/70 hover:text-forest underline">
+              <Link href="/versand-zahlung" className="mt-4 block text-center text-xs text-ink/70 hover:text-heading underline">
                 {t.cartPage.pickupHint}
               </Link>
               <TrustBadges className="mt-6 pt-6 border-t border-ink/10" />
@@ -218,7 +218,7 @@ export function WarenkorbContent({
 
         {items.length > 0 && crossSellProducts.length > 0 ? (
           <div className="mt-20">
-            <h2 className="text-3xl md:text-4xl text-forest mb-10">{t.productPage.relatedProductsHeading}</h2>
+            <h2 className="text-3xl md:text-4xl text-heading mb-10">{t.productPage.relatedProductsHeading}</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-14">
               {crossSellProducts.map((product, index) => (
                 <ProductCard key={product.id} product={product} index={index} />