From 6950657c91912b01ee2a954160992b88dd9fe656 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sat, 26 Sep 2026 06:12:44 +0200
Subject: [PATCH] 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) <noreply@anthropic.com>
---
 src/app/admin/anfragen/page.tsx               |  4 +-
 src/app/admin/audit-log/page.tsx              |  2 +-
 src/app/admin/benutzer/[id]/page.tsx          |  4 +-
 src/app/admin/benutzer/neu/page.tsx           |  2 +-
 src/app/admin/benutzer/page.tsx               |  2 +-
 src/app/admin/bestellungen/[id]/page.tsx      | 10 +--
 src/app/admin/bestellungen/page.tsx           |  4 +-
 src/app/admin/bewertungen/page.tsx            |  2 +-
 src/app/admin/chargen/[id]/page.tsx           |  2 +-
 src/app/admin/chargen/page.tsx                |  4 +-
 src/app/admin/ernten/[id]/page.tsx            |  2 +-
 src/app/admin/ernten/page.tsx                 |  4 +-
 src/app/admin/error.tsx                       |  4 +-
 src/app/admin/gutscheine/[id]/page.tsx        |  2 +-
 src/app/admin/gutscheine/neu/page.tsx         |  2 +-
 src/app/admin/gutscheine/page.tsx             |  2 +-
 src/app/admin/inhalte/page.tsx                | 22 +++---
 src/app/admin/layout.tsx                      |  4 +
 src/app/admin/page.tsx                        | 32 ++++----
 src/app/admin/produkte/[id]/page.tsx          |  2 +-
 src/app/admin/produkte/neu/page.tsx           |  2 +-
 src/app/admin/retouren/page.tsx               |  4 +-
 src/app/admin/versand/[id]/page.tsx           |  2 +-
 src/app/admin/versand/neu/page.tsx            |  2 +-
 src/app/admin/versand/page.tsx                |  2 +-
 src/app/bestellung-verfolgen/page.tsx         | 14 ++--
 src/app/charge/[code]/page.tsx                |  4 +-
 src/app/checkout/checkout-form.tsx            | 36 ++++-----
 src/app/checkout/embedded-payment.tsx         |  2 +-
 src/app/checkout/success/page.tsx             |  2 +-
 src/app/ernten/[year]/[type]/page.tsx         | 10 +--
 src/app/ernten/page.tsx                       |  4 +-
 src/app/globals.css                           | 59 +++++++++++++--
 src/app/herkunft/page.tsx                     |  2 +-
 src/app/honig/[slug]/page.tsx                 | 28 +++----
 src/app/imkerei/page.tsx                      |  2 +-
 src/app/kontakt/page.tsx                      |  2 +-
 src/app/konto/adressen/page.tsx               | 12 +--
 .../konto/bestellungen/[id]/retoure/page.tsx  |  4 +-
 src/app/konto/bestellungen/page.tsx           | 12 +--
 src/app/konto/page.tsx                        | 20 ++---
 src/app/konto/passwort-vergessen/page.tsx     |  2 +-
 src/app/konto/passwort-zuruecksetzen/page.tsx |  2 +-
 src/app/konto/zwei-faktor-code/page.tsx       |  2 +-
 .../konto/zwei-faktor/backup-codes/page.tsx   |  2 +-
 src/app/konto/zwei-faktor/einrichten/page.tsx |  2 +-
 src/app/konto/zwei-faktor/page.tsx            |  4 +-
 src/app/layout.tsx                            | 13 +++-
 src/app/newsletter-bestaetigt/page.tsx        |  2 +-
 src/app/rechnung/[invoiceNumber]/page.tsx     |  8 +-
 src/app/shop/page.tsx                         | 18 ++---
 src/app/unternehmen/page.tsx                  |  2 +-
 src/app/warenkorb/warenkorb-content.tsx       | 14 ++--
 src/app/wissen/[slug]/page.tsx                |  6 +-
 src/app/wissen/page.tsx                       |  2 +-
 src/components/account-ui.tsx                 | 20 ++---
 src/components/admin-archive.tsx              |  4 +-
 src/components/admin-command-palette.tsx      |  2 +-
 src/components/admin-form.tsx                 |  2 +-
 src/components/admin-image-field.tsx          |  2 +-
 src/components/admin-image-list-field.tsx     |  2 +-
 src/components/admin-list.tsx                 | 10 +--
 src/components/admin-shell.tsx                | 24 ++++--
 src/components/admin-video-field.tsx          |  2 +-
 src/components/apicore-sync-panel.tsx         |  4 +-
 src/components/back-link.tsx                  |  2 +-
 src/components/bee.tsx                        |  8 +-
 src/components/business-inquiry-form.tsx      | 10 +--
 src/components/copy-code-button.tsx           |  2 +-
 src/components/flash-toast.tsx                |  2 +-
 src/components/home-sections-a.tsx            |  8 +-
 src/components/home-sections-b.tsx            |  6 +-
 src/components/language-switcher.tsx          |  2 +-
 src/components/legal-page.tsx                 |  4 +-
 src/components/logomark.tsx                   |  2 +-
 src/components/newsletter-signup.tsx          |  4 +-
 src/components/page-outro.tsx                 |  2 +-
 src/components/password-field.tsx             |  4 +-
 src/components/placeholder-image.tsx          |  2 +-
 src/components/process-path.tsx               |  2 +-
 src/components/product-card.tsx               | 16 ++--
 src/components/product-gallery.tsx            |  2 +-
 src/components/quantity-stepper.tsx           |  2 +-
 src/components/recently-viewed-section.tsx    |  2 +-
 src/components/shipment-tracking-history.tsx  |  8 +-
 src/components/site-chrome.tsx                | 40 ++++++----
 src/components/sticky-add-to-cart-bar.tsx     |  2 +-
 src/components/theme-toggle.tsx               | 74 +++++++++++++++++++
 src/components/trust-badges.tsx               |  2 +-
 src/components/ui.tsx                         |  8 +-
 src/i18n/dictionaries/de.ts                   |  6 ++
 src/i18n/dictionaries/en.ts                   |  6 ++
 src/i18n/dictionary-type.ts                   |  6 ++
 src/lib/theme.test.ts                         | 43 +++++++++++
 src/lib/theme.ts                              | 21 ++++++
 95 files changed, 514 insertions(+), 272 deletions(-)
 create mode 100644 src/components/theme-toggle.tsx
 create mode 100644 src/lib/theme.test.ts
 create mode 100644 src/lib/theme.ts

