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

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

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

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

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

src/app/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>

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}

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>

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>}>

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>

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>

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>

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>

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>

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

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">

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 />

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>

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>}>

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}>

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>

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

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,

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>

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

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"

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>
 

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} />

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">

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)}

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}

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>

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>

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>

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">

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

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"

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);
 }

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>

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} />

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>
             ))}

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>

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>
   );

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>

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>

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>
   );

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 ? (

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}

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 ? (

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}

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>

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}

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}

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>

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>

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>

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>

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} />

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"

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>