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];
+}