diff --git a/src/app/admin/anfragen/page.tsx b/src/app/admin/anfragen/page.tsx
index 724fe70..11b4efb 100644
--- a/src/app/admin/anfragen/page.tsx
+++ b/src/app/admin/anfragen/page.tsx
@@ -64,7 +64,7 @@ export default async function AdminInquiriesPage(props: PageProps<"/admin/anfrag
             <div className="flex flex-wrap items-start justify-between gap-4">
               <div>
                 <div className="flex flex-wrap items-center gap-3">
-                  <p className="text-forest">{inquiry.companyName}</p>
+                  <p className="text-heading">{inquiry.companyName}</p>
                   <AdminBadge tone={STATUS_TONES[inquiry.status] ?? "neutral"} pulse={inquiry.status === "NEU"}>
                     {statusLabels[inquiry.status] ?? inquiry.status}
                   </AdminBadge>
@@ -91,7 +91,7 @@ export default async function AdminInquiriesPage(props: PageProps<"/admin/anfrag
                 </select>
                 <button
                   type="submit"
-                  className="border border-forest px-3 py-1.5 text-xs text-forest transition-colors duration-300 hover:bg-forest hover:text-cream"
+                  className="border border-heading px-3 py-1.5 text-xs text-heading transition-colors duration-300 hover:bg-forest hover:text-cream"
                 >
                   {t.adminInquiriesPage.save}
                 </button>
diff --git a/src/app/admin/audit-log/page.tsx b/src/app/admin/audit-log/page.tsx
index 5efb3ab..80cfe1c 100644
--- a/src/app/admin/audit-log/page.tsx
+++ b/src/app/admin/audit-log/page.tsx
@@ -35,7 +35,7 @@ export default async function AdminAuditLogPage() {
               <tr key={entry.id} className="transition-colors hover:bg-ink/[0.03]">
                 <td className="p-4 whitespace-nowrap tabular-nums text-ink/70">{formatDateTime(entry.createdAt)}</td>
                 <td className="p-4 whitespace-nowrap">{entry.adminEmail}</td>
-                <td className="p-4 whitespace-nowrap font-mono text-xs text-forest">{entry.action}</td>
+                <td className="p-4 whitespace-nowrap font-mono text-xs text-heading">{entry.action}</td>
                 <td className="p-4 whitespace-nowrap text-ink/70">
                   {entry.entityType}
                   {entry.entityId ? <span className="text-ink/65"> #{entry.entityId.slice(-6)}</span> : null}
diff --git a/src/app/admin/benutzer/[id]/page.tsx b/src/app/admin/benutzer/[id]/page.tsx
index b013fc4..32fa2de 100644
--- a/src/app/admin/benutzer/[id]/page.tsx
+++ b/src/app/admin/benutzer/[id]/page.tsx
@@ -34,7 +34,7 @@ export default async function AdminBenutzerEditPage(props: PageProps<"/admin/ben
   return (
     <div className="max-w-2xl">
       <BackLink href="/admin/benutzer" label={tu.backToUsers} />
-      <h1 className="text-2xl text-forest mb-2">
+      <h1 className="text-2xl text-heading mb-2">
         {customer.firstName} {customer.lastName}
       </h1>
       <p className="text-sm text-ink/65 mb-8">{tu.createdOn(formatDate(customer.createdAt))}</p>
@@ -61,7 +61,7 @@ export default async function AdminBenutzerEditPage(props: PageProps<"/admin/ben
       </AdminFormPanel>
 
       <section className="mt-8 space-y-6 border border-ink/10 bg-background p-6 sm:p-8">
-        <h2 className="font-serif text-xl text-forest">{tu.securityHeading}</h2>
+        <h2 className="font-serif text-xl text-heading">{tu.securityHeading}</h2>
         <dl className="divide-y divide-ink/10 text-sm">
           <div className="flex items-center justify-between gap-4 py-3">
             <dt className="text-ink/70">{tu.twoFactorLabel}</dt>
diff --git a/src/app/admin/benutzer/neu/page.tsx b/src/app/admin/benutzer/neu/page.tsx
index 2b26a4b..974230e 100644
--- a/src/app/admin/benutzer/neu/page.tsx
+++ b/src/app/admin/benutzer/neu/page.tsx
@@ -12,7 +12,7 @@ export default async function AdminBenutzerNewPage() {
   return (
     <div className="max-w-xl">
       <BackLink href="/admin/benutzer" label={tu.backToUsers} />
-      <h1 className="text-2xl text-forest mb-2">{tu.title}</h1>
+      <h1 className="text-2xl text-heading mb-2">{tu.title}</h1>
       <p className="text-sm text-ink/70 mb-8">{tu.intro}</p>
 
       <AdminFormPanel action={createCustomerAction} actions={<Button type="submit">{tu.createAndSend}</Button>}>
diff --git a/src/app/admin/benutzer/page.tsx b/src/app/admin/benutzer/page.tsx
index 33b225c..32a9068 100644
--- a/src/app/admin/benutzer/page.tsx
+++ b/src/app/admin/benutzer/page.tsx
@@ -76,7 +76,7 @@ export default async function AdminBenutzerPage(props: PageProps<"/admin/benutze
 
               return (
                 <tr key={customer.id} className="transition-colors hover:bg-ink/[0.03]">
-                  <td className="p-4 text-forest">
+                  <td className="p-4 text-heading">
                     {customer.firstName} {customer.lastName}
                     {isSelf ? <span className="text-ink/65">{t.adminUsersPage.youSuffix}</span> : null}
                   </td>
diff --git a/src/app/admin/bestellungen/[id]/page.tsx b/src/app/admin/bestellungen/[id]/page.tsx
index a3cb0ad..3e4e791 100644
--- a/src/app/admin/bestellungen/[id]/page.tsx
+++ b/src/app/admin/bestellungen/[id]/page.tsx
@@ -52,7 +52,7 @@ export default async function AdminOrderDetailPage(props: PageProps<"/admin/best
       <div className="flex flex-wrap items-start justify-between gap-4 mb-8">
         <div>
           <div className="flex flex-wrap items-center gap-3">
-            <h1 className="text-2xl text-forest">{order.orderNumber}</h1>
+            <h1 className="text-2xl text-heading">{order.orderNumber}</h1>
             <OrderStatusBadge status={order.status} label={statusLabels[order.status] ?? order.status} />
           </div>
           <p className="text-sm text-ink/65 mt-1">{formatDate(order.createdAt)}</p>
@@ -161,7 +161,7 @@ export default async function AdminOrderDetailPage(props: PageProps<"/admin/best
           ) : dhlConfigured ? (
             <form action={createDhlLabelAction}>
               <input type="hidden" name="orderId" value={order.id} />
-              <button type="submit" className="bg-honey-dark text-cream px-4 py-2 text-sm">
+              <button type="submit" className="bg-honey-deep text-cream px-4 py-2 text-sm">
                 {t.adminOrderDetailPage.dhlCreateButton}
               </button>
             </form>
@@ -215,7 +215,7 @@ export default async function AdminOrderDetailPage(props: PageProps<"/admin/best
             {order.items.map((item) => (
               <tr key={item.id} className="transition-colors hover:bg-ink/[0.03]">
                 <td className="py-2">
-                  <Link href={`/admin/produkte/${item.productId}`} className="text-forest underline">
+                  <Link href={`/admin/produkte/${item.productId}`} className="text-heading underline">
                     {item.productName}
                   </Link>{" "}
                   <span className="text-ink/65">({item.weightGrams} g)</span>
@@ -249,7 +249,7 @@ export default async function AdminOrderDetailPage(props: PageProps<"/admin/best
                 <span>−{formatPrice(order.discountCents, order.currency)}</span>
               </div>
             ) : null}
-            <div className="flex justify-between text-forest pt-1 border-t border-ink/10">
+            <div className="flex justify-between text-heading pt-1 border-t border-ink/10">
               <span>{t.adminOrderDetailPage.totalLabel}</span>
               <span>{formatPrice(order.totalCents, order.currency)}</span>
             </div>
@@ -282,7 +282,7 @@ export default async function AdminOrderDetailPage(props: PageProps<"/admin/best
               <span>{order.invoice.invoiceNumber}</span>
               <a
                 href={`/rechnung/${order.invoice.invoiceNumber}/pdf`}
-                className="link-draw text-sm text-forest"
+                className="link-draw text-sm text-heading"
               >
                 {t.adminOrderDetailPage.downloadPdf}
               </a>
diff --git a/src/app/admin/bestellungen/page.tsx b/src/app/admin/bestellungen/page.tsx
index c113f7c..3ae8bb7 100644
--- a/src/app/admin/bestellungen/page.tsx
+++ b/src/app/admin/bestellungen/page.tsx
@@ -112,7 +112,7 @@ export default async function AdminOrdersPage(props: PageProps<"/admin/bestellun
           <tbody className="divide-y divide-ink/10">
             {orders.map((order) => (
               <tr key={order.id} className="transition-colors hover:bg-ink/[0.03]">
-                <td className="p-4 text-forest whitespace-nowrap">
+                <td className="p-4 text-heading whitespace-nowrap">
                   <Link href={`/admin/bestellungen/${order.id}`} className="link-draw">
                     {order.orderNumber}
                   </Link>
@@ -155,7 +155,7 @@ export default async function AdminOrdersPage(props: PageProps<"/admin/bestellun
                     </select>
                     <button
                       type="submit"
-                      className="border border-forest px-3 py-1.5 text-xs text-forest transition-colors duration-300 hover:bg-forest hover:text-cream"
+                      className="border border-heading px-3 py-1.5 text-xs text-heading transition-colors duration-300 hover:bg-forest hover:text-cream"
                     >
                       {t.adminOrdersPage.save}
                     </button>
diff --git a/src/app/admin/bewertungen/page.tsx b/src/app/admin/bewertungen/page.tsx
index 57b13e0..15ee4d9 100644
--- a/src/app/admin/bewertungen/page.tsx
+++ b/src/app/admin/bewertungen/page.tsx
@@ -71,7 +71,7 @@ export default async function AdminBewertungenPage(props: PageProps<"/admin/bewe
             {reviews.map((review) => (
               <tr key={review.id} className="transition-colors hover:bg-ink/[0.03]">
                 <td className="p-4">
-                  <Link href={`/honig/${review.product.slug}`} className="link-draw text-forest">
+                  <Link href={`/honig/${review.product.slug}`} className="link-draw text-heading">
                     {review.product.name}
                   </Link>
                 </td>
diff --git a/src/app/admin/chargen/[id]/page.tsx b/src/app/admin/chargen/[id]/page.tsx
index c0a0681..ee6703a 100644
--- a/src/app/admin/chargen/[id]/page.tsx
+++ b/src/app/admin/chargen/[id]/page.tsx
@@ -20,7 +20,7 @@ export default async function AdminBatchEditPage(props: PageProps<"/admin/charge
   return (
     <div className="max-w-2xl">
       <BackLink href="/admin/chargen" label={tb.backToBatches} />
-      <h1 className="text-2xl text-forest mb-2">{tb.title}</h1>
+      <h1 className="text-2xl text-heading mb-2">{tb.title}</h1>
       <p className="text-sm text-ink/65 mb-8">
         {batch.code} · {batch.harvest.type} {batch.harvest.year}
       </p>
diff --git a/src/app/admin/chargen/page.tsx b/src/app/admin/chargen/page.tsx
index 9098e80..f6b6a04 100644
--- a/src/app/admin/chargen/page.tsx
+++ b/src/app/admin/chargen/page.tsx
@@ -46,7 +46,7 @@ export default async function AdminBatchesPage() {
           <tbody className="divide-y divide-ink/10">
             {batches.map((batch) => (
               <tr key={batch.id} className="transition-colors hover:bg-ink/[0.03]">
-                <td className="p-4 text-forest">{batch.code}</td>
+                <td className="p-4 text-heading">{batch.code}</td>
                 <td className="p-4">
                   {batch.harvest.type} {batch.harvest.year}
                 </td>
@@ -81,7 +81,7 @@ export default async function AdminBatchesPage() {
       </div>
 
       <div className="mt-10 bg-background border border-ink/10 p-6 max-w-xl">
-        <h2 className="font-serif text-xl text-forest mb-4">{t.adminBatchesPage.newBatchHeading}</h2>
+        <h2 className="font-serif text-xl text-heading mb-4">{t.adminBatchesPage.newBatchHeading}</h2>
         <form action={createBatchAction} className="space-y-4">
           <div className="grid grid-cols-2 items-end gap-4">
             <AdminField
diff --git a/src/app/admin/ernten/[id]/page.tsx b/src/app/admin/ernten/[id]/page.tsx
index 219073a..029a2ee 100644
--- a/src/app/admin/ernten/[id]/page.tsx
+++ b/src/app/admin/ernten/[id]/page.tsx
@@ -29,7 +29,7 @@ export default async function AdminHarvestEditPage(props: PageProps<"/admin/ernt
   return (
     <div className="max-w-2xl">
       <BackLink href="/admin/ernten" label={th.backToHarvests} />
-      <h1 className="text-2xl text-forest mb-8">{th.title}</h1>
+      <h1 className="text-2xl text-heading mb-8">{th.title}</h1>
 
       {harvest.isPublished ? null : (
         <div className="mb-6 flex flex-col justify-between gap-3 border border-honey/40 bg-honey/5 px-4 py-3 sm:flex-row sm:items-center">
diff --git a/src/app/admin/ernten/page.tsx b/src/app/admin/ernten/page.tsx
index 4effb64..983415a 100644
--- a/src/app/admin/ernten/page.tsx
+++ b/src/app/admin/ernten/page.tsx
@@ -47,7 +47,7 @@ export default async function AdminHarvestsPage() {
           <tbody className="divide-y divide-ink/10">
             {harvests.map((harvest) => (
               <tr key={harvest.id} className="transition-colors hover:bg-ink/[0.03]">
-                <td className="p-4 text-forest">{harvest.type}</td>
+                <td className="p-4 text-heading">{harvest.type}</td>
                 <td className="p-4 tabular-nums">{harvest.year}</td>
                 <td className="p-4 whitespace-nowrap tabular-nums">{formatDate(harvest.harvestDate)}</td>
                 <td className="p-4">{harvest.location}</td>
@@ -93,7 +93,7 @@ export default async function AdminHarvestsPage() {
 
       <div className="mt-10 max-w-xl">
         <div className="bg-background border border-ink/10 p-6">
-          <h2 className="font-serif text-xl text-forest mb-4">{t.adminHarvestsPage.newHarvestHeading}</h2>
+          <h2 className="font-serif text-xl text-heading mb-4">{t.adminHarvestsPage.newHarvestHeading}</h2>
           <form action={createHarvestAction} className="space-y-4">
             <div className="grid grid-cols-2 items-end gap-4">
               <AdminField name="type" label={t.adminHarvestsPage.typeLabel} required />
diff --git a/src/app/admin/error.tsx b/src/app/admin/error.tsx
index 54ca008..3fde286 100644
--- a/src/app/admin/error.tsx
+++ b/src/app/admin/error.tsx
@@ -21,13 +21,13 @@ export default function AdminError({
   return (
     <div className="py-20 text-center">
       <p className="tracking-wide-caps text-xs text-honey-dark mb-3">{t.errorPage.eyebrow}</p>
-      <h1 className="text-2xl text-forest">{t.errorPage.title}</h1>
+      <h1 className="text-2xl text-heading">{t.errorPage.title}</h1>
       <p className="mt-3 text-ink/70">{t.errorPage.description}</p>
       <div className="mt-6 flex items-center justify-center gap-4">
         <Button type="button" onClick={() => reset()}>
           {t.errorPage.retry}
         </Button>
-        <Link href="/admin" className="text-sm text-forest underline">
+        <Link href="/admin" className="text-sm text-heading underline">
           {t.adminVouchersPage.backToDashboard}
         </Link>
       </div>
diff --git a/src/app/admin/gutscheine/[id]/page.tsx b/src/app/admin/gutscheine/[id]/page.tsx
index 7ebb16b..2033f23 100644
--- a/src/app/admin/gutscheine/[id]/page.tsx
+++ b/src/app/admin/gutscheine/[id]/page.tsx
@@ -28,7 +28,7 @@ export default async function AdminGutscheinEditPage(props: PageProps<"/admin/gu
   return (
     <div className="max-w-2xl">
       <BackLink href="/admin/gutscheine" label={tv.backToVouchers} />
-      <h1 className="text-2xl text-forest mb-2">{tv.title}</h1>
+      <h1 className="text-2xl text-heading mb-2">{tv.title}</h1>
       <p className="text-sm text-ink/65 mb-8">{tv.redeemedSoFar(code.usedCount, code.maxUses)}</p>
 
       <AdminFormPanel action={updateDiscountCodeAction} actions={<Button type="submit">{tv.save}</Button>}>
diff --git a/src/app/admin/gutscheine/neu/page.tsx b/src/app/admin/gutscheine/neu/page.tsx
index 7aaf676..48dc19c 100644
--- a/src/app/admin/gutscheine/neu/page.tsx
+++ b/src/app/admin/gutscheine/neu/page.tsx
@@ -18,7 +18,7 @@ export default async function AdminGutscheinNewPage() {
   return (
     <div className="max-w-2xl">
       <BackLink href="/admin/gutscheine" label={tv.backToVouchers} />
-      <h1 className="text-2xl text-forest mb-8">{tv.title}</h1>
+      <h1 className="text-2xl text-heading mb-8">{tv.title}</h1>
 
       <AdminFormPanel action={createDiscountCodeAction} actions={<Button type="submit">{tv.create}</Button>}>
         <AdminFieldset legend={tv.sectionDiscount}>
diff --git a/src/app/admin/gutscheine/page.tsx b/src/app/admin/gutscheine/page.tsx
index dee312d..7ba8e66 100644
--- a/src/app/admin/gutscheine/page.tsx
+++ b/src/app/admin/gutscheine/page.tsx
@@ -42,7 +42,7 @@ export default async function AdminGutscheinePage() {
           <tbody className="divide-y divide-ink/10">
             {codes.map((code) => (
               <tr key={code.id} className="transition-colors hover:bg-ink/[0.03]">
-                <td className="p-4 text-forest font-mono">{code.code}</td>
+                <td className="p-4 text-heading font-mono">{code.code}</td>
                 <td className="p-4">
                   {code.type === "PERCENT" ? `${code.value} %` : formatPrice(code.value)}
                 </td>
diff --git a/src/app/admin/inhalte/page.tsx b/src/app/admin/inhalte/page.tsx
index f78f826..bbd4604 100644
--- a/src/app/admin/inhalte/page.tsx
+++ b/src/app/admin/inhalte/page.tsx
@@ -72,7 +72,7 @@ function FieldEditor({
           <select
             name={def.key}
             defaultValue={current}
-            className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-forest"
+            className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-heading"
           >
             {(def.options ?? []).map((option) => (
               <option key={option.value} value={option.value}>
@@ -92,7 +92,7 @@ function FieldEditor({
             rows={rows}
             defaultValue={row?.valueDe ?? ""}
             placeholder={def.getDefault("de")}
-            className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-forest"
+            className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-heading"
           />
         ) : (
           <input
@@ -100,7 +100,7 @@ function FieldEditor({
             name={def.key}
             defaultValue={row?.valueDe ?? ""}
             placeholder={def.getDefault("de")}
-            className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-forest"
+            className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-heading"
           />
         )}
       </label>
@@ -120,7 +120,7 @@ function FieldEditor({
               rows={rows}
               defaultValue={row?.valueDe ?? ""}
               placeholder={def.getDefault("de")}
-              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-forest"
+              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-heading"
             />
           ) : (
             <input
@@ -128,7 +128,7 @@ function FieldEditor({
               name={`de::${def.key}`}
               defaultValue={row?.valueDe ?? ""}
               placeholder={def.getDefault("de")}
-              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-forest"
+              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-heading"
             />
           )}
         </label>
@@ -140,7 +140,7 @@ function FieldEditor({
               rows={rows}
               defaultValue={row?.valueEn ?? ""}
               placeholder={def.getDefault("en")}
-              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-forest"
+              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-heading"
             />
           ) : (
             <input
@@ -148,7 +148,7 @@ function FieldEditor({
               name={`en::${def.key}`}
               defaultValue={row?.valueEn ?? ""}
               placeholder={def.getDefault("en")}
-              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-forest"
+              className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-heading"
             />
           )}
         </label>
@@ -185,7 +185,7 @@ function GroupForm({
       className="mb-10 bg-background border border-ink/10 p-6 space-y-6"
     >
       <input type="hidden" name="group" value={groupKeyValue} />
-      <h3 className="text-lg text-forest">{groupHeading}</h3>
+      <h3 className="text-lg text-heading">{groupHeading}</h3>
 
       {fields.map((def) => (
         <FieldEditor key={def.key} def={def} row={current.get(def.key)} locale={locale} t={t} />
@@ -216,11 +216,11 @@ export default async function AdminInhaltePage() {
   return (
     <div>
       <BackLink href="/admin" label={t.adminContentPage.backToDashboard} />
-      <h1 className="text-2xl text-forest mb-2">{t.adminContentPage.title}</h1>
+      <h1 className="text-2xl text-heading mb-2">{t.adminContentPage.title}</h1>
       <p className="text-sm text-ink/65 mb-8 max-w-2xl">{t.adminContentPage.intro}</p>
 
       <section className="mb-12">
-        <h2 className="text-xl text-forest mb-1">{t.adminContentPage.sectionImages}</h2>
+        <h2 className="text-xl text-heading mb-1">{t.adminContentPage.sectionImages}</h2>
         <p className="text-sm text-ink/65 mb-6 max-w-2xl">{t.adminContentPage.sectionImagesIntro}</p>
         {groups.map((group) => (
           <GroupForm
@@ -236,7 +236,7 @@ export default async function AdminInhaltePage() {
       </section>
 
       <section>
-        <h2 className="text-xl text-forest mb-1">{t.adminContentPage.sectionText}</h2>
+        <h2 className="text-xl text-heading mb-1">{t.adminContentPage.sectionText}</h2>
         <p className="text-sm text-ink/65 mb-6 max-w-2xl">{t.adminContentPage.sectionTextIntro}</p>
         {groups.map((group) => (
           <GroupForm
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 5525f3f..633751e 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -8,6 +8,8 @@ import { AdminShell } from "@/components/admin-shell";
 import { getLocale } from "@/i18n/locale";
 import { getDictionary } from "@/i18n/get-dictionary";
 import { getBrandAssets } from "@/lib/brand";
+import { cookies } from "next/headers";
+import { THEME_COOKIE, parseThemeChoice } from "@/lib/theme";
 
 // Admin-Daten (Bestellungen, Bestand) muessen immer aktuell sein; zudem
 // entkoppelt das den Docker-Build-Schritt von einer DB-Verbindung.
@@ -49,6 +51,7 @@ export default async function AdminLayout({ children }: LayoutProps<"/admin">) {
   // abgeholte Bestellungen (keine offenen Zahlungen), neue Retouren,
   // unfreigegebene Bewertungen, neue Firmenanfragen. Reine COUNT-Abfragen.
   const brand = await getBrandAssets();
+  const themeChoice = parseThemeChoice((await cookies()).get(THEME_COOKIE)?.value);
   const [openOrders, openReturns, pendingReviews, newInquiries] = await Promise.all([
     prisma.order.count({
       where: { status: { in: ["BEZAHLT", "IN_VORBEREITUNG", "VERSANDBEREIT", "ABHOLBEREIT"] }, archivedAt: null },
@@ -62,6 +65,7 @@ export default async function AdminLayout({ children }: LayoutProps<"/admin">) {
     <AdminShell
       adminName={`${admin.firstName} ${admin.lastName}`}
       logoSrc={brand.logoInverted}
+      themeChoice={themeChoice}
       badges={{
         "/admin/bestellungen": openOrders,
         "/admin/retouren": openReturns,
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 0d18dab..bc5a83e 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -303,7 +303,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
       {/* Begruessung statt nackter Ueberschrift: der Tag beginnt hier. */}
       <div className="mb-10">
         <p className="text-sm text-ink/60">{todayLine}</p>
-        <h1 className="mt-1 text-4xl md:text-5xl leading-tight text-forest">
+        <h1 className="mt-1 text-4xl md:text-5xl leading-tight text-heading">
           {t.adminDashboardPage.greeting(dayPart, admin?.firstName ?? "")}
         </h1>
       </div>
@@ -396,23 +396,23 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
         {/* Was jetzt ansteht — direkt anklickbar. Wartet nichts, gibt es eine
             kleine Belohnung statt einer leeren Liste. */}
         <section className="border border-ink/10 bg-background p-6 lg:col-span-2">
-          <h2 className="text-lg text-forest">{t.adminDashboardPage.toDoHeading}</h2>
+          <h2 className="text-lg text-heading">{t.adminDashboardPage.toDoHeading}</h2>
           {toDo.length > 0 ? (
             <ul className="mt-4 divide-y divide-ink/10">
               {toDo.map((item) => (
                 <li key={item.href}>
                   <Link
                     href={item.href}
-                    className="group flex items-center gap-3 py-3 text-sm text-ink/80 transition-colors hover:text-forest"
+                    className="group flex items-center gap-3 py-3 text-sm text-ink/80 transition-colors hover:text-heading"
                   >
-                    <span className="flex h-7 min-w-7 items-center justify-center rounded-full bg-honey-dark px-2 text-xs font-semibold text-cream tabular-nums">
+                    <span className="flex h-7 min-w-7 items-center justify-center rounded-full bg-honey-deep px-2 text-xs font-semibold text-cream tabular-nums">
                       {item.count}
                     </span>
                     <span className="flex-1">{item.label}</span>
                     <svg
                       aria-hidden="true"
                       viewBox="0 0 24 24"
-                      className="h-4 w-4 text-ink/40 transition-[color,transform] duration-300 group-hover:translate-x-1 group-hover:text-forest"
+                      className="h-4 w-4 text-ink/40 transition-[color,transform] duration-300 group-hover:translate-x-1 group-hover:text-heading"
                       fill="none"
                       stroke="currentColor"
                       strokeWidth="1.6"
@@ -430,7 +430,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
                 <path d="M7.5 13.2l3 3 6-6.4" stroke="var(--color-cream)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
               <div>
-                <p className="font-serif text-xl text-forest">{t.adminDashboardPage.allDoneTitle}</p>
+                <p className="font-serif text-xl text-heading">{t.adminDashboardPage.allDoneTitle}</p>
                 <p className="mt-1 text-sm text-ink/65">{t.adminDashboardPage.allDoneText}</p>
               </div>
             </div>
@@ -448,11 +448,11 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
                 key={stat.key}
                 className="group border border-ink/10 bg-background p-5 transition-[border-color,transform] duration-300 hover:-translate-y-0.5 hover:border-honey/50"
               >
-                <span className="flex h-9 w-9 items-center justify-center border border-ink/10 text-forest transition-colors group-hover:border-honey/50 group-hover:text-honey-dark">
+                <span className="flex h-9 w-9 items-center justify-center border border-ink/10 text-heading transition-colors group-hover:border-honey/50 group-hover:text-honey-dark">
                   <Icon />
                 </span>
                 <p className="mt-4 text-xs text-ink/60">{statLabels[stat.key]}</p>
-                <p className="mt-1 text-2xl font-semibold text-forest">{stat.value}</p>
+                <p className="mt-1 text-2xl font-semibold text-heading">{stat.value}</p>
               </div>
             );
           })}
@@ -460,7 +460,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
 
       <div className="mt-10 grid lg:grid-cols-2 gap-6">
         <div className="bg-background border border-ink/10 p-6 transition-colors hover:border-ink/20">
-          <h2 className="text-lg text-forest mb-4">{t.adminDashboardPage.topProductsHeading}</h2>
+          <h2 className="text-lg text-heading mb-4">{t.adminDashboardPage.topProductsHeading}</h2>
           {topProducts.length === 0 ? (
             <p className="text-sm text-ink/65">{t.adminDashboardPage.noSalesYet}</p>
           ) : (
@@ -469,13 +469,13 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
                 <li key={product.name} className="flex items-center justify-between gap-4">
                   <span className="flex items-center gap-3 text-ink/80">
                     <span className="relative flex h-6 w-6 flex-shrink-0 items-center justify-center text-[10px] font-semibold text-cream">
-                      <HexMark className={`absolute inset-0 h-6 w-6 ${i === 0 ? "text-[var(--color-chart-honey)]" : "text-forest/70"}`} />
+                      <HexMark className={`absolute inset-0 h-6 w-6 ${i === 0 ? "text-[var(--color-chart-honey)]" : "text-heading/70"}`} />
                       <span className="relative">{i + 1}</span>
                     </span>
                     {product.name}{" "}
                     <span className="text-ink/65">{t.adminDashboardPage.unitsSuffix(product.quantity)}</span>
                   </span>
-                  <span className="text-forest whitespace-nowrap">{formatPrice(product.revenueCents)}</span>
+                  <span className="text-heading whitespace-nowrap">{formatPrice(product.revenueCents)}</span>
                 </li>
               ))}
             </ul>
@@ -483,7 +483,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
         </div>
 
         <div className="bg-background border border-ink/10 p-6 transition-colors hover:border-ink/20">
-          <h2 className="text-lg text-forest mb-4">
+          <h2 className="text-lg text-heading mb-4">
             {t.adminDashboardPage.revenueByCategoryHeading}
           </h2>
           {revenueByCategory.length === 0 ? (
@@ -496,7 +496,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
                     <span className="text-ink/70">
                       {t.common.categories[category as keyof typeof t.common.categories] ?? category}
                     </span>
-                    <span className="text-forest">{formatPrice(totals.revenueCents)}</span>
+                    <span className="text-heading">{formatPrice(totals.revenueCents)}</span>
                   </div>
                   {/* Meter: Spur ist eine hellere Stufe desselben Tons. */}
                   <div className="h-2 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--color-chart-honey)_15%,transparent)]">
@@ -514,7 +514,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
 
       <div className="mt-6 grid lg:grid-cols-2 gap-6">
         <div className="bg-background border border-ink/10 p-6 transition-colors hover:border-ink/20">
-          <h2 className="text-lg text-forest mb-4">
+          <h2 className="text-lg text-heading mb-4">
             {t.adminDashboardPage.revenueTrendHeading(REVENUE_TREND_DAYS)}
           </h2>
           {/* Balken nach dataviz-Skill: duenn, 4px gerundete Kappe an der
@@ -553,7 +553,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
         </div>
 
         <div className="bg-background border border-ink/10 p-6 transition-colors hover:border-ink/20">
-          <h2 className="text-lg text-forest mb-4">{t.adminDashboardPage.topVouchersHeading}</h2>
+          <h2 className="text-lg text-heading mb-4">{t.adminDashboardPage.topVouchersHeading}</h2>
           {topDiscountCodes.length === 0 ? (
             <p className="text-sm text-ink/65">{t.adminDashboardPage.noVouchersYet}</p>
           ) : (
@@ -566,7 +566,7 @@ export default async function AdminDashboardPage(props: PageProps<"/admin">) {
                       ({code.type === "PERCENT" ? `${code.value} %` : formatPrice(code.value)})
                     </span>
                   </span>
-                  <span className="text-forest whitespace-nowrap">
+                  <span className="text-heading whitespace-nowrap">
                     {t.adminDashboardPage.usedCountLabel(code.usedCount, code.maxUses)}
                   </span>
                 </li>
diff --git a/src/app/admin/produkte/[id]/page.tsx b/src/app/admin/produkte/[id]/page.tsx
index 1518488..90edf50 100644
--- a/src/app/admin/produkte/[id]/page.tsx
+++ b/src/app/admin/produkte/[id]/page.tsx
@@ -34,7 +34,7 @@ export default async function AdminProductEditPage(props: PageProps<"/admin/prod
   return (
     <div className="max-w-2xl">
       <BackLink href="/admin/produkte" label={te.backToProducts} />
-      <h1 className="text-2xl text-forest mb-2">{te.title}</h1>
+      <h1 className="text-2xl text-heading mb-2">{te.title}</h1>
       <p className="text-sm text-ink/65 mb-8">
         {t.common.categories[product.category]}
         {product.harvest && product.batch
diff --git a/src/app/admin/produkte/neu/page.tsx b/src/app/admin/produkte/neu/page.tsx
index 5f2ec40..6881111 100644
--- a/src/app/admin/produkte/neu/page.tsx
+++ b/src/app/admin/produkte/neu/page.tsx
@@ -26,7 +26,7 @@ export default async function AdminProductNewPage() {
   return (
     <div className="max-w-2xl">
       <BackLink href="/admin/produkte" label={tn.backToProducts} />
-      <h1 className="text-2xl text-forest mb-8">{tn.title}</h1>
+      <h1 className="text-2xl text-heading mb-8">{tn.title}</h1>
       <AdminFormPanel
         action={createProductAction}
         className="group/product"
diff --git a/src/app/admin/retouren/page.tsx b/src/app/admin/retouren/page.tsx
index a1fa4d3..f447e47 100644
--- a/src/app/admin/retouren/page.tsx
+++ b/src/app/admin/retouren/page.tsx
@@ -99,7 +99,7 @@ export default async function AdminRetourenPage(props: PageProps<"/admin/retoure
           <div key={request.id} className="bg-background border border-ink/10 p-6">
             <div className="flex flex-wrap items-start justify-between gap-4">
               <div>
-                <p className="text-forest">{request.order.orderNumber}</p>
+                <p className="text-heading">{request.order.orderNumber}</p>
                 <p className="text-sm text-ink/70">
                   {request.order.firstName} {request.order.lastName} · {request.order.email}
                 </p>
@@ -136,7 +136,7 @@ export default async function AdminRetourenPage(props: PageProps<"/admin/retoure
                 </li>
               ))}
             </ul>
-            <p className="mt-2 text-forest tabular-nums">{formatPrice(request.order.totalCents, request.order.currency)}</p>
+            <p className="mt-2 text-heading tabular-nums">{formatPrice(request.order.totalCents, request.order.currency)}</p>
 
             <p className="mt-4 text-sm text-ink/70 border-t border-ink/10 pt-4">{request.reason}</p>
 
diff --git a/src/app/admin/versand/[id]/page.tsx b/src/app/admin/versand/[id]/page.tsx
index 7be4f09..7f23980 100644
--- a/src/app/admin/versand/[id]/page.tsx
+++ b/src/app/admin/versand/[id]/page.tsx
@@ -17,7 +17,7 @@ export default async function AdminVersandEditPage(props: PageProps<"/admin/vers
   return (
     <div className="max-w-xl">
       <BackLink href="/admin/versand" label={ts.backToShipping} />
-      <h1 className="text-2xl text-forest mb-8">{ts.title}</h1>
+      <h1 className="text-2xl text-heading mb-8">{ts.title}</h1>
 
       <AdminFormPanel action={updateShippingTierAction} actions={<Button type="submit">{ts.save}</Button>}>
         <input type="hidden" name="id" value={tier.id} />
diff --git a/src/app/admin/versand/neu/page.tsx b/src/app/admin/versand/neu/page.tsx
index 9ba9cca..94572ec 100644
--- a/src/app/admin/versand/neu/page.tsx
+++ b/src/app/admin/versand/neu/page.tsx
@@ -12,7 +12,7 @@ export default async function AdminVersandNewPage() {
   return (
     <div className="max-w-xl">
       <BackLink href="/admin/versand" label={ts.backToShipping} />
-      <h1 className="text-2xl text-forest mb-8">{ts.title}</h1>
+      <h1 className="text-2xl text-heading mb-8">{ts.title}</h1>
 
       <AdminFormPanel action={createShippingTierAction} actions={<Button type="submit">{ts.create}</Button>}>
         <div className="space-y-4">
diff --git a/src/app/admin/versand/page.tsx b/src/app/admin/versand/page.tsx
index 0cf5e3f..2d99c31 100644
--- a/src/app/admin/versand/page.tsx
+++ b/src/app/admin/versand/page.tsx
@@ -35,7 +35,7 @@ export default async function AdminVersandPage() {
           <tbody className="divide-y divide-ink/10">
             {tiers.map((tier) => (
               <tr key={tier.id} className="transition-colors hover:bg-ink/[0.03]">
-                <td className="p-4 text-forest">
+                <td className="p-4 text-heading">
                   {tier.maxQuantity === null
                     ? t.adminShippingPage.quantityFrom(tier.minQuantity)
                     : t.adminShippingPage.quantityRange(tier.minQuantity, tier.maxQuantity)}
diff --git a/src/app/bestellung-verfolgen/page.tsx b/src/app/bestellung-verfolgen/page.tsx
index 5a3e5ba..238e57b 100644
--- a/src/app/bestellung-verfolgen/page.tsx
+++ b/src/app/bestellung-verfolgen/page.tsx
@@ -62,7 +62,7 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
               defaultValue={typeof orderNumber === "string" ? orderNumber : ""}
               placeholder={t.trackOrderPage.orderNumberPlaceholder}
               required
-              className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+              className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
             />
           </label>
           <label className="block text-sm">
@@ -73,7 +73,7 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
               defaultValue={typeof email === "string" ? email : ""}
               required
               autoComplete="email"
-              className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+              className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
             />
           </label>
           <Button type="submit">{t.trackOrderPage.submit}</Button>
@@ -96,7 +96,7 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
           <div className="mt-10 border border-ink/10 bg-background p-6 shadow-[0_24px_50px_-34px_rgba(36,53,43,0.45)] sm:p-8">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div>
-                <p className="text-forest">{order.orderNumber}</p>
+                <p className="text-heading">{order.orderNumber}</p>
                 <p className="text-xs text-ink/65">{formatDate(order.createdAt, locale)}</p>
               </div>
               <div className="text-right">
@@ -122,7 +122,7 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
               {order.items.map((item) => (
                 <li key={item.id}>
                   {item.quantity} ×{" "}
-                  <Link href={`/honig/${item.product.slug}#bewertungen`} className="hover:text-forest hover:underline">
+                  <Link href={`/honig/${item.product.slug}#bewertungen`} className="hover:text-heading hover:underline">
                     {item.productName}
                   </Link>
                 </li>
@@ -157,7 +157,7 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
                     <>
                       {" "}
                       ·{" "}
-                      <a href={url} target="_blank" rel="noopener noreferrer" className="text-forest underline">
+                      <a href={url} target="_blank" rel="noopener noreferrer" className="text-heading underline">
                         {t.shipmentInfo.trackPackage}
                       </a>
                     </>
@@ -181,9 +181,9 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
             />
 
             <div className="mt-5 flex items-center justify-between gap-4">
-              <p className="font-serif text-2xl text-forest tabular-nums">{formatPrice(order.totalCents, order.currency, locale)}</p>
+              <p className="font-serif text-2xl text-heading tabular-nums">{formatPrice(order.totalCents, order.currency, locale)}</p>
               {order.invoice ? (
-                <Link href={`/rechnung/${order.invoice.invoiceNumber}`} className="text-sm text-forest underline">
+                <Link href={`/rechnung/${order.invoice.invoiceNumber}`} className="text-sm text-heading underline">
                   {t.trackOrderPage.viewInvoice}
                 </Link>
               ) : null}
diff --git a/src/app/charge/[code]/page.tsx b/src/app/charge/[code]/page.tsx
index 101c32e..4d3d9dc 100644
--- a/src/app/charge/[code]/page.tsx
+++ b/src/app/charge/[code]/page.tsx
@@ -80,7 +80,7 @@ export default async function BatchPage(props: PageProps<"/charge/[code]">) {
             </span>
             <span className="tracking-wide-caps text-xs text-honey-dark">{t.chargePage.verifiedBatch}</span>
           </div>
-          <h1 className="mt-6 text-5xl md:text-6xl leading-[1] tracking-[-0.015em] text-forest">
+          <h1 className="mt-6 text-5xl md:text-6xl leading-[1] tracking-[-0.015em] text-heading">
             {batch.harvest.type} {batch.harvest.year}
           </h1>
           <p className="mt-4 text-sm text-ink/70">{t.chargePage.provenanceNote(batch.code)}</p>
@@ -132,7 +132,7 @@ export default async function BatchPage(props: PageProps<"/charge/[code]">) {
                   ) : null}
                 </div>
                 <p className="mt-3 text-xs tracking-wide-caps text-ink/70">{step.label}</p>
-                <p className="mt-1 font-serif text-xl text-forest tabular-nums">{step.value}</p>
+                <p className="mt-1 font-serif text-xl text-heading tabular-nums">{step.value}</p>
               </li>
             ))}
           </ol>
diff --git a/src/app/checkout/checkout-form.tsx b/src/app/checkout/checkout-form.tsx
index a969dbe..e54e46f 100644
--- a/src/app/checkout/checkout-form.tsx
+++ b/src/app/checkout/checkout-form.tsx
@@ -378,14 +378,14 @@ export function CheckoutForm({
                     aria-pressed={selected}
                     className={`group relative flex items-center gap-4 border px-5 py-4 text-left transition-[border-color,background-color,box-shadow] duration-300 ${
                       selected
-                        ? "border-forest bg-forest/[0.04] text-forest shadow-[0_14px_30px_-22px_rgba(36,53,43,0.6)]"
-                        : "border-ink/15 text-ink/70 hover:border-forest/50"
+                        ? "border-heading bg-forest/[0.04] text-heading shadow-[0_14px_30px_-22px_rgba(36,53,43,0.6)]"
+                        : "border-ink/15 text-ink/70 hover:border-heading/50"
                     }`}
                   >
                     <span
                       aria-hidden="true"
                       className={`flex h-10 w-10 flex-shrink-0 items-center justify-center border transition-colors ${
-                        selected ? "border-forest bg-forest text-cream" : "border-ink/15 text-forest"
+                        selected ? "border-heading bg-forest text-cream" : "border-ink/15 text-heading"
                       }`}
                     >
                       {option === "VERSAND" ? (
@@ -431,8 +431,8 @@ export function CheckoutForm({
                   aria-pressed={deliveryTarget === option}
                   className={`flex-1 border px-4 py-3 text-sm transition-colors ${
                     deliveryTarget === option
-                      ? "border-forest bg-forest text-cream"
-                      : "border-ink/20 hover:border-forest"
+                      ? "border-heading bg-forest text-cream"
+                      : "border-ink/20 hover:border-heading"
                   }`}
                 >
                   {option === "ADRESSE"
@@ -482,7 +482,7 @@ export function CheckoutForm({
                     value={country}
                     onChange={(event) => setCountry(event.target.value)}
                     autoComplete="country"
-                    className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-forest"
+                    className="mt-1 w-full border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-heading"
                   >
                     {countryCodes.map((code) => (
                       <option key={code} value={code}>
@@ -502,12 +502,12 @@ export function CheckoutForm({
               <p className="text-xs text-ink/70">{t.checkoutPage.packstationIntro}</p>
 
               {selectedPackstation ? (
-                <div className="flex items-start justify-between gap-4 border border-forest/40 bg-forest/5 p-3">
+                <div className="flex items-start justify-between gap-4 border border-heading/40 bg-forest/5 p-3">
                   <div className="text-sm">
                     <p className="text-xs tracking-wide-caps text-ink/70">
                       {t.checkoutPage.packstationSelectedLabel}
                     </p>
-                    <p className="mt-1 text-forest">{selectedPackstation.name}</p>
+                    <p className="mt-1 text-heading">{selectedPackstation.name}</p>
                     <p className="text-ink/70">
                       {selectedPackstation.street ? `${selectedPackstation.street}, ` : ""}
                       {selectedPackstation.zip} {selectedPackstation.city}
@@ -539,7 +539,7 @@ export function CheckoutForm({
                       type="button"
                       onClick={searchPackstations}
                       disabled={packstationSearching || packstationZip.trim().length !== 5}
-                      className="border border-ink/20 bg-background px-4 py-2 text-sm hover:border-forest disabled:opacity-50"
+                      className="border border-ink/20 bg-background px-4 py-2 text-sm hover:border-heading disabled:opacity-50"
                     >
                       {packstationSearching
                         ? t.checkoutPage.packstationSearching
@@ -562,9 +562,9 @@ export function CheckoutForm({
                           <button
                             type="button"
                             onClick={() => setSelectedPackstation(packstation)}
-                            className="w-full border border-ink/20 px-3 py-2 text-left text-sm hover:border-forest"
+                            className="w-full border border-ink/20 px-3 py-2 text-left text-sm hover:border-heading"
                           >
-                            <span className="text-forest">{packstation.name}</span>
+                            <span className="text-heading">{packstation.name}</span>
                             <span className="block text-xs text-ink/70">
                               {packstation.street ? `${packstation.street}, ` : ""}
                               {packstation.zip} {packstation.city}
@@ -618,7 +618,7 @@ export function CheckoutForm({
                   maxLength={500}
                   rows={3}
                   placeholder={t.checkoutPage.giftMessagePlaceholder}
-                  className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest resize-none"
+                  className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading resize-none"
                 />
               </label>
             ) : null}
@@ -644,13 +644,13 @@ export function CheckoutForm({
         </form>
 
         <aside hidden={payment !== null} className="border border-ink/10 bg-background p-8 h-fit lg:sticky lg:top-28 shadow-[0_24px_50px_-34px_rgba(36,53,43,0.45)]">
-          <h2 className="text-2xl text-forest mb-6">{t.checkoutPage.yourOrderHeading}</h2>
+          <h2 className="text-2xl text-heading mb-6">{t.checkoutPage.yourOrderHeading}</h2>
           <ul className="space-y-3 text-sm">
             {items.map((item) => (
               <li key={item.productId} className="flex items-baseline justify-between gap-4">
                 <span>
                   <span className="text-ink/55 tabular-nums">{item.quantity} ×</span>{" "}
-                  <span className="font-serif text-lg text-forest">{item.name}</span>
+                  <span className="font-serif text-lg text-heading">{item.name}</span>
                 </span>
                 <span className="tabular-nums">{formatPrice(item.priceCents * item.quantity, "EUR", locale)}</span>
               </li>
@@ -670,7 +670,7 @@ export function CheckoutForm({
               <span>{shipping === 0 ? t.cartPage.free : formatPrice(shipping, "EUR", locale)}</span>
             </div>
             {activeBulkDiscount ? (
-              <div className="flex justify-between text-forest">
+              <div className="flex justify-between text-heading">
                 <span>
                   {t.cartPage.discountLabel} ({activeBulkDiscount.percent}%)
                 </span>
@@ -678,7 +678,7 @@ export function CheckoutForm({
               </div>
             ) : null}
           </div>
-          <div className="mt-4 pt-4 border-t border-ink/10 flex items-baseline justify-between text-forest">
+          <div className="mt-4 pt-4 border-t border-ink/10 flex items-baseline justify-between text-heading">
             <span className="text-base">{t.cartPage.total}</span>
             <span className="font-serif text-3xl tabular-nums">{formatPrice(total, "EUR", locale)}</span>
           </div>
@@ -721,7 +721,7 @@ function Field({
         placeholder={placeholder}
         autoComplete={autoComplete}
         required={required}
-        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
       />
     </label>
   );
@@ -756,7 +756,7 @@ function CheckoutSteps({ current, labels, ariaLabel }: { current: number; labels
                   </text>
                 )}
               </svg>
-              <span className={`tracking-wide-caps text-xs ${active ? "text-forest" : done ? "text-forest/70" : "text-ink/50"}`}>
+              <span className={`tracking-wide-caps text-xs ${active ? "text-heading" : done ? "text-heading/70" : "text-ink/50"}`}>
                 {label}
               </span>
             </span>
diff --git a/src/app/checkout/embedded-payment.tsx b/src/app/checkout/embedded-payment.tsx
index e809496..e6544eb 100644
--- a/src/app/checkout/embedded-payment.tsx
+++ b/src/app/checkout/embedded-payment.tsx
@@ -114,7 +114,7 @@ export function EmbeddedPayment({
           id="payment-heading"
           ref={headingRef}
           tabIndex={-1}
-          className="scroll-mt-24 text-2xl text-forest outline-none"
+          className="scroll-mt-24 text-2xl text-heading outline-none"
         >
           {t.checkoutPage.paymentHeading}
         </h2>
diff --git a/src/app/checkout/success/page.tsx b/src/app/checkout/success/page.tsx
index ae8f1fb..49c067a 100644
--- a/src/app/checkout/success/page.tsx
+++ b/src/app/checkout/success/page.tsx
@@ -93,7 +93,7 @@ export default async function CheckoutSuccessPage(props: PageProps<"/checkout/su
         />
         {orderNumber ? (
           <p className="mt-4 text-ink/70">
-            {t.checkoutSuccessPage.orderNumberLabel}: <span className="text-forest">{orderNumber}</span>
+            {t.checkoutSuccessPage.orderNumberLabel}: <span className="text-heading">{orderNumber}</span>
           </p>
         ) : null}
         <p className="mt-6 text-ink/70">
diff --git a/src/app/ernten/[year]/[type]/page.tsx b/src/app/ernten/[year]/[type]/page.tsx
index 76e427f..c4415d2 100644
--- a/src/app/ernten/[year]/[type]/page.tsx
+++ b/src/app/ernten/[year]/[type]/page.tsx
@@ -60,10 +60,10 @@ export default async function HarvestDetailPage(
           <p className="tracking-wide-caps text-xs text-honey-dark mb-3">
             {harvest.year} · {formatDate(harvest.harvestDate, locale)}
           </p>
-          <h1 className="text-5xl md:text-6xl leading-[1] tracking-[-0.015em] text-forest">{harvest.type}</h1>
+          <h1 className="text-5xl md:text-6xl leading-[1] tracking-[-0.015em] text-heading">{harvest.type}</h1>
           <p className="mt-8 max-w-[60ch] text-lg text-ink/75 leading-relaxed">{harvest.description}</p>
 
-          <h2 className="mt-12 text-2xl text-forest">{t.erntenDetailPage.batchesHeading}</h2>
+          <h2 className="mt-12 text-2xl text-heading">{t.erntenDetailPage.batchesHeading}</h2>
           <div className="mt-5 space-y-3">
             {harvest.batches.map((batch) => {
               const fill = batch.glassCount > 0 ? Math.min(1, batch.remainingGlasses / batch.glassCount) : 0;
@@ -71,10 +71,10 @@ export default async function HarvestDetailPage(
                 <Link
                   key={batch.id}
                   href={`/charge/${batch.code}`}
-                  className="group block border border-ink/10 px-5 py-4 transition-[border-color,transform,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-0.5 hover:border-forest/50 hover:shadow-[0_18px_34px_-24px_rgba(36,53,43,0.45)]"
+                  className="group block border border-ink/10 px-5 py-4 transition-[border-color,transform,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-0.5 hover:border-heading/50 hover:shadow-[0_18px_34px_-24px_rgba(36,53,43,0.45)]"
                 >
                   <span className="flex items-center justify-between gap-4 text-sm">
-                    <span className="font-serif text-xl text-forest tabular-nums">{batch.code}</span>
+                    <span className="font-serif text-xl text-heading tabular-nums">{batch.code}</span>
                     <span className="text-ink/65 tabular-nums">
                       {t.erntenDetailPage.glassesAvailable(batch.remainingGlasses, batch.glassCount)}
                     </span>
@@ -91,7 +91,7 @@ export default async function HarvestDetailPage(
             })}
           </div>
 
-          <h2 className="mt-12 text-2xl text-forest">{t.erntenDetailPage.productsHeading}</h2>
+          <h2 className="mt-12 text-2xl text-heading">{t.erntenDetailPage.productsHeading}</h2>
           <div className="mt-4 grid gap-3">
             {harvest.products.map((product) => (
               <ProductTeaserLink
diff --git a/src/app/ernten/page.tsx b/src/app/ernten/page.tsx
index 2161c2d..5e5ab54 100644
--- a/src/app/ernten/page.tsx
+++ b/src/app/ernten/page.tsx
@@ -69,7 +69,7 @@ export default async function ErntenPage() {
                       </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>
+                          <h3 className="link-draw inline pb-0.5 font-serif text-2xl text-heading">{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)}
@@ -78,7 +78,7 @@ export default async function ErntenPage() {
                         <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"
+                          className="mt-2 h-4 w-4 flex-shrink-0 text-heading transition-transform duration-300 ease-[var(--ease-arrive)] group-hover:translate-x-1"
                           fill="none"
                           stroke="currentColor"
                           strokeWidth="1.6"
diff --git a/src/app/globals.css b/src/app/globals.css
index ef4cc0f..4afcc55 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,6 +22,52 @@
   /* Diagrammton, per dataviz-Validator geprueft: Helligkeitsband, Chroma
      und >=3:1 gegen die helle Flaeche (#b88a44 erreichte nur 2,93:1). */
   --color-chart-honey: #a0722f;
+
+  /* Rollen statt reiner Markenfarben — sie kippen im Dunkelmodus, die
+     Markenflaechen nicht:
+     - heading: Ueberschriften, Links, Rahmen auf der Seitenflaeche
+       (hell: Waldgruen, dunkel: warmes Creme).
+     - surface: leicht abgesetzte Flaeche (hell: Creme, dunkel: angehobenes
+       Dunkelgruen).
+     - forest bleibt immer die dunkle Markenflaeche (Hero, Baender, Knoepfe,
+       Admin-Leiste), cream immer der helle Text darauf.
+     - honey-deep ist der feste dunkle Honigton fuer FLAECHEN (Badges,
+       Akzentknopf); honey-dark ist die Textvariante und wird dunkel heller. */
+  --color-heading: #24352b;
+  --color-surface: #f4efe5;
+  --color-honey-deep: #8a6531;
+  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324352b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+  color-scheme: light;
+}
+
+/* Dunkle Darstellung — zwei Wege dorthin: ausdruecklich gewaehlt
+   (data-theme="dark", components/theme-toggle.tsx) oder "Automatisch" bei
+   dunkler Systemeinstellung. Beide Bloecke muessen identisch bleiben;
+   theme-tokens.test.ts prueft das. */
+:root[data-theme="dark"] {
+    --color-background: #111713;
+    --color-ink: #e9e3d4;
+    --color-heading: #efe4c9;
+    --color-surface: #18201b;
+    --color-forest: #1b2820;
+    --color-honey-dark: #d3ae72;
+    --color-chart-honey: #c99a50;
+    --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9e3d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+    color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-background: #111713;
+    --color-ink: #e9e3d4;
+    --color-heading: #efe4c9;
+    --color-surface: #18201b;
+    --color-forest: #1b2820;
+    --color-honey-dark: #d3ae72;
+    --color-chart-honey: #c99a50;
+    --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9e3d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+    color-scheme: dark;
+  }
 }
 
 @theme inline {
@@ -34,6 +80,9 @@
   --color-background: var(--color-background);
   --color-ink: var(--color-ink);
   --color-sage: var(--color-sage);
+  --color-heading: var(--color-heading);
+  --color-surface: var(--color-surface);
+  --color-honey-deep: var(--color-honey-deep);
 
   --font-serif: var(--font-cormorant), Georgia, serif;
   --font-sans: var(--font-inter), system-ui, sans-serif;
@@ -47,8 +96,8 @@
 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);
+  scrollbar-color: color-mix(in oklab, var(--color-heading) 45%, transparent) transparent;
+  accent-color: var(--color-heading);
 }
 
 body {
@@ -369,7 +418,7 @@ textarea::placeholder {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: color-mix(in oklab, var(--color-cream) 70%, var(--color-background));
+  background: color-mix(in oklab, var(--color-surface) 70%, var(--color-background));
   font-size: 0.68rem;
   font-weight: 500;
   letter-spacing: 0.12em;
@@ -385,7 +434,7 @@ textarea::placeholder {
 .admin-content select {
   appearance: none;
   padding-right: 2rem;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324352b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+  background-image: var(--select-arrow);
   background-repeat: no-repeat;
   background-position: right 0.6rem center;
   background-size: 0.8rem;
@@ -410,5 +459,5 @@ textarea::placeholder {
   text-transform: none;
 }
 .admin-content h2.tracking-wide-caps.text-ink\/65 {
-  color: var(--color-forest);
+  color: var(--color-heading);
 }
diff --git a/src/app/herkunft/page.tsx b/src/app/herkunft/page.tsx
index d074109..90675cc 100644
--- a/src/app/herkunft/page.tsx
+++ b/src/app/herkunft/page.tsx
@@ -60,7 +60,7 @@ export default async function HerkunftPage() {
                     className="mt-2 h-3.5 w-3.5 text-honey transition-transform duration-500 ease-[var(--ease-arrive)] group-hover:rotate-90"
                   />
                   <div>
-                    <h3 className="text-2xl text-forest">{a.title}</h3>
+                    <h3 className="text-2xl text-heading">{a.title}</h3>
                     <p className="mt-2 text-ink/70 leading-relaxed">{a.text}</p>
                   </div>
                 </div>
diff --git a/src/app/honig/[slug]/page.tsx b/src/app/honig/[slug]/page.tsx
index 7ea1471..ee87d9b 100644
--- a/src/app/honig/[slug]/page.tsx
+++ b/src/app/honig/[slug]/page.tsx
@@ -264,7 +264,7 @@ export default async function ProductDetailPage(
           <p className="tracking-wide-caps text-xs text-honey-dark mb-4">
             {company.name} · {t.common.categories[product.category]}
           </p>
-          <h1 className="text-5xl md:text-6xl leading-[1] tracking-[-0.015em] text-forest">{product.name}</h1>
+          <h1 className="text-5xl md:text-6xl leading-[1] tracking-[-0.015em] text-heading">{product.name}</h1>
           {/* Ohne gepflegte Noten sonst ein leerer Absatz, der nur Abstand
               zwischen Ueberschrift und Bewertung erzeugt. */}
           {product.tasteTags.length > 0 ? (
@@ -282,7 +282,7 @@ export default async function ProductDetailPage(
           )}
 
           <div className="mt-8 flex items-baseline gap-3">
-            <span className="font-serif text-4xl text-forest tabular-nums">
+            <span className="font-serif text-4xl text-heading tabular-nums">
               {formatPrice(product.priceCents, product.currency, locale)}
             </span>
             <span className="text-sm text-ink/65 tabular-nums">{product.weightGrams} g</span>
@@ -292,7 +292,7 @@ export default async function ProductDetailPage(
           </p>
           <Link
             href="/versand-zahlung"
-            className="mt-1 inline-block py-1 text-xs text-ink/65 underline decoration-ink/30 hover:text-forest hover:decoration-forest"
+            className="mt-1 inline-block py-1 text-xs text-ink/65 underline decoration-ink/30 hover:text-heading hover:decoration-heading"
           >
             {t.productPage.shippingHint(
               baseShippingCents === 0 ? t.cartPage.free : formatPrice(baseShippingCents, "EUR", locale)
@@ -341,11 +341,11 @@ export default async function ProductDetailPage(
                         type="email"
                         required
                         placeholder={t.productPage.emailPlaceholder}
-                        className="flex-1 min-w-0 border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-forest"
+                        className="flex-1 min-w-0 border border-ink/20 bg-background px-3 py-2 text-sm focus:outline-none focus:border-heading"
                       />
                       <button
                         type="submit"
-                        className="shrink-0 border border-ink/20 px-3 py-2 text-sm hover:border-forest"
+                        className="shrink-0 border border-ink/20 px-3 py-2 text-sm hover:border-heading"
                       >
                         {t.productPage.notifySubmit}
                       </button>
@@ -369,7 +369,7 @@ export default async function ProductDetailPage(
               <input type="hidden" name="redirectPath" value={`/honig/${product.slug}`} />
               <button
                 type="submit"
-                className="inline-flex items-center gap-2 py-1.5 text-sm text-ink/70 underline hover:text-forest"
+                className="inline-flex items-center gap-2 py-1.5 text-sm text-ink/70 underline hover:text-heading"
               >
                 <svg
                   viewBox="0 0 20 20"
@@ -387,7 +387,7 @@ export default async function ProductDetailPage(
             </form>
           ) : (
             <p className="mt-3 text-sm text-ink/65">
-              <Link href="/konto" className="text-forest underline">
+              <Link href="/konto" className="text-heading underline">
                 {t.productPage.loginLinkLabel}
               </Link>
               , {t.productPage.loginToSave}
@@ -427,11 +427,11 @@ export default async function ProductDetailPage(
           {isHoney ? (
             <div className="mt-6 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm">
               <span className="text-ink/65">{t.productPage.learnMoreLabel}</span>
-              <Link href="/wissen/warum-kristallisiert-honig" className="inline-block py-0.5 text-forest underline">
+              <Link href="/wissen/warum-kristallisiert-honig" className="inline-block py-0.5 text-heading underline">
                 {t.wissenArticles["warum-kristallisiert-honig"].title}
               </Link>
               {harvestWissenSlug ? (
-                <Link href={`/wissen/${harvestWissenSlug}`} className="inline-block py-0.5 text-forest underline">
+                <Link href={`/wissen/${harvestWissenSlug}`} className="inline-block py-0.5 text-heading underline">
                   {t.wissenArticles[harvestWissenSlug].title}
                 </Link>
               ) : null}
@@ -441,7 +441,7 @@ export default async function ProductDetailPage(
           {isHoney && product.batch ? (
             <Link
               href={`/charge/${product.batch.code}`}
-              className="mt-2.5 inline-block py-0.5 text-sm text-forest underline"
+              className="mt-2.5 inline-block py-0.5 text-sm text-heading underline"
             >
               {t.productPage.viewBatchOrigin}
             </Link>
@@ -451,7 +451,7 @@ export default async function ProductDetailPage(
 
       <Container id="bewertungen" className="mt-20 max-w-3xl">
         <ScrollReveal>
-          <h2 className="text-3xl md:text-4xl text-forest">{t.productPage.reviewsHeading}</h2>
+          <h2 className="text-3xl md:text-4xl text-heading">{t.productPage.reviewsHeading}</h2>
         </ScrollReveal>
 
 
@@ -475,7 +475,7 @@ export default async function ProductDetailPage(
         <div className="mt-10 border-t border-ink/10 pt-8">
           {!customer ? (
             <p className="text-sm text-ink/70">
-              <Link href="/konto" className="text-forest underline">
+              <Link href="/konto" className="text-heading underline">
                 {t.productPage.loginLinkLabel}
               </Link>
               , {t.productPage.loginToReview}
@@ -516,7 +516,7 @@ export default async function ProductDetailPage(
                 name="comment"
                 rows={3}
                 placeholder={t.productPage.commentPlaceholder}
-                className="w-full border border-ink/20 bg-background px-4 py-3 text-sm focus:outline-none focus:border-forest"
+                className="w-full border border-ink/20 bg-background px-4 py-3 text-sm focus:outline-none focus:border-heading"
               />
               <Button type="submit">{t.productPage.submitReview}</Button>
             </form>
@@ -532,7 +532,7 @@ export default async function ProductDetailPage(
           <ScrollReveal
             className={relatedProducts.length <= 2 ? "sm:col-span-2 lg:col-span-1" : "sm:col-span-2 lg:col-span-3"}
           >
-            <h2 className="text-3xl md:text-4xl text-forest text-balance">{t.productPage.relatedProductsHeading}</h2>
+            <h2 className="text-3xl md:text-4xl text-heading text-balance">{t.productPage.relatedProductsHeading}</h2>
           </ScrollReveal>
           {relatedProducts.map((related, index) => (
             <ProductCard key={related.id} product={related} index={index} />
diff --git a/src/app/imkerei/page.tsx b/src/app/imkerei/page.tsx
index 1e7118d..1447eca 100644
--- a/src/app/imkerei/page.tsx
+++ b/src/app/imkerei/page.tsx
@@ -31,7 +31,7 @@ export default async function ImkereiPage() {
           <div className="mt-8 max-w-[62ch] space-y-5 text-ink/75 leading-relaxed">
             {t.imkereiPage.paragraphs.map((paragraph, i) => (
               // Erster Absatz als Einstieg: groesser, in Serifenschrift.
-              <p key={paragraph} className={i === 0 ? "font-serif text-2xl leading-snug text-forest" : undefined}>
+              <p key={paragraph} className={i === 0 ? "font-serif text-2xl leading-snug text-heading" : undefined}>
                 {paragraph}
               </p>
             ))}
diff --git a/src/app/kontakt/page.tsx b/src/app/kontakt/page.tsx
index d8b45c8..0073c05 100644
--- a/src/app/kontakt/page.tsx
+++ b/src/app/kontakt/page.tsx
@@ -65,7 +65,7 @@ export default async function KontaktPage() {
           <ScrollReveal delay={0.18} className="md:col-span-2">
             <div className="h-full border border-honey/30 bg-honey/[0.06] px-8 py-10">
               <HexMark className="h-4 w-4 text-honey-dark" />
-              <h2 className="mt-5 text-2xl text-forest">{t.kontaktPage.pickupHeading}</h2>
+              <h2 className="mt-5 text-2xl text-heading">{t.kontaktPage.pickupHeading}</h2>
               <p className="mt-3 text-ink/70 leading-relaxed">{t.kontaktPage.pickupText}</p>
             </div>
           </ScrollReveal>
diff --git a/src/app/konto/adressen/page.tsx b/src/app/konto/adressen/page.tsx
index 7ab5912..639f801 100644
--- a/src/app/konto/adressen/page.tsx
+++ b/src/app/konto/adressen/page.tsx
@@ -35,7 +35,7 @@ export default async function KontoAdressenPage() {
               className={`relative flex flex-col justify-between gap-6 border p-6 transition-[border-color,box-shadow] duration-500 ease-[var(--ease-arrive)] ${
                 address.isDefault
                   ? "border-honey/60 bg-honey/[0.05] shadow-[0_18px_34px_-26px_rgba(184,138,68,0.5)]"
-                  : "border-ink/10 hover:border-forest/40"
+                  : "border-ink/10 hover:border-heading/40"
               }`}
             >
               {address.isDefault ? (
@@ -45,11 +45,11 @@ export default async function KontoAdressenPage() {
                 </span>
               ) : null}
               <div className="flex gap-4">
-                <span className="flex-shrink-0 flex items-center justify-center w-11 h-11 border border-ink/15 text-forest">
+                <span className="flex-shrink-0 flex items-center justify-center w-11 h-11 border border-ink/15 text-heading">
                   <AddressIcon />
                 </span>
                 <div>
-                  <p className="font-serif text-xl text-forest">{address.label}</p>
+                  <p className="font-serif text-xl text-heading">{address.label}</p>
                   <p className="text-sm text-ink/70 mt-1">
                     {address.firstName} {address.lastName}
                     <br />
@@ -63,7 +63,7 @@ export default async function KontoAdressenPage() {
                 {!address.isDefault ? (
                   <form action={setDefaultAddressAction}>
                     <input type="hidden" name="addressId" value={address.id} />
-                    <button type="submit" className="text-forest hover:underline">
+                    <button type="submit" className="text-heading hover:underline">
                       {t.addressesPage.setDefault}
                     </button>
                   </form>
@@ -87,7 +87,7 @@ export default async function KontoAdressenPage() {
         </div>
 
         <FormPanel className="mt-14 max-w-xl">
-          <h2 className="text-2xl text-forest mb-6">{t.addressesPage.addNewHeading}</h2>
+          <h2 className="text-2xl text-heading mb-6">{t.addressesPage.addNewHeading}</h2>
           <form action={addAddressAction} className="space-y-4">
             <Field
               name="label"
@@ -148,7 +148,7 @@ function Field({
         autoComplete={autoComplete}
         inputMode={inputMode}
         required={required}
-        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
       />
     </label>
   );
diff --git a/src/app/konto/bestellungen/[id]/retoure/page.tsx b/src/app/konto/bestellungen/[id]/retoure/page.tsx
index fe1a26b..09bf286 100644
--- a/src/app/konto/bestellungen/[id]/retoure/page.tsx
+++ b/src/app/konto/bestellungen/[id]/retoure/page.tsx
@@ -53,7 +53,7 @@ export default async function RetourePage(props: PageProps<"/konto/bestellungen/
             <li key={item.id} className="flex items-center gap-3 py-3">
               <HexMark className="h-2.5 w-2.5 text-honey" />
               <span className="tabular-nums text-ink/55">{item.quantity} ×</span>
-              <span className="font-serif text-lg text-forest">{item.productName}</span>
+              <span className="font-serif text-lg text-heading">{item.productName}</span>
             </li>
           ))}
         </ul>
@@ -71,7 +71,7 @@ export default async function RetourePage(props: PageProps<"/konto/bestellungen/
               minLength={3}
               rows={5}
               placeholder={t.retourePage.reasonPlaceholder}
-              className="mt-2 w-full border border-ink/20 bg-background px-4 py-3 text-sm focus:outline-none focus:border-forest"
+              className="mt-2 w-full border border-ink/20 bg-background px-4 py-3 text-sm focus:outline-none focus:border-heading"
             />
           </div>
           <Button type="submit">{t.retourePage.submit}</Button>
diff --git a/src/app/konto/bestellungen/page.tsx b/src/app/konto/bestellungen/page.tsx
index a3ce85e..40d3935 100644
--- a/src/app/konto/bestellungen/page.tsx
+++ b/src/app/konto/bestellungen/page.tsx
@@ -58,7 +58,7 @@ export default async function KontoBestellungenPage() {
               >
                 <div className="flex flex-wrap items-center justify-between gap-2">
                   <div>
-                    <p className="text-forest">{order.orderNumber}</p>
+                    <p className="text-heading">{order.orderNumber}</p>
                     <p className="text-xs text-ink/65">{formatDate(order.createdAt, locale)}</p>
                   </div>
                   <div className="text-right">
@@ -81,7 +81,7 @@ export default async function KontoBestellungenPage() {
                   {order.items.map((item) => (
                     <li key={item.id}>
                       {item.quantity} ×{" "}
-                      <Link href={`/honig/${item.product.slug}#bewertungen`} className="hover:text-forest hover:underline">
+                      <Link href={`/honig/${item.product.slug}#bewertungen`} className="hover:text-heading hover:underline">
                         {item.productName}
                       </Link>
                     </li>
@@ -116,7 +116,7 @@ export default async function KontoBestellungenPage() {
                         <>
                           {" "}
                           ·{" "}
-                          <a href={url} target="_blank" rel="noopener noreferrer" className="text-forest underline">
+                          <a href={url} target="_blank" rel="noopener noreferrer" className="text-heading underline">
                             {t.shipmentInfo.trackPackage}
                           </a>
                         </>
@@ -132,12 +132,12 @@ export default async function KontoBestellungenPage() {
                 ) : null}
 
                 <div className="mt-4 flex flex-wrap items-center justify-between gap-4">
-                  <p className="font-serif text-2xl text-forest tabular-nums">{formatPrice(order.totalCents, order.currency, locale)}</p>
+                  <p className="font-serif text-2xl text-heading tabular-nums">{formatPrice(order.totalCents, order.currency, locale)}</p>
                   <div className="flex items-center gap-3">
                     {order.invoice ? (
                       <Link
                         href={`/rechnung/${order.invoice.invoiceNumber}`}
-                        className="text-sm text-forest underline"
+                        className="text-sm text-heading underline"
                       >
                         {t.ordersPage.viewInvoice}
                       </Link>
@@ -149,7 +149,7 @@ export default async function KontoBestellungenPage() {
                     ) : RETURN_ELIGIBLE_STATUSES.includes(order.status) ? (
                       <Link
                         href={`/konto/bestellungen/${order.id}/retoure`}
-                        className="text-sm text-forest underline"
+                        className="text-sm text-heading underline"
                       >
                         {t.ordersPage.requestReturn}
                       </Link>
diff --git a/src/app/konto/page.tsx b/src/app/konto/page.tsx
index 4393409..e134ee6 100644
--- a/src/app/konto/page.tsx
+++ b/src/app/konto/page.tsx
@@ -35,7 +35,7 @@ export default async function KontoPage() {
           <div className="mt-10 grid md:grid-cols-2 md:divide-x md:divide-ink/10 gap-12 md:gap-0">
             <div className="md:pr-12">
             <form action={loginAction} className="space-y-4">
-              <h2 className="text-3xl text-forest">{t.account.login}</h2>
+              <h2 className="text-3xl text-heading">{t.account.login}</h2>
               <Field name="email" label={t.account.emailLabel} type="email" required autoComplete="email" />
               <PasswordField name="password" label={t.account.passwordLabel} required autoComplete="current-password" />
               {/* Das Turnstile-Widget ist ein iframe mit FESTER Breite (rund
@@ -50,7 +50,7 @@ export default async function KontoPage() {
               ) : null}
               <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
                 <Button type="submit">{t.account.login}</Button>
-                <Link href="/konto/passwort-vergessen" className="text-xs text-ink/65 hover:text-forest underline">
+                <Link href="/konto/passwort-vergessen" className="text-xs text-ink/65 hover:text-heading underline">
                   {t.account.forgotPassword}
                 </Link>
               </div>
@@ -72,7 +72,7 @@ export default async function KontoPage() {
                 </div>
                 <a
                   href="/api/auth/entra/login"
-                  className="mt-6 inline-flex items-center justify-center gap-2 px-7 py-3 text-sm tracking-wide-caps transition-[color,background-color,border-color,transform] duration-300 active:scale-[0.97] bg-transparent text-forest border border-forest hover:bg-forest hover:text-cream"
+                  className="mt-6 inline-flex items-center justify-center gap-2 px-7 py-3 text-sm tracking-wide-caps transition-[color,background-color,border-color,transform] duration-300 active:scale-[0.97] bg-transparent text-heading border border-heading hover:bg-forest hover:text-cream"
                 >
                   {t.account.ssoButton}
                 </a>
@@ -81,7 +81,7 @@ export default async function KontoPage() {
             </div>
 
             <form action={registerAction} className="space-y-4 md:pl-12">
-              <h2 className="text-3xl text-forest">{t.account.register}</h2>
+              <h2 className="text-3xl text-heading">{t.account.register}</h2>
               <div className="grid grid-cols-2 gap-4">
                 <Field name="firstName" label={t.account.firstNameLabel} required autoComplete="given-name" />
                 <Field name="lastName" label={t.account.lastNameLabel} required autoComplete="family-name" />
@@ -128,7 +128,7 @@ export default async function KontoPage() {
               {t.account.verifyEmailPrompt}
             </p>
             <form action={resendVerificationEmailAction}>
-              <button type="submit" className="text-forest underline whitespace-nowrap">
+              <button type="submit" className="text-heading underline whitespace-nowrap">
                 {t.account.resendVerification}
               </button>
             </form>
@@ -174,7 +174,7 @@ export default async function KontoPage() {
 
         <div className="mt-10 border border-ink/10 p-6 flex items-center justify-between gap-4">
           <div>
-            <h2 className="text-2xl text-forest">{t.account.newsletterHeading}</h2>
+            <h2 className="text-2xl text-heading">{t.account.newsletterHeading}</h2>
             <p className="mt-1 text-sm text-ink/70">
               {isSubscribed ? t.account.newsletterSubscribed : t.account.newsletterNotSubscribed}
             </p>
@@ -188,7 +188,7 @@ export default async function KontoPage() {
 
         <div className="mt-6 border border-ink/10 p-6 flex items-center justify-between gap-4">
           <div>
-            <h2 className="text-2xl text-forest">{t.account.logoutAllDevicesHeading}</h2>
+            <h2 className="text-2xl text-heading">{t.account.logoutAllDevicesHeading}</h2>
             <p className="mt-1 text-sm text-ink/70">
               {t.account.logoutAllDevicesDescription}
             </p>
@@ -206,10 +206,10 @@ export default async function KontoPage() {
           </Button>
         </form>
 
-        <h2 className="text-2xl text-forest mb-4">{t.account.privacy.heading}</h2>
+        <h2 className="text-2xl text-heading mb-4">{t.account.privacy.heading}</h2>
         <div className="border border-ink/10 p-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
           <div>
-            <h3 className="text-lg text-forest">{t.account.privacy.downloadDataHeading}</h3>
+            <h3 className="text-lg text-heading">{t.account.privacy.downloadDataHeading}</h3>
             <p className="mt-1 text-sm text-ink/70">{t.account.privacy.downloadDataDescription}</p>
           </div>
           <LinkButton href="/api/konto/datenexport" variant="secondary" className="flex-shrink-0">
@@ -266,7 +266,7 @@ function Field({
         type={type}
         required={required}
         autoComplete={autoComplete}
-        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
       />
     </label>
   );
diff --git a/src/app/konto/passwort-vergessen/page.tsx b/src/app/konto/passwort-vergessen/page.tsx
index 387e383..88c4928 100644
--- a/src/app/konto/passwort-vergessen/page.tsx
+++ b/src/app/konto/passwort-vergessen/page.tsx
@@ -37,7 +37,7 @@ export default async function PasswortVergessenPage(props: PageProps<"/konto/pas
                   type="email"
                   required
                   autoComplete="email"
-                  className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+                  className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
                 />
               </label>
               {process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ? (
diff --git a/src/app/konto/passwort-zuruecksetzen/page.tsx b/src/app/konto/passwort-zuruecksetzen/page.tsx
index 7f3c715..b07aab9 100644
--- a/src/app/konto/passwort-zuruecksetzen/page.tsx
+++ b/src/app/konto/passwort-zuruecksetzen/page.tsx
@@ -26,7 +26,7 @@ export default async function PasswortZuruecksetzenPage(
         {!token ? (
           <p className="mt-6 text-sm text-ink/70">
             {t.passwortZuruecksetzenPage.incompleteLinkTextBefore}
-            <a href="/konto/passwort-vergessen" className="underline text-forest">
+            <a href="/konto/passwort-vergessen" className="underline text-heading">
               {t.passwortZuruecksetzenPage.incompleteLinkLabel}
             </a>
             {t.passwortZuruecksetzenPage.incompleteLinkTextAfter}
diff --git a/src/app/konto/zwei-faktor-code/page.tsx b/src/app/konto/zwei-faktor-code/page.tsx
index c122477..5b4cbfb 100644
--- a/src/app/konto/zwei-faktor-code/page.tsx
+++ b/src/app/konto/zwei-faktor-code/page.tsx
@@ -38,7 +38,7 @@ export default async function ZweiFaktorCodePage() {
               autoComplete="one-time-code"
               autoFocus
               required
-              className="mt-2 w-full border border-ink/20 bg-background px-4 py-4 text-center font-serif text-3xl tracking-[0.4em] tabular-nums focus:outline-none focus:border-forest"
+              className="mt-2 w-full border border-ink/20 bg-background px-4 py-4 text-center font-serif text-3xl tracking-[0.4em] tabular-nums focus:outline-none focus:border-heading"
             />
           </label>
           {process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ? (
diff --git a/src/app/konto/zwei-faktor/backup-codes/page.tsx b/src/app/konto/zwei-faktor/backup-codes/page.tsx
index dbe07f5..4bd8e7e 100644
--- a/src/app/konto/zwei-faktor/backup-codes/page.tsx
+++ b/src/app/konto/zwei-faktor/backup-codes/page.tsx
@@ -30,7 +30,7 @@ export default async function ZweiFaktorBackupCodesPage() {
           {codes.map((code, i) => (
             <li
               key={code}
-              className="flex items-center gap-3 border border-ink/10 bg-cream/50 px-3 py-3 font-mono text-sm tabular-nums tracking-wider text-forest"
+              className="flex items-center gap-3 border border-ink/10 bg-surface/50 px-3 py-3 font-mono text-sm tabular-nums tracking-wider text-heading"
             >
               <span className="text-[10px] text-ink/45 tabular-nums">{String(i + 1).padStart(2, "0")}</span>
               {code}
diff --git a/src/app/konto/zwei-faktor/einrichten/page.tsx b/src/app/konto/zwei-faktor/einrichten/page.tsx
index aa15407..c3f7ed5 100644
--- a/src/app/konto/zwei-faktor/einrichten/page.tsx
+++ b/src/app/konto/zwei-faktor/einrichten/page.tsx
@@ -50,7 +50,7 @@ export default async function ZweiFaktorEinrichtenPage() {
               inputMode="numeric"
               autoComplete="one-time-code"
               required
-              className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 tracking-widest focus:outline-none focus:border-forest"
+              className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 tracking-widest focus:outline-none focus:border-heading"
             />
           </label>
           <Button type="submit">{t.twoFactorSetupPage.activate}</Button>
diff --git a/src/app/konto/zwei-faktor/page.tsx b/src/app/konto/zwei-faktor/page.tsx
index 9dc4a29..83d5e0d 100644
--- a/src/app/konto/zwei-faktor/page.tsx
+++ b/src/app/konto/zwei-faktor/page.tsx
@@ -36,7 +36,7 @@ export default async function ZweiFaktorPage() {
 
         {customer.twoFactorEnabled ? (
           <div className="mt-8 space-y-6">
-            <p className="flex items-center gap-3 text-sm text-forest bg-forest/5 border border-forest/20 px-4 py-3">
+            <p className="flex items-center gap-3 text-sm text-heading bg-forest/5 border border-heading/20 px-4 py-3">
               <ShieldIcon />
               <span>
                 {t.twoFactorPage.activeStatus(remainingBackupCodes)}
@@ -44,7 +44,7 @@ export default async function ZweiFaktorPage() {
             </p>
 
             <form action={disableTwoFactorAction} className="space-y-4 border border-ink/10 p-6">
-              <h2 className="text-forest">{t.twoFactorPage.disableHeading}</h2>
+              <h2 className="text-heading">{t.twoFactorPage.disableHeading}</h2>
               <PasswordField
                 name="password"
                 label={t.twoFactorPage.passwordConfirmLabel}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2718f16..c775546 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,6 +15,8 @@ import { getLocale } from "@/i18n/locale";
 import { getDictionary } from "@/i18n/get-dictionary";
 import { I18nProvider } from "@/i18n/i18n-provider";
 import { getBrandAssets } from "@/lib/brand";
+import { cookies } from "next/headers";
+import { THEME_COOKIE, parseThemeChoice } from "@/lib/theme";
 
 const cormorant = Cormorant_Garamond({
   variable: "--font-cormorant",
@@ -48,6 +50,9 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function RootLayout({ children }: LayoutProps<"/">) {
   const locale = await getLocale();
   const dict = getDictionary(locale);
+  // Gewaehlte Darstellung schon serverseitig setzen — sonst blitzte die Seite
+  // beim Laden hell auf, bevor ein Skript auf dunkel umschalten koennte.
+  const themeChoice = parseThemeChoice((await cookies()).get(THEME_COOKIE)?.value);
   const [company, socialLinks, flash, brand] = await Promise.all([
     getCompanyInfo(),
     getSocialLinks(),
@@ -95,6 +100,7 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
   return (
     <html
       lang={locale}
+      data-theme={themeChoice === "system" ? undefined : themeChoice}
       data-scroll-behavior="smooth"
       className={`${cormorant.variable} ${inter.variable} h-full antialiased`}
     >
@@ -137,7 +143,12 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
             {dict.nav.skipToContent}
           </a>
           <HideOnAdmin>
-            <Header companyName={company.name} logoSrc={brand.logo} logoInvertedSrc={brand.logoInverted} />
+            <Header
+              companyName={company.name}
+              logoSrc={brand.logo}
+              logoInvertedSrc={brand.logoInverted}
+              themeChoice={themeChoice}
+            />
           </HideOnAdmin>
           <main id="main-content" className="flex-1">
             {children}
diff --git a/src/app/newsletter-bestaetigt/page.tsx b/src/app/newsletter-bestaetigt/page.tsx
index 69e4aba..e7a6a3a 100644
--- a/src/app/newsletter-bestaetigt/page.tsx
+++ b/src/app/newsletter-bestaetigt/page.tsx
@@ -44,7 +44,7 @@ export default async function NewsletterBestaetigtPage(props: PageProps<"/newsle
             <span aria-hidden="true" className="absolute -left-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-background" />
             <span aria-hidden="true" className="absolute -right-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-background" />
             <p className="text-sm text-ink/70">{t.newsletterBestaetigtPage.discountHeading}</p>
-            <p className="mt-2 font-serif text-2xl text-forest">
+            <p className="mt-2 font-serif text-2xl text-heading">
               {t.newsletterBestaetigtPage.discountText(NEWSLETTER_DISCOUNT_PERCENT)}
             </p>
             <p className="mt-4 font-mono text-3xl tracking-[0.2em] text-honey-dark select-all">{NEWSLETTER_DISCOUNT_CODE}</p>
diff --git a/src/app/rechnung/[invoiceNumber]/page.tsx b/src/app/rechnung/[invoiceNumber]/page.tsx
index 3047d3b..6714da3 100644
--- a/src/app/rechnung/[invoiceNumber]/page.tsx
+++ b/src/app/rechnung/[invoiceNumber]/page.tsx
@@ -41,14 +41,14 @@ export default async function InvoicePage(props: PageProps<"/rechnung/[invoiceNu
           <BackLink href="/konto/bestellungen" label={t.invoicePage.backToOrders} />
           <a
             href={`/rechnung/${invoice.invoiceNumber}/pdf`}
-            className="mb-6 text-sm text-forest underline"
+            className="mb-6 text-sm text-heading underline"
           >
             {t.invoicePage.downloadPdf}
           </a>
         </div>
         <div className="flex justify-between items-start">
           <div>
-            <p className="text-2xl tracking-[0.2em] font-serif text-forest">{company.name.toUpperCase()}</p>
+            <p className="text-2xl tracking-[0.2em] font-serif text-heading">{company.name.toUpperCase()}</p>
             <p className="mt-2 text-sm text-ink/70">
               {company.address.street}
               <br />
@@ -56,7 +56,7 @@ export default async function InvoicePage(props: PageProps<"/rechnung/[invoiceNu
             </p>
           </div>
           <div className="text-right text-sm text-ink/70">
-            <p className="text-forest">{t.invoicePage.invoiceLabel(invoice.invoiceNumber)}</p>
+            <p className="text-heading">{t.invoicePage.invoiceLabel(invoice.invoiceNumber)}</p>
             <p>{t.invoicePage.orderLabel(order.orderNumber)}</p>
             <p>{formatDate(invoice.issuedAt)}</p>
           </div>
@@ -126,7 +126,7 @@ export default async function InvoicePage(props: PageProps<"/rechnung/[invoiceNu
                   </div>
                 </div>
               ))}
-            <div className="flex justify-between text-forest pt-2 border-t border-ink/10">
+            <div className="flex justify-between text-heading pt-2 border-t border-ink/10">
               <span>{t.invoicePage.totalLabel}</span>
               <span>{formatPrice(invoice.totalCents, order.currency)}</span>
             </div>
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index da41a61..3877fdf 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -109,8 +109,8 @@ export default async function ShopPage(props: PageProps<"/shop">) {
                 aria-current={isActive ? "page" : undefined}
                 className={`inline-flex h-11 items-center gap-2 px-5 text-sm tracking-wide-caps border transition-[color,background-color,border-color] duration-300 ${
                   isActive
-                    ? "bg-forest text-cream border-forest"
-                    : "border-ink/15 text-ink/70 hover:border-forest hover:text-forest"
+                    ? "bg-forest text-cream border-heading"
+                    : "border-ink/15 text-ink/70 hover:border-heading hover:text-heading"
                 }`}
               >
                 {isActive ? <HexMark className="h-2.5 w-2.5 text-honey-light" /> : null}
@@ -151,7 +151,7 @@ export default async function ShopPage(props: PageProps<"/shop">) {
                 name="q"
                 defaultValue={query ?? ""}
                 placeholder={t.nav.searchPlaceholder}
-                className="h-11 w-60 border border-ink/15 bg-background pl-10 pr-3 transition-colors placeholder:text-ink/45 hover:border-ink/35 focus:border-forest focus:outline-none"
+                className="h-11 w-60 border border-ink/15 bg-background pl-10 pr-3 transition-colors placeholder:text-ink/45 hover:border-ink/35 focus:border-heading focus:outline-none"
               />
             </span>
             <label htmlFor="sortierung" className="ml-2 text-xs tracking-wide-caps text-ink/60">
@@ -162,7 +162,7 @@ export default async function ShopPage(props: PageProps<"/shop">) {
                 id="sortierung"
                 name="sortierung"
                 defaultValue={sort ?? ""}
-                className="h-11 appearance-none border border-ink/15 bg-background pl-3 pr-9 transition-colors hover:border-ink/35 focus:border-forest focus:outline-none"
+                className="h-11 appearance-none border border-ink/15 bg-background pl-3 pr-9 transition-colors hover:border-ink/35 focus:border-heading focus:outline-none"
               >
                 {sortOptions.map((option) => (
                   <option key={option.value} value={option.value}>
@@ -183,7 +183,7 @@ export default async function ShopPage(props: PageProps<"/shop">) {
             </span>
             <button
               type="submit"
-              className="h-11 bg-forest px-5 text-xs tracking-wide-caps text-cream transition-colors hover:bg-honey-dark"
+              className="h-11 bg-forest px-5 text-xs tracking-wide-caps text-cream transition-colors hover:bg-honey-deep"
             >
               {t.shop.apply}
             </button>
@@ -198,8 +198,8 @@ export default async function ShopPage(props: PageProps<"/shop">) {
             aria-pressed={onlyAvailable}
             className={`ml-auto inline-flex h-11 items-center gap-2.5 px-4 text-xs tracking-wide-caps border transition-colors ${
               onlyAvailable
-                ? "bg-forest text-cream border-forest"
-                : "border-ink/15 text-ink/70 hover:border-forest hover:text-forest"
+                ? "bg-forest text-cream border-heading"
+                : "border-ink/15 text-ink/70 hover:border-heading hover:text-heading"
             }`}
           >
             {/* Kleiner Schalter statt reinem Textknopf — der Zustand ist auf einen Blick lesbar. */}
@@ -208,7 +208,7 @@ export default async function ShopPage(props: PageProps<"/shop">) {
               className={`relative h-4 w-7 rounded-full transition-colors ${onlyAvailable ? "bg-honey" : "bg-ink/15"}`}
             >
               <span
-                className={`absolute top-0.5 h-3 w-3 rounded-full bg-cream shadow transition-[left] duration-300 ${
+                className={`absolute top-0.5 h-3 w-3 rounded-full bg-surface shadow transition-[left] duration-300 ${
                   onlyAvailable ? "left-3.5" : "left-0.5"
                 }`}
               />
@@ -222,7 +222,7 @@ export default async function ShopPage(props: PageProps<"/shop">) {
             {t.shop.searchResults(query, products.length)}{" "}
             <Link
               href={buildHref({ kategorie: category, sortierung: sort, verfuegbar: onlyAvailable ? "1" : undefined })}
-              className="underline hover:text-forest"
+              className="underline hover:text-heading"
             >
               {t.shop.clearSearch}
             </Link>
diff --git a/src/app/unternehmen/page.tsx b/src/app/unternehmen/page.tsx
index 480279f..9f40da8 100644
--- a/src/app/unternehmen/page.tsx
+++ b/src/app/unternehmen/page.tsx
@@ -49,7 +49,7 @@ export default async function UnternehmenPage() {
         {/* Geteilt: die Ueberschrift laeuft neben dem langen Formular mit. */}
         <div className="mt-24 grid gap-10 lg:grid-cols-12 lg:gap-16">
           <ScrollReveal className="lg:col-span-4">
-            <h2 className="text-4xl leading-tight text-forest lg:sticky lg:top-32">
+            <h2 className="text-4xl leading-tight text-heading lg:sticky lg:top-32">
               {t.unternehmenPage.inquiryHeading}
             </h2>
           </ScrollReveal>
diff --git a/src/app/warenkorb/warenkorb-content.tsx b/src/app/warenkorb/warenkorb-content.tsx
index 2ab8804..5d1b85f 100644
--- a/src/app/warenkorb/warenkorb-content.tsx
+++ b/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} />
diff --git a/src/app/wissen/[slug]/page.tsx b/src/app/wissen/[slug]/page.tsx
index 486e1cb..7c92745 100644
--- a/src/app/wissen/[slug]/page.tsx
+++ b/src/app/wissen/[slug]/page.tsx
@@ -80,7 +80,7 @@ export default async function WissenArticlePage(
       <Container className="max-w-2xl">
         <BackLink href="/wissen" label={t.wissenArticlePage.backLabel} />
         <p className="tracking-wide-caps text-xs text-honey-dark mb-3">{t.wissenArticlePage.eyebrow}</p>
-        <h1 className="text-4xl md:text-5xl leading-[1.05] tracking-[-0.01em] text-forest">{article.title}</h1>
+        <h1 className="text-4xl md:text-5xl leading-[1.05] tracking-[-0.01em] text-heading">{article.title}</h1>
         <div className="mt-10 max-w-[65ch] space-y-6 text-lg text-ink/80 leading-[1.75]">
           {article.body.map((paragraph, i) => (
             // Initiale wie im Buch: der erste Buchstabe des Artikels gross in Honig.
@@ -99,13 +99,13 @@ export default async function WissenArticlePage(
                 return (
                   <Link key={otherSlug} href={`/wissen/${otherSlug}`} className="group flex items-start justify-between gap-6 py-6">
                     <span>
-                      <span className="link-draw pb-0.5 font-serif text-2xl text-forest">{other.title}</span>
+                      <span className="link-draw pb-0.5 font-serif text-2xl text-heading">{other.title}</span>
                       <span className="mt-2 block text-sm text-ink/65 leading-relaxed">{other.excerpt}</span>
                     </span>
                     <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"
+                      className="mt-2 h-4 w-4 flex-shrink-0 text-heading transition-transform duration-300 ease-[var(--ease-arrive)] group-hover:translate-x-1"
                       fill="none"
                       stroke="currentColor"
                       strokeWidth="1.6"
diff --git a/src/app/wissen/page.tsx b/src/app/wissen/page.tsx
index 612756d..350554d 100644
--- a/src/app/wissen/page.tsx
+++ b/src/app/wissen/page.tsx
@@ -36,7 +36,7 @@ export default async function WissenPage() {
                     href={`/wissen/${slug}`}
                     className="group grid gap-3 py-8 md:grid-cols-12 md:items-baseline md:gap-8"
                   >
-                    <h2 className="text-2xl leading-tight text-forest text-balance md:col-span-5 md:text-3xl">
+                    <h2 className="text-2xl leading-tight text-heading text-balance md:col-span-5 md:text-3xl">
                       <span className="link-draw pb-0.5">{article.title}</span>
                     </h2>
                     <p className="max-w-[60ch] text-ink/70 leading-relaxed md:col-span-6">{article.excerpt}</p>
diff --git a/src/components/account-ui.tsx b/src/components/account-ui.tsx
index 7e71b33..5512b34 100644
--- a/src/components/account-ui.tsx
+++ b/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}
diff --git a/src/components/admin-archive.tsx b/src/components/admin-archive.tsx
index 2e9ea40..c69aebd 100644
--- a/src/components/admin-archive.tsx
+++ b/src/components/admin-archive.tsx
@@ -32,7 +32,7 @@ export function AdminArchiveTabs({
 
   const tabClass = (selected: boolean): string =>
     `px-4 py-2 text-sm border-b-2 -mb-px transition-colors ${
-      selected ? "border-forest text-forest" : "border-transparent text-ink/60 hover:text-forest"
+      selected ? "border-heading text-heading" : "border-transparent text-ink/60 hover:text-heading"
     }`;
 
   return (
@@ -72,7 +72,7 @@ export function AdminArchiveToggle({
           {archivedManually ? ` · ${labels.manualHint}` : null}
         </span>
       ) : null}
-      <button type="submit" className="link-draw cursor-pointer text-ink/70 hover:text-forest">
+      <button type="submit" className="link-draw cursor-pointer text-ink/70 hover:text-heading">
         {archivedAt ? labels.restore : labels.archive}
       </button>
     </form>
diff --git a/src/components/admin-command-palette.tsx b/src/components/admin-command-palette.tsx
index 86388b6..bc36d30 100644
--- a/src/components/admin-command-palette.tsx
+++ b/src/components/admin-command-palette.tsx
@@ -148,7 +148,7 @@ export function AdminCommandPalette({
                       onMouseEnter={() => setActive(i)}
                       onClick={() => go(entry)}
                       className={`flex w-full items-center gap-3 px-5 py-2.5 text-left text-sm transition-colors ${
-                        i === active ? "bg-honey/10 text-forest" : "text-ink/75"
+                        i === active ? "bg-honey/10 text-heading" : "text-ink/75"
                       }`}
                     >
                       <HexMark
diff --git a/src/components/admin-form.tsx b/src/components/admin-form.tsx
index ba1b080..8bd7c98 100644
--- a/src/components/admin-form.tsx
+++ b/src/components/admin-form.tsx
@@ -102,7 +102,7 @@ export function AdminFieldset({
 }) {
   return (
     <fieldset className={`space-y-4 ${last ? "" : "border-b border-ink/10 pb-8"} ${className}`}>
-      <legend className="mb-4 font-serif text-xl text-forest">{legend}</legend>
+      <legend className="mb-4 font-serif text-xl text-heading">{legend}</legend>
       {children}
     </fieldset>
   );
diff --git a/src/components/admin-image-field.tsx b/src/components/admin-image-field.tsx
index 0adc9d3..db5e944 100644
--- a/src/components/admin-image-field.tsx
+++ b/src/components/admin-image-field.tsx
@@ -95,7 +95,7 @@ export function AdminImageField({ name, label, initialValue }: AdminImageFieldPr
             type="button"
             onClick={() => inputRef.current?.click()}
             disabled={status === "uploading"}
-            className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-forest disabled:opacity-50"
+            className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-heading disabled:opacity-50"
           >
             {t.adminImageField.chooseFile}
           </button>
diff --git a/src/components/admin-image-list-field.tsx b/src/components/admin-image-list-field.tsx
index f92decd..3191112 100644
--- a/src/components/admin-image-list-field.tsx
+++ b/src/components/admin-image-list-field.tsx
@@ -111,7 +111,7 @@ export function AdminImageListField({ name, label, initialValues }: AdminImageLi
           type="button"
           onClick={() => inputRef.current?.click()}
           disabled={status === "uploading"}
-          className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-forest disabled:opacity-50"
+          className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-heading disabled:opacity-50"
         >
           {t.adminImageField.chooseFile}
         </button>
diff --git a/src/components/admin-list.tsx b/src/components/admin-list.tsx
index 5d33f1d..41f91b2 100644
--- a/src/components/admin-list.tsx
+++ b/src/components/admin-list.tsx
@@ -20,7 +20,7 @@ export function AdminPageHeader({
   return (
     <div className="mb-8">
       <div className="flex flex-wrap items-center justify-between gap-4">
-        <h1 className="text-2xl text-forest">{title}</h1>
+        <h1 className="text-2xl text-heading">{title}</h1>
         {action ? (
           <LinkButton href={action.href} className="px-5 py-2.5">
             {action.label}
@@ -74,7 +74,7 @@ export function AdminSearchForm({
       {children}
       <button
         type="submit"
-        className="border border-forest px-4 py-2 text-sm text-forest transition-colors duration-300 hover:bg-forest hover:text-cream"
+        className="border border-heading px-4 py-2 text-sm text-heading transition-colors duration-300 hover:bg-forest hover:text-cream"
       >
         {submitLabel}
       </button>
@@ -90,7 +90,7 @@ export function AdminSearchForm({
 export type AdminBadgeTone = "positive" | "pending" | "neutral" | "danger";
 
 const BADGE_TONES: Record<AdminBadgeTone, string> = {
-  positive: "border-forest/40 bg-forest/5 text-forest",
+  positive: "border-heading/40 bg-forest/5 text-heading",
   pending: "border-honey/40 bg-honey/5 text-honey-dark",
   neutral: "border-ink/20 text-ink/70",
   danger: "border-red-200 bg-red-50 text-red-700",
@@ -155,14 +155,14 @@ export function AdminRowActions({ children }: { children: ReactNode }) {
 
 export function AdminActionLink({ href, children }: { href: string; children: ReactNode }) {
   return (
-    <Link href={href} className="link-draw text-forest">
+    <Link href={href} className="link-draw text-heading">
       {children}
     </Link>
   );
 }
 
 const ACTION_TONES = {
-  default: "text-forest",
+  default: "text-heading",
   muted: "text-ink/70",
   danger: "text-red-700",
 } as const;
diff --git a/src/components/admin-shell.tsx b/src/components/admin-shell.tsx
index 3d6c621..e30f529 100644
--- a/src/components/admin-shell.tsx
+++ b/src/components/admin-shell.tsx
@@ -10,6 +10,8 @@ import { HexMark, HoneycombPattern } from "@/components/honeycomb";
 import { AdminCommandPalette, type PaletteEntry } from "@/components/admin-command-palette";
 import { useI18n } from "@/i18n/i18n-provider";
 import type { Dictionary } from "@/i18n/dictionary-type";
+import { ThemeToggle } from "@/components/theme-toggle";
+import type { ThemeChoice } from "@/lib/theme";
 
 /** Was an einer Seite gerade auf Bearbeitung wartet (Zaehler in der Seitenleiste). */
 export type AdminBadges = Partial<Record<string, number>>;
@@ -118,7 +120,7 @@ function NavLinks({
                 {active ? (
                   <motion.span
                     layoutId="admin-nav-active"
-                    className="absolute inset-y-0.5 left-2 right-2 -z-10 bg-cream/10"
+                    className="absolute inset-y-0.5 left-2 right-2 -z-10 bg-surface/10"
                     transition={{ type: "spring", stiffness: 420, damping: 36 }}
                   />
                 ) : null}
@@ -131,7 +133,7 @@ function NavLinks({
                 <span className="flex-1">{item.label}</span>
                 {count > 0 ? (
                   <span
-                    className="min-w-5 rounded-full bg-honey-dark px-1.5 text-center text-[11px] leading-5 text-cream tabular-nums"
+                    className="min-w-5 rounded-full bg-honey-deep px-1.5 text-center text-[11px] leading-5 text-cream tabular-nums"
                     title={waitingLabel(count)}
                   >
                     <span aria-hidden="true">{count}</span>
@@ -175,6 +177,8 @@ function PaletteTrigger({ onClick, label, shortcut }: { onClick: () => void; lab
 
 interface AdminShellProps {
   adminName: string;
+  /** Gewaehlte Darstellung (Cookie), siehe lib/theme.ts. */
+  themeChoice?: ThemeChoice;
   /** Logo fuer dunkle Flaechen, siehe lib/brand.ts. */
   logoSrc?: string | null;
   badges?: AdminBadges;
@@ -190,7 +194,14 @@ interface AdminShellProps {
  * Shop-Kopf- und -Fusszeile blendet das Root-Layout hier aus
  * (components/hide-on-admin.tsx).
  */
-export function AdminShell({ adminName, logoSrc = null, badges = {}, logoutAction, children }: AdminShellProps) {
+export function AdminShell({
+  adminName,
+  logoSrc = null,
+  themeChoice = "system",
+  badges = {},
+  logoutAction,
+  children,
+}: AdminShellProps) {
   const { t } = useI18n();
   const groups = getAdminNavGroups(t);
   const pathname = usePathname();
@@ -209,9 +220,10 @@ export function AdminShell({ adminName, logoSrc = null, badges = {}, logoutActio
     <div className="px-5 py-4 border-t border-cream/10">
       {/* Der Shop-Kopf ist im Admin ausgeblendet (HideOnAdmin) — ohne diesen
           Link fuehrte kein Weg zurueck auf die Website. */}
+      <div className="mb-4 flex items-center justify-between gap-3">
       <Link
         href="/"
-        className="group mb-4 inline-flex items-center gap-2 py-1 text-sm text-cream/90 hover:text-cream"
+        className="group inline-flex items-center gap-2 py-1 text-sm text-cream/90 hover:text-cream"
       >
         <svg
           width="14"
@@ -227,6 +239,8 @@ export function AdminShell({ adminName, logoSrc = null, badges = {}, logoutActio
         </svg>
         <span className="link-draw">{t.adminShell.backToWebsite}</span>
       </Link>
+      <ThemeToggle initial={themeChoice} className="-mr-2 text-cream/70 hover:text-cream" />
+      </div>
       <p className="text-xs text-cream/60 truncate">{t.adminShell.loggedInAs(adminName)}</p>
       <form action={logoutAction} className="mt-2">
         <button type="submit" className="text-xs text-cream/80 underline hover:text-cream">
@@ -237,7 +251,7 @@ export function AdminShell({ adminName, logoSrc = null, badges = {}, logoutActio
   );
 
   return (
-    <div className="min-h-screen bg-cream/40 lg:flex">
+    <div className="min-h-screen bg-surface/40 lg:flex">
       <aside className="relative isolate hidden overflow-hidden lg:flex lg:flex-col lg:w-64 lg:shrink-0 lg:sticky lg:top-0 lg:h-screen bg-forest text-cream">
         <HoneycombPattern className="-z-10 text-honey-light/[0.06]" size={18} fade="bottom" />
         <div className="flex items-center h-16 px-5 border-b border-cream/10">
diff --git a/src/components/admin-video-field.tsx b/src/components/admin-video-field.tsx
index 897814f..a8317d0 100644
--- a/src/components/admin-video-field.tsx
+++ b/src/components/admin-video-field.tsx
@@ -94,7 +94,7 @@ export function AdminVideoField({ name, label, initialValue }: AdminVideoFieldPr
             type="button"
             onClick={() => inputRef.current?.click()}
             disabled={status === "uploading"}
-            className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-forest disabled:opacity-50"
+            className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-heading disabled:opacity-50"
           >
             {t.adminVideoField.chooseFile}
           </button>
diff --git a/src/components/apicore-sync-panel.tsx b/src/components/apicore-sync-panel.tsx
index be93c7d..e0dc923 100644
--- a/src/components/apicore-sync-panel.tsx
+++ b/src/components/apicore-sync-panel.tsx
@@ -48,7 +48,7 @@ export async function ApiCoreSyncResult({ searchParams }: { searchParams: SyncSe
         </p>
       ) : null}
       {done ? (
-        <div className="mb-6 text-sm text-forest bg-forest/5 border border-forest/20 px-4 py-3 space-y-1">
+        <div className="mb-6 text-sm text-heading bg-forest/5 border border-heading/20 px-4 py-3 space-y-1">
           <p>
             {t.resultHarvests(
               count(searchParams.hNew),
@@ -92,7 +92,7 @@ export async function ApiCoreSyncPanel({ returnTo }: { returnTo: string }) {
 
   return (
     <div className="bg-background border border-ink/10 p-6">
-      <h2 className="text-lg text-forest mb-4">{t.heading}</h2>
+      <h2 className="text-lg text-heading mb-4">{t.heading}</h2>
       <p className="text-sm text-ink/65 mb-4">{t.intro}</p>
       <form action={syncApiCoreAction}>
         <input type="hidden" name="returnTo" value={returnTo} />
diff --git a/src/components/back-link.tsx b/src/components/back-link.tsx
index 4964838..4e51f30 100644
--- a/src/components/back-link.tsx
+++ b/src/components/back-link.tsx
@@ -9,7 +9,7 @@ export function BackLink({ href, label }: { href: string; label: string }) {
   return (
     <Link
       href={href}
-      className="-mt-1.5 mb-4.5 inline-flex items-center gap-1.5 py-1.5 text-sm text-ink/70 hover:text-forest"
+      className="-mt-1.5 mb-4.5 inline-flex items-center gap-1.5 py-1.5 text-sm text-ink/70 hover:text-heading"
     >
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
         <path d="M15 6l-6 6 6 6" />
diff --git a/src/components/bee.tsx b/src/components/bee.tsx
index 4a54d0b..0843aaa 100644
--- a/src/components/bee.tsx
+++ b/src/components/bee.tsx
@@ -19,8 +19,8 @@ export function BeeGlyph({ className = "h-8 w-10" }: { className?: string }) {
       </defs>
       {/* Fluegel — kippen um ihre Unterkante */}
       <g className="motion-flutter origin-bottom animate-[wh-flutter_0.11s_ease-in-out_infinite_alternate] [transform-box:fill-box]">
-        <ellipse cx="16.5" cy="9.5" rx="5.2" ry="8" transform="rotate(-22 16.5 9.5)" fill="#FAF8F3" fillOpacity="0.9" stroke="#24352B" strokeWidth="1.1" />
-        <ellipse cx="23.5" cy="10" rx="4.4" ry="6.8" transform="rotate(14 23.5 10)" fill="#FAF8F3" fillOpacity="0.9" stroke="#24352B" strokeWidth="1.1" />
+        <ellipse cx="16.5" cy="9.5" rx="5.2" ry="8" transform="rotate(-22 16.5 9.5)" fill="#FAF8F3" fillOpacity="0.9" stroke="var(--color-heading)" strokeWidth="1.1" />
+        <ellipse cx="23.5" cy="10" rx="4.4" ry="6.8" transform="rotate(14 23.5 10)" fill="#FAF8F3" fillOpacity="0.9" stroke="var(--color-heading)" strokeWidth="1.1" />
       </g>
       {/* Stachel */}
       <path d="M9.6 19.2 5.2 20l4.4.9z" fill="#24352B" />
@@ -31,8 +31,8 @@ export function BeeGlyph({ className = "h-8 w-10" }: { className?: string }) {
       </g>
       <ellipse cx="20" cy="20" rx="10.5" ry="6.8" fill="none" stroke="#24352B" strokeWidth="1.2" />
       {/* Kopf und Fuehler */}
-      <circle cx="32" cy="18.8" r="4.3" fill="#24352B" />
-      <path d="M33.5 15c1-2.6 2.6-3.9 4.8-4.1M31.4 14.8c-.1-2.8.8-4.6 2.6-5.6" fill="none" stroke="#24352B" strokeWidth="1" strokeLinecap="round" />
+      <circle cx="32" cy="18.8" r="4.3" fill="var(--color-heading)" />
+      <path d="M33.5 15c1-2.6 2.6-3.9 4.8-4.1M31.4 14.8c-.1-2.8.8-4.6 2.6-5.6" fill="none" stroke="var(--color-heading)" strokeWidth="1" strokeLinecap="round" />
     </svg>
   );
 }
diff --git a/src/components/business-inquiry-form.tsx b/src/components/business-inquiry-form.tsx
index 80e0b7f..a2f91c0 100644
--- a/src/components/business-inquiry-form.tsx
+++ b/src/components/business-inquiry-form.tsx
@@ -65,7 +65,7 @@ export function BusinessInquiryForm({ turnstileSiteKey }: { turnstileSiteKey?: s
 
   if (status === "success") {
     return (
-      <p className="text-forest">
+      <p className="text-heading">
         {t.businessInquiryForm.successMessage}
       </p>
     );
@@ -95,14 +95,14 @@ export function BusinessInquiryForm({ turnstileSiteKey }: { turnstileSiteKey?: s
           {t.unternehmenPage.packages.map((p, i) => (
             <label
               key={p.key}
-              className="group relative flex cursor-pointer flex-col border border-ink/20 bg-background p-4 transition-colors duration-300 hover:border-ink/40 has-[:checked]:border-forest has-[:checked]:bg-forest/[0.04] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-honey-dark"
+              className="group relative flex cursor-pointer flex-col border border-ink/20 bg-background p-4 transition-colors duration-300 hover:border-ink/40 has-[:checked]:border-heading has-[:checked]:bg-forest/[0.04] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-honey-dark"
             >
               <input type="radio" name="package" value={p.key} defaultChecked={i === 0} className="sr-only" />
               <span className="flex items-center justify-between gap-3">
-                <span className="font-serif text-xl text-forest">{p.title}</span>
+                <span className="font-serif text-xl text-heading">{p.title}</span>
                 <span
                   aria-hidden="true"
-                  className="h-3.5 w-3.5 flex-shrink-0 rounded-full border border-ink/30 transition-[border-width,border-color] duration-200 group-has-[:checked]:border-[4.5px] group-has-[:checked]:border-forest"
+                  className="h-3.5 w-3.5 flex-shrink-0 rounded-full border border-ink/30 transition-[border-width,border-color] duration-200 group-has-[:checked]:border-[4.5px] group-has-[:checked]:border-heading"
                 />
               </span>
               <span className="mt-2 text-ink/70 leading-relaxed">{p.text}</span>
@@ -151,7 +151,7 @@ function TextField({
         name={name}
         type={type}
         required={required}
-        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
       />
     </label>
   );
diff --git a/src/components/copy-code-button.tsx b/src/components/copy-code-button.tsx
index 7dd7bc2..5c4c860 100644
--- a/src/components/copy-code-button.tsx
+++ b/src/components/copy-code-button.tsx
@@ -25,7 +25,7 @@ export function CopyCodeButton({ code, label, copiedLabel }: { code: string; lab
     <button
       type="button"
       onClick={copy}
-      className="inline-flex h-10 items-center gap-2 border border-forest px-4 text-xs tracking-wide-caps text-forest transition-colors hover:bg-forest hover:text-cream"
+      className="inline-flex h-10 items-center gap-2 border border-heading px-4 text-xs tracking-wide-caps text-heading transition-colors hover:bg-forest hover:text-cream"
       aria-live="polite"
     >
       <AnimatePresence mode="wait" initial={false}>
diff --git a/src/components/flash-toast.tsx b/src/components/flash-toast.tsx
index 7256cd8..3bcffa5 100644
--- a/src/components/flash-toast.tsx
+++ b/src/components/flash-toast.tsx
@@ -11,7 +11,7 @@ import { FLASH_COOKIE, type Flash } from "@/lib/flash-core";
 const AUTO_HIDE_MS: Record<Flash["kind"], number> = { success: 6000, info: 8000, error: 12000 };
 
 const STYLES: Record<Flash["kind"], string> = {
-  success: "bg-forest text-cream border-forest",
+  success: "bg-forest text-cream border-heading",
   info: "bg-background text-ink border-ink/20",
   error: "bg-red-50 text-red-800 border-red-300",
 };
diff --git a/src/components/home-sections-a.tsx b/src/components/home-sections-a.tsx
index 845a95e..384297f 100644
--- a/src/components/home-sections-a.tsx
+++ b/src/components/home-sections-a.tsx
@@ -73,7 +73,7 @@ export async function OriginStory() {
   return (
     // Randlos geteilt: das Foto fuellt die linke Haelfte bis an den
     // Fensterrand, der Text steht daneben — kein Rahmen, keine Karte.
-    <section className="grid bg-cream/60 md:grid-cols-2">
+    <section className="grid bg-surface/60 md:grid-cols-2">
       <ScrollReveal className="h-full">
         <ParallaxMedia className="h-full min-h-[24rem] md:min-h-[40rem]">
           <ContentImage
@@ -129,7 +129,7 @@ export async function Philosophy() {
               delay={i * 0.06}
               className="border-b border-ink/15 py-8 sm:pr-8 lg:border-b-0 lg:border-l lg:px-8 lg:first:border-l-0 lg:first:pl-0"
             >
-              <h3 className="font-serif text-3xl leading-tight text-forest text-balance">{item.title}</h3>
+              <h3 className="font-serif text-3xl leading-tight text-heading text-balance">{item.title}</h3>
               <p className="mt-3 max-w-[34ch] text-sm leading-relaxed text-ink/70">{item.text}</p>
             </ScrollReveal>
           ))}
@@ -151,7 +151,7 @@ export async function BeekeeperNote() {
   const [content, company] = await Promise.all([getContentValues(["imkerei.image"], locale), getCompanyInfo()]);
   const quote = t.imkereiPage.paragraphs[0];
   return (
-    <section className="relative overflow-hidden bg-cream/60 py-24 md:py-32">
+    <section className="relative overflow-hidden bg-surface/60 py-24 md:py-32">
       <HoneycombPattern className="text-honey/[0.08]" size={26} fade="right" />
       <Container className="relative grid items-center gap-16 md:grid-cols-12 md:gap-12">
         <ScrollReveal className="mx-auto w-64 sm:w-72 md:col-span-5 md:w-full md:max-w-sm">
@@ -195,7 +195,7 @@ export async function BeekeeperNote() {
         </ScrollReveal>
         <ScrollReveal delay={0.1} className="md:col-span-7">
           <blockquote>
-            <p className="font-serif text-3xl leading-snug text-forest text-balance md:text-4xl lg:text-[2.75rem]">
+            <p className="font-serif text-3xl leading-snug text-heading text-balance md:text-4xl lg:text-[2.75rem]">
               <span aria-hidden="true" className="mr-1 text-honey">„</span>
               {quote}
               <span aria-hidden="true" className="ml-0.5 text-honey">“</span>
diff --git a/src/components/home-sections-b.tsx b/src/components/home-sections-b.tsx
index a959f75..0134111 100644
--- a/src/components/home-sections-b.tsx
+++ b/src/components/home-sections-b.tsx
@@ -16,7 +16,7 @@ export async function ProcessTimeline() {
   const content = await getContentValues(["home.processTimeline.steps"], locale);
   const steps = parseListNumbered(content["home.processTimeline.steps"]);
   return (
-    <section className="py-24 bg-cream/60">
+    <section className="py-24 bg-surface/60">
       <Container>
         <ScrollReveal>
           <SectionHeading
@@ -86,7 +86,7 @@ export async function Sustainability() {
   const content = await getContentValues(["home.sustainability.items"], locale);
   const items = parseListTitled(content["home.sustainability.items"]);
   return (
-    <section className="py-28 bg-cream/60">
+    <section className="py-28 bg-surface/60">
       {/* Geteilt statt Viererreihe: die Ueberschrift laeuft mit, die Punkte
           werden als ruhige Liste gelesen. */}
       <Container className="grid gap-12 lg:grid-cols-12 lg:gap-16">
@@ -102,7 +102,7 @@ export async function Sustainability() {
                 <div className="group grid grid-cols-[auto_1fr] gap-x-5 py-7">
                   <HexMark className="mt-2 h-3 w-3 text-honey transition-transform duration-500 ease-[var(--ease-arrive)] group-hover:rotate-90" />
                   <div>
-                    <h3 className="text-2xl text-forest">{item.title}</h3>
+                    <h3 className="text-2xl text-heading">{item.title}</h3>
                     <p className="mt-2 max-w-[55ch] text-ink/70 leading-relaxed">{item.text}</p>
                   </div>
                 </div>
diff --git a/src/components/language-switcher.tsx b/src/components/language-switcher.tsx
index ba74613..1cd36cc 100644
--- a/src/components/language-switcher.tsx
+++ b/src/components/language-switcher.tsx
@@ -38,7 +38,7 @@ export function LanguageSwitcher({ className = "" }: { className?: string }) {
             aria-current={code === locale}
             title={localeLabels[code]}
             className={`uppercase tracking-wide transition-colors disabled:opacity-50 ${
-              code === locale ? "text-forest font-medium" : "text-ink/70 hover:text-forest"
+              code === locale ? "text-heading font-medium" : "text-ink/70 hover:text-heading"
             }`}
           >
             {code}
diff --git a/src/components/legal-page.tsx b/src/components/legal-page.tsx
index a61b75d..3594cae 100644
--- a/src/components/legal-page.tsx
+++ b/src/components/legal-page.tsx
@@ -23,14 +23,14 @@ export function LegalPage({
   return (
     <div className="py-20">
       <Container className="max-w-3xl">
-        <h1 className="text-4xl md:text-5xl leading-[1.05] tracking-[-0.01em] text-forest">{title}</h1>
+        <h1 className="text-4xl md:text-5xl leading-[1.05] tracking-[-0.01em] text-heading">{title}</h1>
         {noticeText ? (
           <p className="mt-2 text-xs text-honey-dark tracking-wide-caps">{noticeText}</p>
         ) : null}
         <div className="mt-10 space-y-10">
           {sections.map((section) => (
             <section key={section.heading}>
-              <h2 className="text-2xl text-forest">{section.heading}</h2>
+              <h2 className="text-2xl text-heading">{section.heading}</h2>
               <div className="mt-3 space-y-3 text-sm text-ink/70 leading-relaxed">
                 {section.paragraphs.map((p, i) => (
                   <p key={i}>{p}</p>
diff --git a/src/components/logomark.tsx b/src/components/logomark.tsx
index 7184f75..1a228ec 100644
--- a/src/components/logomark.tsx
+++ b/src/components/logomark.tsx
@@ -32,7 +32,7 @@ export function Logomark({
   }
 
   const hexColor = variant === "inverted" ? "#F4EFE5" : "#B88A44";
-  const treeColor = variant === "inverted" ? "#F4EFE5" : "#24352B";
+  const treeColor = variant === "inverted" ? "#F4EFE5" : "var(--color-heading)";
 
   return (
     <svg viewBox="0 0 100 100" className={className} fill="none" aria-hidden="true">
diff --git a/src/components/newsletter-signup.tsx b/src/components/newsletter-signup.tsx
index f7f0ba2..e4a31a6 100644
--- a/src/components/newsletter-signup.tsx
+++ b/src/components/newsletter-signup.tsx
@@ -91,7 +91,7 @@ export function NewsletterSignup({ turnstileSiteKey }: { turnstileSiteKey?: stri
                 />
               </svg>
               <motion.p
-                className="mt-4 font-serif text-2xl text-forest"
+                className="mt-4 font-serif text-2xl text-heading"
                 initial={{ opacity: 0, y: 8 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.45 }}
@@ -115,7 +115,7 @@ export function NewsletterSignup({ turnstileSiteKey }: { turnstileSiteKey?: stri
                 placeholder={t.home.newsletter.emailPlaceholder}
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="min-w-0 flex-1 border border-ink/20 bg-background px-4 py-3 text-sm focus:outline-none focus:border-forest"
+                className="min-w-0 flex-1 border border-ink/20 bg-background px-4 py-3 text-sm focus:outline-none focus:border-heading"
               />
               <Button type="submit" disabled={status === "loading"} className="flex-shrink-0 whitespace-nowrap">
                 {status === "loading" ? t.home.newsletter.subscribing : t.home.newsletter.subscribe}
diff --git a/src/components/page-outro.tsx b/src/components/page-outro.tsx
index 7929273..16f8737 100644
--- a/src/components/page-outro.tsx
+++ b/src/components/page-outro.tsx
@@ -26,7 +26,7 @@ export function PageOutro({ links, ariaLabel }: { links: PageOutroLink[]; ariaLa
             }`}
           >
             <span>
-              <span className="block font-serif text-4xl leading-tight text-forest md:text-5xl">
+              <span className="block font-serif text-4xl leading-tight text-heading md:text-5xl">
                 {link.label}
               </span>
               <span className="mt-3 block max-w-[40ch] text-sm leading-relaxed text-ink/65">{link.text}</span>
diff --git a/src/components/password-field.tsx b/src/components/password-field.tsx
index 83858f9..1334f8c 100644
--- a/src/components/password-field.tsx
+++ b/src/components/password-field.tsx
@@ -102,13 +102,13 @@ export function PasswordField({
           minLength={minLength}
           autoComplete={autoComplete}
           onChange={showStrength ? (e) => setValue(e.target.value) : undefined}
-          className="w-full border border-ink/20 bg-background px-4 py-3 pr-12 focus:outline-none focus:border-forest"
+          className="w-full border border-ink/20 bg-background px-4 py-3 pr-12 focus:outline-none focus:border-heading"
         />
         <button
           type="button"
           onClick={() => setVisible((v) => !v)}
           aria-label={visible ? "Passwort verbergen" : "Passwort anzeigen"}
-          className="absolute inset-y-0 right-0 flex items-center px-3 text-ink/50 hover:text-forest"
+          className="absolute inset-y-0 right-0 flex items-center px-3 text-ink/50 hover:text-heading"
         >
           {visible ? <EyeOffIcon /> : <EyeIcon />}
         </button>
diff --git a/src/components/placeholder-image.tsx b/src/components/placeholder-image.tsx
index c520790..665d23b 100644
--- a/src/components/placeholder-image.tsx
+++ b/src/components/placeholder-image.tsx
@@ -3,7 +3,7 @@ import { Logomark } from "@/components/logomark";
 
 const SURFACES = {
   forest: "bg-forest text-cream",
-  cream: "bg-cream text-forest",
+  cream: "bg-surface text-heading",
   honey: "bg-honey-pale/60 text-forest",
 } as const;
 
diff --git a/src/components/process-path.tsx b/src/components/process-path.tsx
index 225a056..552158b 100644
--- a/src/components/process-path.tsx
+++ b/src/components/process-path.tsx
@@ -88,7 +88,7 @@ function ProcessStep({
         </svg>
       </motion.span>
       <span className="font-serif text-sm text-honey-dark tabular-nums">{step.number}</span>
-      <h3 className="mt-1 text-xl text-forest">{step.title}</h3>
+      <h3 className="mt-1 text-xl text-heading">{step.title}</h3>
       <p className="mt-2 text-sm text-ink/70 leading-relaxed">{step.text}</p>
     </li>
   );
diff --git a/src/components/product-card.tsx b/src/components/product-card.tsx
index f6500e8..e5c958b 100644
--- a/src/components/product-card.tsx
+++ b/src/components/product-card.tsx
@@ -41,7 +41,7 @@ export function ProductTeaserLink({
   return (
     <Link
       href={`/honig/${slug}`}
-      className="group flex items-center gap-5 border border-ink/10 p-4 transition-[border-color,transform,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-0.5 hover:border-forest/50 hover:shadow-[0_18px_34px_-24px_rgba(36,53,43,0.45)]"
+      className="group flex items-center gap-5 border border-ink/10 p-4 transition-[border-color,transform,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-0.5 hover:border-heading/50 hover:shadow-[0_18px_34px_-24px_rgba(36,53,43,0.45)]"
     >
       <span className="block overflow-hidden rounded-lg">
         <ContentImage
@@ -53,8 +53,8 @@ export function ProductTeaserLink({
         />
       </span>
       <span className="flex-1">
-        <span className="block font-serif text-xl text-forest">{name}</span>
-        <span className="mt-1 inline-flex items-center gap-1.5 text-sm text-ink/70 transition-colors group-hover:text-forest">
+        <span className="block font-serif text-xl text-heading">{name}</span>
+        <span className="mt-1 inline-flex items-center gap-1.5 text-sm text-ink/70 transition-colors group-hover:text-heading">
           {t.product.viewProduct.replace(/\s*→\s*$/, "")}
           <svg
             aria-hidden="true"
@@ -101,7 +101,7 @@ export function TasteScale({
           <span
             key={i}
             className={`relative h-1.5 w-6 overflow-hidden rounded-full ${
-              tone === "inverted" ? "bg-cream/15" : "bg-ink/10"
+              tone === "inverted" ? "bg-surface/15" : "bg-ink/10"
             }`}
           >
             {i < value ? (
@@ -295,14 +295,14 @@ export function ProductCard({
             {t.product.outOfStock}
           </span>
         ) : stock <= 5 ? (
-          <span className="absolute top-3 left-3 bg-honey-dark text-cream text-[10px] tracking-wide-caps px-2.5 py-1">
+          <span className="absolute top-3 left-3 bg-honey-deep text-cream text-[10px] tracking-wide-caps px-2.5 py-1">
             {t.product.onlyLeft(stock)}
           </span>
         ) : null}
       </Link>
       <div className="mt-5 flex flex-1 flex-col">
         <Link href={`/honig/${product.slug}`} className="self-start">
-          <h3 className="link-draw text-2xl leading-tight text-forest">{product.name}</h3>
+          <h3 className="link-draw text-2xl leading-tight text-heading">{product.name}</h3>
         </Link>
         <p className="text-sm text-ink/70 mt-1">
           {product.tasteTags.join(" · ")}
@@ -319,7 +319,7 @@ export function ProductCard({
         </p>
         <div className="mt-auto flex items-baseline justify-between pt-3">
           <span className="text-sm text-ink/65 tabular-nums">{product.weightGrams} g</span>
-          <span className="font-serif text-2xl text-forest tabular-nums">
+          <span className="font-serif text-2xl text-heading tabular-nums">
             {formatPrice(product.priceCents, product.currency, locale)}
           </span>
         </div>
@@ -331,7 +331,7 @@ export function ProductCard({
         ) : null}
         <Link
           href={`/honig/${product.slug}`}
-          className="group/more mt-3 inline-flex items-center gap-2 self-start py-1 text-sm tracking-wide-caps text-forest"
+          className="group/more mt-3 inline-flex items-center gap-2 self-start py-1 text-sm tracking-wide-caps text-heading"
         >
           <span className="link-draw pb-0.5">
             {product.category === "HONIG" ? t.product.toHoney : t.product.toProduct}
diff --git a/src/components/product-gallery.tsx b/src/components/product-gallery.tsx
index efb51cf..cd74fae 100644
--- a/src/components/product-gallery.tsx
+++ b/src/components/product-gallery.tsx
@@ -100,7 +100,7 @@ export function ProductGallery({ images, productName, description }: ProductGall
               aria-label={`${isImageSlide(slide) ? `Produktbild ${index + 1}` : slide.label} – Bild ${index + 1} von ${slides.length} anzeigen`}
               aria-current={index === activeIndex}
               className={`relative aspect-square overflow-hidden rounded-lg border-2 transition-colors ${
-                index === activeIndex ? "border-forest" : "border-transparent hover:border-ink/20"
+                index === activeIndex ? "border-heading" : "border-transparent hover:border-ink/20"
               }`}
             >
               {isImageSlide(slide) ? (
diff --git a/src/components/quantity-stepper.tsx b/src/components/quantity-stepper.tsx
index d5f401c..f7e19e0 100644
--- a/src/components/quantity-stepper.tsx
+++ b/src/components/quantity-stepper.tsx
@@ -22,7 +22,7 @@ export function QuantityStepper({
   size?: "sm" | "md";
 }) {
   const buttonSize = size === "sm" ? "w-8 h-8" : "w-10 h-10";
-  const buttonClass = `${buttonSize} flex items-center justify-center text-ink/70 transition-[color,background-color,transform] duration-200 hover:bg-honey/10 hover:text-forest active:scale-90 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-ink/70 disabled:active:scale-100`;
+  const buttonClass = `${buttonSize} flex items-center justify-center text-ink/70 transition-[color,background-color,transform] duration-200 hover:bg-honey/10 hover:text-heading active:scale-90 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-ink/70 disabled:active:scale-100`;
 
   return (
     <div className="inline-flex items-stretch border border-ink/20 bg-background">
diff --git a/src/components/recently-viewed-section.tsx b/src/components/recently-viewed-section.tsx
index 1bf6d76..dc74d23 100644
--- a/src/components/recently-viewed-section.tsx
+++ b/src/components/recently-viewed-section.tsx
@@ -43,7 +43,7 @@ export function RecentlyViewedSection({ excludeProductId }: { excludeProductId?:
 
   return (
     <div className="mt-20">
-      <h2 className="text-2xl text-forest mb-8">{t.productPage.recentlyViewedHeading}</h2>
+      <h2 className="text-2xl text-heading mb-8">{t.productPage.recentlyViewedHeading}</h2>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-14">
         {products.map((product) => (
           <ProductCard key={product.id} product={product} />
diff --git a/src/components/shipment-tracking-history.tsx b/src/components/shipment-tracking-history.tsx
index 03b8c20..4abb11f 100644
--- a/src/components/shipment-tracking-history.tsx
+++ b/src/components/shipment-tracking-history.tsx
@@ -24,7 +24,7 @@ const STATUS_FILL: Record<DhlTrackingStatus, string> = {
 const STATUS_TEXT: Record<DhlTrackingStatus, string> = {
   "pre-transit": "text-ink/70",
   transit: "text-honey-dark",
-  delivered: "text-forest",
+  delivered: "text-heading",
   failure: "text-red-700",
   unknown: "text-ink/70",
 };
@@ -50,7 +50,7 @@ export function ShipmentTrackingHistory({
   if (result.kind !== "ok") {
     return (
       <section className="mt-5 border-t border-ink/10 pt-5">
-        <h3 className="text-sm text-forest">{labels.heading}</h3>
+        <h3 className="text-sm text-heading">{labels.heading}</h3>
         <p className="mt-2 text-xs text-ink/65 leading-relaxed">
           {result.kind === "not-found" ? labels.notYetScanned : labels.unavailable}
         </p>
@@ -62,7 +62,7 @@ export function ShipmentTrackingHistory({
   return (
     <section className="mt-5 border-t border-ink/10 pt-5" aria-label={labels.ariaLabel}>
       <div className="flex flex-wrap items-baseline justify-between gap-2">
-        <h3 className="text-sm text-forest">{labels.heading}</h3>
+        <h3 className="text-sm text-heading">{labels.heading}</h3>
         <span className={`text-xs ${STATUS_TEXT[info.status]}`}>{labels.statuses[info.status]}</span>
       </div>
 
@@ -99,7 +99,7 @@ export function ShipmentTrackingHistory({
                   strokeWidth="2"
                 />
               </svg>
-              <p className={`text-sm ${i === 0 ? "font-serif text-lg text-forest" : "text-ink/70"}`}>{event.description}</p>
+              <p className={`text-sm ${i === 0 ? "font-serif text-lg text-heading" : "text-ink/70"}`}>{event.description}</p>
               <p className="mt-0.5 text-xs text-ink/55">
                 <time dateTime={event.timestamp.toISOString()}>{formatDateTime(event.timestamp, locale)}</time>
                 {event.location ? ` · ${event.location}` : null}
diff --git a/src/components/site-chrome.tsx b/src/components/site-chrome.tsx
index 064346a..4f0f6e1 100644
--- a/src/components/site-chrome.tsx
+++ b/src/components/site-chrome.tsx
@@ -17,6 +17,8 @@ import { useI18n } from "@/i18n/i18n-provider";
 import { CartFlight, onCartLanded } from "@/components/cart-flight";
 import { HexMark } from "@/components/honeycomb";
 import type { Dictionary } from "@/i18n/dictionary-type";
+import { ThemeToggle } from "@/components/theme-toggle";
+import type { ThemeChoice } from "@/lib/theme";
 
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -81,10 +83,10 @@ function Logo({ t, companyName, logoSrc }: { t: Dictionary; companyName: string;
       {/* Kopfzeile ist bei 1280-1440 px knapp: breite Logos hier enger begrenzt. */}
       <Logomark className="h-9 w-9 max-w-14 flex-shrink-0 sm:max-w-28" src={logoSrc} />
       <span className="flex flex-col leading-none">
-        <span className="text-2xl tracking-[0.2em] text-forest font-serif">
+        <span className="text-2xl tracking-[0.2em] text-heading font-serif">
           {companyName}
         </span>
-        <span className="hidden 2xl:block text-[10px] tracking-[0.3em] uppercase text-honey-dark mt-1 whitespace-nowrap">
+        <span className="hidden min-[1680px]:block text-[10px] tracking-[0.3em] uppercase text-honey-dark mt-1 whitespace-nowrap">
           {t.footer.tagline}
         </span>
       </span>
@@ -166,7 +168,7 @@ function SearchButton() {
               autoFocus
               autoComplete="off"
               placeholder={t.nav.searchPlaceholder}
-              className="w-full border-b border-forest bg-transparent px-2 py-1.5 text-sm focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
+              className="w-full border-b border-heading bg-transparent px-2 py-1.5 text-sm focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
             />
             {visibleSuggestions.length > 0 ? (
               <motion.ul
@@ -214,7 +216,7 @@ function SearchButton() {
         type="button"
         onClick={() => (open ? closeSearch() : setOpen(true))}
         aria-label={t.nav.openSearch}
-        className="flex items-center justify-center w-10 h-10 text-forest flex-shrink-0"
+        className="flex items-center justify-center w-10 h-10 text-heading flex-shrink-0"
       >
         <AnimatePresence mode="wait" initial={false}>
           <motion.svg
@@ -253,7 +255,7 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, index)}
-      <mark className="bg-honey-pale/70 text-forest">{text.slice(index, index + needle.length)}</mark>
+      <mark className="bg-honey-pale/70 text-heading">{text.slice(index, index + needle.length)}</mark>
       {text.slice(index + needle.length)}
     </>
   );
@@ -265,7 +267,7 @@ function AccountIconButton() {
     <Link
       href="/konto"
       aria-label={t.nav.account}
-      className="flex items-center justify-center w-10 h-10 text-forest"
+      className="flex items-center justify-center w-10 h-10 text-heading"
     >
       <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
         <circle cx="12" cy="8" r="4" />
@@ -301,7 +303,7 @@ function CartIconButton() {
       onClick={openCart}
       aria-label={t.nav.openCart(count)}
       data-cart-target=""
-      className="relative flex items-center justify-center w-10 h-10 text-forest transition-colors hover:text-honey-dark"
+      className="relative flex items-center justify-center w-10 h-10 text-heading transition-colors hover:text-honey-dark"
     >
       <motion.svg
         animate={basketControls}
@@ -326,7 +328,7 @@ function CartIconButton() {
             animate={{ scale: 1, opacity: 1 }}
             exit={{ scale: 0.4, opacity: 0 }}
             transition={{ type: "spring", stiffness: 520, damping: 18 }}
-            className="absolute -top-1 -right-1 bg-honey-dark text-cream text-[10px] min-w-4 h-4 px-1 rounded-full flex items-center justify-center tabular-nums"
+            className="absolute -top-1 -right-1 bg-honey-deep text-cream text-[10px] min-w-4 h-4 px-1 rounded-full flex items-center justify-center tabular-nums"
           >
             {count}
           </motion.span>
@@ -380,10 +382,12 @@ export function Header({
   companyName,
   logoSrc = null,
   logoInvertedSrc = null,
+  themeChoice = "system",
 }: {
   companyName: string;
   logoSrc?: string | null;
   logoInvertedSrc?: string | null;
+  themeChoice?: ThemeChoice;
 }) {
   const { t } = useI18n();
   const pathname = usePathname();
@@ -430,7 +434,7 @@ export function Header({
                   href={item.href}
                   aria-current={active ? "page" : undefined}
                   className={`link-draw pb-1 text-sm whitespace-nowrap transition-colors ${
-                    active ? "text-forest" : "text-ink/80 hover:text-forest"
+                    active ? "text-heading" : "text-ink/80 hover:text-heading"
                   }`}
                 >
                   {t.nav[item.key]}
@@ -440,13 +444,16 @@ export function Header({
           </nav>
 
           <div className="flex items-center gap-2">
-            <div className="hidden md:block">
+            {/* Zwischen xl und 2xl steht "Shop" schon in der Navigation - dort waere der
+                Knopf eine Dopplung und nahm der knappen Kopfzeile den Platz. */}
+            <div className="hidden md:block xl:hidden 2xl:block">
               <LinkButton href="/shop" variant="primary" className="whitespace-nowrap">
                 {t.nav.discoverHoney}
               </LinkButton>
             </div>
             <div className="hidden xl:flex items-center gap-1">
               <LanguageSwitcher />
+              <ThemeToggle initial={themeChoice} className="text-ink/70 hover:text-heading" />
               <SearchButton />
               <AccountIconButton />
             </div>
@@ -455,7 +462,7 @@ export function Header({
             <button
               ref={menuButtonRef}
               aria-label={t.nav.openMenu}
-              className="xl:hidden flex items-center justify-center w-10 h-10 text-forest"
+              className="xl:hidden flex items-center justify-center w-10 h-10 text-heading"
               onClick={() => setMobileOpen(true)}
             >
               <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
@@ -494,6 +501,7 @@ export function Header({
               </span>
               <div className="flex items-center gap-4">
                 <LanguageSwitcher className="!text-cream/70" />
+                <ThemeToggle initial={themeChoice} className="text-cream/70 hover:text-cream" />
                 <button
                   aria-label={t.nav.closeMenu}
                   className="w-10 h-10 flex items-center justify-center"
@@ -625,7 +633,7 @@ export function CartDrawer() {
             className="fixed right-0 top-0 h-full w-full sm:w-[420px] bg-background z-50 flex flex-col shadow-[-24px_0_60px_-30px_rgba(36,53,43,0.45)] outline-none"
           >
             <div className="flex items-center justify-between px-6 h-20 border-b border-ink/10">
-              <h2 id="cart-drawer-title" className="flex items-baseline gap-2 text-2xl font-serif text-forest">
+              <h2 id="cart-drawer-title" className="flex items-baseline gap-2 text-2xl font-serif text-heading">
                 {t.cart.title}
                 {items.length > 0 ? (
                   <span className="font-sans text-xs text-ink/55 tabular-nums">({cartItemCount(items)})</span>
@@ -634,7 +642,7 @@ export function CartDrawer() {
               <button
                 aria-label={t.cart.close}
                 onClick={closeCart}
-                className="flex w-9 h-9 items-center justify-center text-ink/70 transition-[color,transform] duration-300 hover:rotate-90 hover:text-forest"
+                className="flex w-9 h-9 items-center justify-center text-ink/70 transition-[color,transform] duration-300 hover:rotate-90 hover:text-heading"
               >
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                   <path d="M6 6l12 12M18 6L6 18" />
@@ -655,7 +663,7 @@ export function CartDrawer() {
                       strokeDasharray="6 5"
                     />
                   </svg>
-                  <p className="mt-6 font-serif text-2xl text-forest">{t.cart.empty}</p>
+                  <p className="mt-6 font-serif text-2xl text-heading">{t.cart.empty}</p>
                   <LinkButton href="/shop" variant="secondary" onClick={closeCart} className="mt-8">
                     {t.nav.discoverHoney}
                   </LinkButton>
@@ -676,7 +684,7 @@ export function CartDrawer() {
                       >
                         <CartItemThumbnail image={item.image} className="w-16 h-16 flex-shrink-0 rounded-lg" />
                         <div className="flex-1">
-                          <p className="font-serif text-lg leading-tight text-forest">{item.name}</p>
+                          <p className="font-serif text-lg leading-tight text-heading">{item.name}</p>
                           <p className="text-xs text-ink/65">{item.weightGrams} g</p>
                           {/* Live-Bestand trifft erst NACH dem ersten Rendern ein (siehe
                               use-cart-stock.ts) — der Wrapper bleibt beim Uebergang von
@@ -726,7 +734,7 @@ export function CartDrawer() {
                     key={total}
                     initial={{ opacity: 0.4, y: -4 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="font-serif text-2xl text-forest tabular-nums"
+                    className="font-serif text-2xl text-heading tabular-nums"
                   >
                     {formatPrice(total, "EUR", locale)}
                   </motion.span>
diff --git a/src/components/sticky-add-to-cart-bar.tsx b/src/components/sticky-add-to-cart-bar.tsx
index 564cea7..fb98caa 100644
--- a/src/components/sticky-add-to-cart-bar.tsx
+++ b/src/components/sticky-add-to-cart-bar.tsx
@@ -38,7 +38,7 @@ export function StickyAddToCartBar({
       <div className="flex items-center gap-4">
         <div className="min-w-0 flex-1">
           <p className="truncate text-sm text-ink">{product.name}</p>
-          <p className="text-sm text-forest tabular-nums">{formatPrice(product.priceCents, product.currency, locale)}</p>
+          <p className="text-sm text-heading tabular-nums">{formatPrice(product.priceCents, product.currency, locale)}</p>
         </div>
         {inStock ? (
           <Button
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..053c8b6
--- /dev/null
+++ b/src/components/theme-toggle.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { useI18n } from "@/i18n/i18n-provider";
+import {
+  THEME_COOKIE,
+  THEME_COOKIE_MAX_AGE,
+  nextThemeChoice,
+  parseThemeChoice,
+  type ThemeChoice,
+} from "@/lib/theme";
+
+const THEME_EVENT = "wh-theme-change";
+
+function readChoice(): ThemeChoice {
+  return parseThemeChoice(document.documentElement.dataset.theme);
+}
+
+function subscribe(onChange: () => void): () => void {
+  window.addEventListener(THEME_EVENT, onChange);
+  return () => window.removeEventListener(THEME_EVENT, onChange);
+}
+
+function applyChoice(choice: ThemeChoice): void {
+  const root = document.documentElement;
+  const secure = window.location.protocol === "https:" ? "; secure" : "";
+  if (choice === "system") {
+    delete root.dataset.theme;
+    document.cookie = `${THEME_COOKIE}=; path=/; max-age=0; samesite=lax${secure}`;
+  } else {
+    root.dataset.theme = choice;
+    document.cookie = `${THEME_COOKIE}=${choice}; path=/; max-age=${THEME_COOKIE_MAX_AGE}; samesite=lax${secure}`;
+  }
+  // Alle Umschalter (Kopfzeile, Mobilmenue, Admin-Leiste) bleiben synchron.
+  window.dispatchEvent(new Event(THEME_EVENT));
+}
+
+/**
+ * Umschalter Automatisch -> Hell -> Dunkel. Das Symbol zeigt die aktuelle
+ * Wahl; Name und Tooltip sagen, was ein Klick bewirkt. "initial" kommt vom
+ * Server (Cookie), damit der erste Render mit dem Dokument uebereinstimmt.
+ */
+export function ThemeToggle({ initial, className = "" }: { initial: ThemeChoice; className?: string }) {
+  const { t } = useI18n();
+  const choice = useSyncExternalStore(subscribe, readChoice, () => initial);
+  const next = nextThemeChoice(choice);
+  const label = t.theme.toggleLabel(t.theme[choice], t.theme[next]);
+
+  return (
+    <button
+      type="button"
+      onClick={() => applyChoice(next)}
+      aria-label={label}
+      title={label}
+      className={`inline-flex h-10 w-10 items-center justify-center transition-colors duration-300 ${className}`}
+    >
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+        {choice === "light" ? (
+          <>
+            <circle cx="12" cy="12" r="4" />
+            <path d="M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" strokeLinecap="round" />
+          </>
+        ) : choice === "dark" ? (
+          <path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" strokeLinejoin="round" />
+        ) : (
+          <>
+            <circle cx="12" cy="12" r="8" />
+            <path d="M12 4a8 8 0 0 1 0 16Z" fill="currentColor" stroke="none" />
+          </>
+        )}
+      </svg>
+    </button>
+  );
+}
diff --git a/src/components/trust-badges.tsx b/src/components/trust-badges.tsx
index 25f89e8..dd1a0f9 100644
--- a/src/components/trust-badges.tsx
+++ b/src/components/trust-badges.tsx
@@ -61,7 +61,7 @@ export function TrustBadges({ className = "" }: { className?: string }) {
         return (
           <li key={badge.label} className="flex items-center gap-2 text-xs text-ink/70">
             {badge.href ? (
-              <Link href={badge.href} className="flex items-center gap-2 hover:text-forest">
+              <Link href={badge.href} className="flex items-center gap-2 hover:text-heading">
                 {content}
               </Link>
             ) : (
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index b3d512e..e2d12e2 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -28,14 +28,14 @@ const fillBase =
   "bg-no-repeat bg-bottom bg-[length:100%_0%] hover:bg-[length:100%_100%] focus-visible:bg-[length:100%_100%] motion-reduce:transition-colors";
 
 const buttonStyles: Record<ButtonVariant, string> = {
-  primary: `${fillBase} bg-forest bg-[linear-gradient(var(--color-honey-dark),var(--color-honey-dark))] text-cream border border-forest hover:border-honey-dark`,
-  secondary: `${fillBase} bg-transparent bg-[linear-gradient(var(--color-forest),var(--color-forest))] text-forest border border-forest hover:text-cream focus-visible:text-cream`,
+  primary: `${fillBase} bg-forest bg-[linear-gradient(var(--color-honey-deep),var(--color-honey-deep))] text-cream border border-heading hover:border-honey-dark`,
+  secondary: `${fillBase} bg-transparent bg-[linear-gradient(var(--color-forest),var(--color-forest))] text-heading border border-heading hover:text-cream focus-visible:text-cream`,
   ghost: "bg-transparent text-ink border border-ink/20 hover:border-ink hover:bg-ink/[0.03]",
   // Fuer dunkle Flaechen (Hero, Waldgruen-Abschnitte, Menue): Creme-Rahmen,
   // fuellt sich mit Creme, Text wechselt auf Waldgruen.
   inverted: `${fillBase} bg-transparent bg-[linear-gradient(var(--color-cream),var(--color-cream))] text-cream border border-cream hover:text-forest focus-visible:text-forest`,
   // Hauptaktion auf dunklen Flaechen, wo Waldgruen im Grund verschwinden wuerde.
-  accent: `${fillBase} bg-honey-dark bg-[linear-gradient(var(--color-cream),var(--color-cream))] text-cream border border-honey-dark hover:text-forest hover:border-cream focus-visible:text-forest`,
+  accent: `${fillBase} bg-honey-deep bg-[linear-gradient(var(--color-cream),var(--color-cream))] text-cream border border-honey-dark hover:text-forest hover:border-cream focus-visible:text-forest`,
 };
 
 const buttonBase =
@@ -108,7 +108,7 @@ export function SectionHeading({
           Ueberschrift traegt den Abschnitt allein. */}
       <Heading
         className={`text-4xl md:text-5xl leading-[1.05] tracking-[-0.01em] ${
-          tone === "inverted" ? "text-cream" : "text-forest"
+          tone === "inverted" ? "text-cream" : "text-heading"
         }`}
       >
         {title}
diff --git a/src/i18n/dictionaries/de.ts b/src/i18n/dictionaries/de.ts
index 2b75d30..1b88794 100644
--- a/src/i18n/dictionaries/de.ts
+++ b/src/i18n/dictionaries/de.ts
@@ -20,6 +20,12 @@ export const de: Dictionary = {
     harvestsText: "Jede Ernte mit Datum, Standort und Charge, zurückverfolgbar bis ins Glas.",
     originText: "Wo unsere Bienenvölker stehen und was die Landschaft um Altenmünster prägt.",
   },
+  theme: {
+    light: "Hell",
+    dark: "Dunkel",
+    system: "Automatisch",
+    toggleLabel: (current, next) => `Darstellung: ${current}. Wechseln zu ${next}`,
+  },
   nav: {
     shop: "Shop",
     harvests: "Unsere Ernten",
diff --git a/src/i18n/dictionaries/en.ts b/src/i18n/dictionaries/en.ts
index 7ee27f2..d3624e5 100644
--- a/src/i18n/dictionaries/en.ts
+++ b/src/i18n/dictionaries/en.ts
@@ -20,6 +20,12 @@ export const en: Dictionary = {
     harvestsText: "Every harvest with date, location and batch, traceable down to the jar.",
     originText: "Where our colonies live and what shapes the landscape around Altenmünster.",
   },
+  theme: {
+    light: "Light",
+    dark: "Dark",
+    system: "Automatic",
+    toggleLabel: (current, next) => `Appearance: ${current}. Switch to ${next}`,
+  },
   nav: {
     shop: "Shop",
     harvests: "Our Harvests",
diff --git a/src/i18n/dictionary-type.ts b/src/i18n/dictionary-type.ts
index a2667a0..2c764c8 100644
--- a/src/i18n/dictionary-type.ts
+++ b/src/i18n/dictionary-type.ts
@@ -58,6 +58,12 @@ export interface Dictionary {
     harvestsText: string;
     originText: string;
   };
+  theme: {
+    light: string;
+    dark: string;
+    system: string;
+    toggleLabel: (current: string, next: string) => string;
+  };
   nav: {
     shop: string;
     harvests: string;
diff --git a/src/lib/theme.test.ts b/src/lib/theme.test.ts
new file mode 100644
index 0000000..5970fc8
--- /dev/null
+++ b/src/lib/theme.test.ts
@@ -0,0 +1,43 @@
+import { describe, test, expect } from "vitest";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { parseThemeChoice, nextThemeChoice } from "./theme";
+
+describe("parseThemeChoice", () => {
+  test("uebernimmt nur light und dark", () => {
+    expect(parseThemeChoice("light")).toBe("light");
+    expect(parseThemeChoice("dark")).toBe("dark");
+  });
+
+  test("faellt bei fehlendem oder fremdem Wert auf system zurueck", () => {
+    expect(parseThemeChoice(undefined)).toBe("system");
+    expect(parseThemeChoice("")).toBe("system");
+    expect(parseThemeChoice("dark; path=/")).toBe("system");
+    expect(parseThemeChoice("<script>")).toBe("system");
+  });
+});
+
+describe("nextThemeChoice", () => {
+  test("wechselt reihum Automatisch -> Hell -> Dunkel -> Automatisch", () => {
+    expect(nextThemeChoice("system")).toBe("light");
+    expect(nextThemeChoice("light")).toBe("dark");
+    expect(nextThemeChoice("dark")).toBe("system");
+  });
+});
+
+describe("Dunkelmodus-Tokens in globals.css", () => {
+  test("gewaehlter und automatischer Dunkelblock sind identisch", () => {
+    const css = readFileSync(path.join(process.cwd(), "src/app/globals.css"), "utf8");
+    const explicit = css.match(/:root\[data-theme="dark"\] \{([\s\S]*?)\n\}/)?.[1];
+    const system = css.match(/:root:not\(\[data-theme="light"\]\) \{([\s\S]*?)\n  \}/)?.[1];
+    expect(explicit).toBeTruthy();
+    expect(system).toBeTruthy();
+    const normalize = (block: string) =>
+      block
+        .split("\n")
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .join("\n");
+    expect(normalize(system!)).toBe(normalize(explicit!));
+  });
+});
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..b1bfe6d
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,21 @@
+/**
+ * Darstellung (hell/dunkel). "system" folgt der Einstellung des Geraets
+ * (prefers-color-scheme, siehe globals.css) und wird NICHT als Cookie
+ * gespeichert — nur eine ausdrueckliche Wahl landet im Cookie, damit der
+ * Server data-theme gleich richtig ausliefert und nichts hell aufblitzt.
+ */
+export type ThemeChoice = "light" | "dark" | "system";
+
+export const THEME_COOKIE = "theme";
+export const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
+const CYCLE: ThemeChoice[] = ["system", "light", "dark"];
+
+/** Cookie-Wert pruefen: alles ausser "light"/"dark" gilt als "system". */
+export function parseThemeChoice(value: string | undefined): ThemeChoice {
+  return value === "light" || value === "dark" ? value : "system";
+}
+
+export function nextThemeChoice(current: ThemeChoice): ThemeChoice {
+  return CYCLE[(CYCLE.indexOf(current) + 1) % CYCLE.length];
+}