diff --git a/README.md b/README.md
index d42fa65..25f033e 100644
--- a/README.md
+++ b/README.md
@@ -167,6 +167,16 @@ Applied in `/cart` only (`/checkout` displays the already-applied result,
 no second input) — real server-side validation, not just a client-side
 check against Payload's public API, unlike most content on this site.
 
+- **No manual input field anymore** — the Rabattcode section on `/cart`
+  (`CartContent.tsx`) only renders at all when a code is actually applied;
+  there's no open "enter a code" box for every visitor (Nutzer-Entscheidung:
+  less visual noise, and codes are meant to be shared as marketing links,
+  not guessed/typed in). Instead, `?code=SAVE10` on the `/cart` URL
+  auto-applies once on arrival (a `useEffect` reading `useSearchParams()` —
+  requires `/cart`'s `page.tsx` to wrap `CartContent` in `<Suspense>`, a
+  Next.js requirement for any `useSearchParams()` consumer). A code that
+  arrives via the URL but turns out invalid/expired still shows an inline
+  error, just without an input box to attach it to.
 - **`app/lib/discountServer.ts`** (server-only, imported exclusively by the
   two route handlers below — never by a `"use client"` component, same
   reasoning as Live Preview's `next/headers` lesson above) talks to
@@ -217,11 +227,18 @@ check against Payload's public API, unlike most content on this site.
   written to `sessionStorage` for `/bestellbestaetigung` to read once, but
   its `orderNumber`/`orderDateIso` now come back from that Payload create
   call, not generated client-side.
-- Still not built: real payment processing (the checkout button is
-  labelled "zahlungspflichtig" but nothing captures a payment) and a
-  transactional confirmation email — see `project_backend_checkout_plan`
-  in the assistant's own memory for what's deliberately deferred to a
-  later stage.
+- **Order confirmation email** is sent from `/api/checkout/route.ts`
+  right after a successful `createOrder()` — fire-and-forget
+  (`app/lib/orderEmail.ts`'s `sendOrderConfirmationEmail()`), never blocks
+  or fails the checkout response itself; a send failure alerts admin
+  instead (`sendCriticalAlert`, lower severity than the "order not
+  persisted" alert, since the order itself is safe either way). Content
+  comes from the **published** `order-confirmation` row in Payload's
+  `email-templates` collection — see "Email templates & Live Preview"
+  below for how that's edited/previewed.
+- Still not built: real payment processing — the checkout button is
+  labelled "zahlungspflichtig" but nothing actually captures a payment
+  yet. See `project_backend_checkout_plan` in the assistant's own memory.
 
 ## Orders & customer accounts
 
@@ -246,15 +263,31 @@ without leaving the page.
   the current password via a real login attempt before changing it,
   doesn't just trust the caller), `cart` (GET/POST, see below),
   `verify-email`, `resend-verification`, `delete`, `export` (see "Email
-  verification" and "GDPR self-service" below), and
+  verification" and "GDPR self-service" below), `forgot-password`,
+  `reset-password` (see "Password reset" below), and
   `orders/[orderNumber]` (PATCH — cancel/return-request, see "Order
   cancellation & returns" below).
-- **`/konto/bestellungen`** lists a customer's own orders;
-  **`/konto/bestellungen/[orderNumber]`** shows one order's full detail
-  (items, address, totals, `status`). `status` (`received` → `processing`
-  → `shipped` → `delivered`, plus `cancelled`/`return_requested`/`returned`)
-  is maintained by hand in the Payload admin for the shipping states — no
-  shipping-carrier API integration.
+- **`/konto/bestellungen`** lists a customer's own orders (status shown as
+  a colored `OrderStatusBadge.tsx`, plus an "Abmelden" link —
+  `LogoutButton.tsx`); **`/konto/bestellungen/[orderNumber]`** shows one
+  order's full detail (items, address, totals, `status`). `status`
+  (`received` → `processing` → `shipped` → `delivered`, plus
+  `cancelled`/`return_requested`/`returned`) is maintained by hand in the
+  Payload admin for the shipping states — no shipping-carrier API
+  integration.
+- **`Navbar.tsx`'s `AccountLink`** (account icon, desktop; "Anmelden"/"Mein
+  Konto" text link, mobile drawer) is the only *always*-reachable way into
+  `/konto/*` — added after discovering there previously wasn't one:
+  `/checkout`'s own login toggle only renders once the cart already has
+  items (its empty-cart state is an early return with no such toggle), and
+  `/bestellbestaetigung`'s "Meine Bestellungen ansehen" link only exists
+  after a completed order. A returning customer with an empty cart and no
+  recent order had no way to reach the login page at all before this.
+  Fetches auth state client-side via `/api/account/me` (not through the
+  server-rendered root layout) specifically so `app/layout.tsx` — otherwise
+  static/ISR-cacheable — doesn't get forced into per-request dynamic
+  rendering just to know one icon's href; briefly shows the logged-out
+  state on first paint until that fetch resolves.
 - **`/konto/profil`** edits name + the one saved default address (deliberately
   a single address, not a full address book — see the assistant's memory
   note on optionally expanding this later), changes the password, shows
@@ -316,6 +349,60 @@ a resend link when `!profile.emailVerified`; resending
 instead (`app/lib/alertAdmin.ts`'s `sendVerificationEmail()` — same
 Hostinger SMTP, no Payload hook to piggyback on for a plain field update).
 
+### Password reset
+
+Unlike email verification, this needed no custom flag — `forgotPassword`
+doesn't block login, so it's Payload's built-in flow as-is (see the
+Payload README's `customers.auth.forgotPassword` section), just with the
+email content/destination swapped so the link points here instead of the
+Payload admin. `/konto/passwort-vergessen` (`ForgotPasswordForm.tsx`) →
+`POST /api/account/forgot-password` → always responds `{ok:true}`
+regardless of whether the email exists (same anti-enumeration reasoning as
+Payload's own operation — the route must not leak a different response
+shape for "no such account", see its own comment). `/konto/passwort-zuruecksetzen?token=...`
+(`ResetPasswordForm.tsx`, token read server-side from `searchParams` —
+avoids needing a `<Suspense>` boundary, unlike the `?code=` cart case
+above which genuinely needs client-side `useSearchParams()`) →
+`POST /api/account/reset-password` → Payload logs the customer in on a
+successful reset (returns the same `{token, user}` shape as login), so the
+session cookie is set immediately, no separate login step. `LoginForm.tsx`
+links to `/konto/passwort-vergessen`.
+
+### Email templates & Live Preview
+
+Both transactional emails (order confirmation, password reset) read their
+subject/heading/body/footer wording from Payload's `email-templates`
+collection — editable in the admin without a deploy, with a Live Preview
+button using the exact same mechanism as Posts/LegalPages/Testimonials
+(`useLivePreview()` from `@payloadcms/live-preview-react`, already a
+dependency here for `LivePostContent.tsx`).
+
+- **`app/lib/emailTemplates.ts`** — pure string-building functions
+  (`renderOrderConfirmationHtml()`, `renderPasswordResetHtml()`), no
+  server-only or client-only imports. Used **both** server-side for the
+  real send (`orderEmail.ts`) **and** client-side for the Live Preview
+  page — same function, same inputs, so a Live Preview edit and the real
+  sent email are guaranteed to render identically for order-confirmation
+  (password-reset's actual send uses Payload's own simple inline template
+  instead — see that repo's README for why — so its Live Preview
+  approximates rather than pixel-matches). Inline-styled HTML (`<table>`
+  layout, `style` attributes, no Tailwind/`<style>` block) — most email
+  clients strip external/embedded CSS.
+- **`/email-preview/[type]/page.tsx`** — entered exclusively from Payload's
+  admin iframe (`EmailTemplates.ts`'s `admin.livePreview.url`), never a
+  real visitor destination (`noindex`). Always reads with `draft: true` so
+  an unsaved admin edit shows immediately. Renders against **sample data**
+  (`SAMPLE_ORDER` in `emailTemplates.ts`) — unlike the other three Live
+  Preview targets, there's no "current" real order/reset-link to preview
+  against generically.
+- The *real* send always reads the **published** template
+  (`getEmailTemplate()` in `app/lib/payload.ts`, `draft` unset) — a Live
+  Preview edit never affects a live customer email until actually saved.
+- `npx payload run src/seed-email-templates.ts` (Payload repo) seeds
+  sensible defaults for both rows; `sendOrderConfirmationEmail()` also has
+  a hardcoded fallback for the rare case a fresh install's order arrives
+  before that seed has run.
+
 ### GDPR self-service
 
 `/konto/profil`'s "Konto & Daten" section:
diff --git a/app/api/account/forgot-password/route.ts b/app/api/account/forgot-password/route.ts
new file mode 100644
index 0000000..0775892
--- /dev/null
+++ b/app/api/account/forgot-password/route.ts
@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+import { requestPasswordReset } from "../../../lib/customerAuth";
+import { checkRateLimit, getClientIp } from "../../../lib/rateLimit";
+
+// Always responds the same way regardless of whether the email exists —
+// see requestPasswordReset()'s own comment. Rate-limited a bit tighter
+// than login/register (5/15min) since there's no secondary defense here
+// the way Payload's own per-account lockout backs up the login route.
+export async function POST(request: Request) {
+  if (!checkRateLimit(`forgot-password:${getClientIp(request)}`, { limit: 5, windowMs: 15 * 60 * 1000 })) {
+    return NextResponse.json({ ok: true });
+  }
+
+  const body = await request.json().catch(() => null);
+  const email = typeof body?.email === "string" ? body.email : "";
+  if (email) await requestPasswordReset(email);
+
+  return NextResponse.json({ ok: true });
+}
diff --git a/app/api/account/reset-password/route.ts b/app/api/account/reset-password/route.ts
new file mode 100644
index 0000000..e1080ca
--- /dev/null
+++ b/app/api/account/reset-password/route.ts
@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+import { resetPassword, setSessionCookie } from "../../../lib/customerAuth";
+import { checkRateLimit, getClientIp } from "../../../lib/rateLimit";
+
+export async function POST(request: Request) {
+  if (!checkRateLimit(`reset-password:${getClientIp(request)}`, { limit: 5, windowMs: 15 * 60 * 1000 })) {
+    return NextResponse.json({ ok: false, reason: "Zu viele Versuche. Bitte in ein paar Minuten erneut probieren." }, { status: 429 });
+  }
+
+  const body = await request.json().catch(() => null);
+  const token = typeof body?.token === "string" ? body.token : "";
+  const password = typeof body?.password === "string" ? body.password : "";
+  if (!token || !password || password.length < 8) {
+    return NextResponse.json({ ok: false, reason: "Bitte ein neues Passwort (mind. 8 Zeichen) angeben." }, { status: 400 });
+  }
+
+  const result = await resetPassword(token, password);
+  if (!result.ok) return NextResponse.json(result, { status: 400 });
+
+  await setSessionCookie(result.token);
+  return NextResponse.json({ ok: true, customer: result.customer });
+}
diff --git a/app/api/checkout/route.ts b/app/api/checkout/route.ts
index f38fb7c..15dbe5a 100644
--- a/app/api/checkout/route.ts
+++ b/app/api/checkout/route.ts
@@ -6,6 +6,7 @@ import { createOrder } from "../../lib/orderServer";
 import { getSessionCustomer, registerCustomer, setSessionCookie, type CustomerSummary } from "../../lib/customerAuth";
 import { fetchProductsBySlug } from "../../lib/productsServer";
 import { sendCriticalAlert } from "../../lib/alertAdmin";
+import { sendOrderConfirmationEmail } from "../../lib/orderEmail";
 
 type CheckoutBody = {
   cart: CartItem[];
@@ -154,6 +155,31 @@ export async function POST(request: Request) {
     return NextResponse.json({ ok: false, reason: "Bestellung konnte nicht gespeichert werden." }, { status: 500 });
   }
 
+  // Fire-and-forget — a failed confirmation email must never undo an
+  // already-successful order or block the response the customer is
+  // waiting on. Lower severity than the "order lost" alert above (the
+  // order itself is safe either way), but still worth knowing about, since
+  // it's the one thing that would otherwise fail completely silently.
+  sendOrderConfirmationEmail(
+    {
+      orderNumber: order.orderNumber,
+      createdAt: order.createdAt,
+      items: items.map((i) => ({ productName: i.productName, quantity: i.quantity, unitPrice: i.unitPrice })),
+      subtotal,
+      shippingCost,
+      discountAmount,
+      discountCode: body.discountCode || null,
+      total,
+    },
+    body.email,
+  ).catch((err) => {
+    sendCriticalAlert("Bestätigungs-Mail konnte nicht gesendet werden", {
+      orderNumber: order.orderNumber,
+      customerEmail: body.email,
+      error: String(err),
+    });
+  });
+
   return NextResponse.json({
     ok: true,
     orderNumber: order.orderNumber,
diff --git a/app/cart/components/CartContent.tsx b/app/cart/components/CartContent.tsx
index dddd8bd..6581360 100644
--- a/app/cart/components/CartContent.tsx
+++ b/app/cart/components/CartContent.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
 import { useCart, removeFromCart, setQuantity } from "../../lib/cart";
@@ -38,9 +39,9 @@ export function CartContent({
   const cart = useCart();
   const products = useProducts();
   const discount = useDiscount();
-  const [discountInput, setDiscountInput] = useState("");
   const [discountError, setDiscountError] = useState<string | null>(null);
   const [discountLoading, setDiscountLoading] = useState(false);
+  const searchParams = useSearchParams();
   // While the /api/products fetch is still pending, treat a non-empty
   // cart as "loading" rather than "empty" — the old hardcoded PRODUCTS
   // lookup was synchronous, so this distinction didn't exist before;
@@ -59,8 +60,7 @@ export function CartContent({
       : shippingCost;
   const { totalSavings, discountAmount, total } = computeCartTotals(items, shipping, discount);
 
-  async function handleApplyDiscount() {
-    const code = discountInput.trim();
+  async function handleApplyDiscount(code: string) {
     if (!code) return;
     setDiscountLoading(true);
     setDiscountError(null);
@@ -73,7 +73,6 @@ export function CartContent({
       const data = await res.json();
       if (data.valid) {
         applyDiscount({ code: code.toUpperCase(), type: data.type, value: data.value });
-        setDiscountInput("");
       } else {
         setDiscountError(data.reason || "Dieser Code ist ungültig.");
       }
@@ -84,6 +83,20 @@ export function CartContent({
     }
   }
 
+  // No manual input field anymore (see the Rabattcode section below) —
+  // codes are shared as a direct link instead (e.g. "/cart?code=SAVE10"),
+  // auto-applied once on arrival. Only fires while nothing's applied yet
+  // and there's actually something in the cart to validate a minimum-order
+  // value against.
+  useEffect(() => {
+    const code = searchParams.get("code");
+    if (code && !discount && items.length > 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time sync from the URL's ?code= param to app state on arrival, via an async server validation call, not a render-cascade
+      handleApplyDiscount(code);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only ever re-run when the cart finishes loading or the URL's code param itself changes, not on every discount/handleApplyDiscount identity change
+  }, [searchParams, items.length]);
+
   return (
     <>
       {/* Page header */}
@@ -233,10 +246,15 @@ export function CartContent({
                 </div>
               )}
 
-              {/* Rabattcode — cart-only, /checkout only displays the
-                  already-applied result (see lib/discount.ts, shared via
+              {/* Rabattcode — no manual input anymore (Nutzer-Entscheidung:
+                  kein offenes Eingabefeld für jede:n Besucher:in), nur noch
+                  sichtbar wenn tatsächlich ein Code aktiv ist. Codes kommen
+                  jetzt ausschließlich über einen Link mit vorausgefülltem
+                  Code (siehe die useEffect oben), nicht mehr durch manuelle
+                  Eingabe hier. /checkout zeigt weiterhin nur das bereits
+                  angewendete Ergebnis (see lib/discount.ts, shared via
                   localStorage the same way the cart itself is). */}
-              {discount ? (
+              {discount && (
                 <div className="flex flex-col gap-2 w-full">
                   <div className="flex items-center w-full">
                     <span className="text-body-sm text-success">Rabattcode ({discount.code})</span>
@@ -251,30 +269,12 @@ export function CartContent({
                     Entfernen
                   </button>
                 </div>
-              ) : (
-                <div className="flex flex-col gap-2 w-full">
-                  <div className="flex gap-2 w-full">
-                    <label className="sr-only" htmlFor="discount-code">Rabattcode</label>
-                    <input
-                      id="discount-code"
-                      type="text"
-                      value={discountInput}
-                      onChange={(e) => setDiscountInput(e.target.value)}
-                      placeholder="Rabattcode"
-                      className="flex-1 min-w-0 border border-border rounded-sm px-3.5 py-2 text-body-sm text-text-primary outline-none focus:border-brand transition-colors"
-                    />
-                    <button
-                      type="button"
-                      onClick={handleApplyDiscount}
-                      disabled={discountLoading || !discountInput.trim()}
-                      className="shrink-0 px-4 py-2 rounded-sm border border-border text-body-sm font-bold text-text-primary hover:border-brand hover:text-brand disabled:opacity-50 disabled:hover:border-border disabled:hover:text-text-primary transition-colors"
-                    >
-                      {discountLoading ? "…" : "Anwenden"}
-                    </button>
-                  </div>
-                  {discountError && <p className="text-label text-red-600">{discountError}</p>}
-                </div>
               )}
+              {/* Feedback for a code that arrived via URL (?code=...) but
+                  turned out invalid/expired — surfaced even though there's
+                  no input field to attach it to anymore. */}
+              {!discount && discountError && <p className="text-label text-red-600 w-full">{discountError}</p>}
+              {!discount && discountLoading && <p className="text-label text-text-muted w-full">Rabattcode wird geprüft…</p>}
 
               <div className="flex flex-col gap-0.5 w-full">
                 <div className="flex items-center w-full">
diff --git a/app/cart/page.tsx b/app/cart/page.tsx
index 4f26604..85c4973 100644
--- a/app/cart/page.tsx
+++ b/app/cart/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import { CartContent } from "./components/CartContent";
 import { RelatedProducts } from "./components/RelatedProducts";
 import { TrustRow } from "../components/TrustRow";
@@ -38,12 +39,20 @@ export default async function CartPage() {
   return (
     <>
       <main className="flex flex-col flex-1 bg-bg-base">
-        <CartContent
-          trustBadges={trustBadges}
-          shippingCost={defaultShipping?.price ?? 0}
-          freeShippingThreshold={freeShippingThreshold}
-          shippingSettings={shipping}
-        />
+        {/* Suspense required — CartContent uses useSearchParams() (?code=
+            auto-apply, see its own comment) which opts any consumer into
+            client-side rendering unless wrapped. fallback={null}: the cart
+            itself is entirely client-rendered from localStorage anyway
+            (see CartContent's own productsLoading handling), so there's no
+            meaningful server-rendered content this would flash away from. */}
+        <Suspense fallback={null}>
+          <CartContent
+            trustBadges={trustBadges}
+            shippingCost={defaultShipping?.price ?? 0}
+            freeShippingThreshold={freeShippingThreshold}
+            shippingSettings={shipping}
+          />
+        </Suspense>
         <RelatedProducts />
         <TrustRow />
       </main>
diff --git a/app/checkout/components/CheckoutContent.tsx b/app/checkout/components/CheckoutContent.tsx
index 865e616..350af7d 100644
--- a/app/checkout/components/CheckoutContent.tsx
+++ b/app/checkout/components/CheckoutContent.tsx
@@ -311,16 +311,22 @@ export function CheckoutContent({
             {/* Only needed for the inline-registration path — an existing
                 session already has an account, no password to collect. */}
             {!customerEmail && (
-              <FormField
-                label="Passwort (für dein neues Konto)"
-                name="password"
-                type="password"
-                placeholder="Mind. 8 Zeichen"
-                autoComplete="new-password"
-                required
-                minLength={8}
-                wrapperClassName="w-full sm:w-[calc(50%-0.5rem)] sm:flex-none min-w-0"
-              />
+              <div className="flex flex-col gap-2 w-full sm:w-[calc(50%-0.5rem)] sm:flex-none min-w-0">
+                <FormField
+                  label="Passwort (für dein neues Konto)"
+                  name="password"
+                  type="password"
+                  placeholder="Mind. 8 Zeichen"
+                  autoComplete="new-password"
+                  required
+                  minLength={8}
+                  wrapperClassName="w-full"
+                />
+                <p className="text-label text-text-muted">
+                  Mit dem Kauf legen wir automatisch ein Konto für dich an — damit du deine Bestellungen später
+                  einsehen und bei Bedarf stornieren oder zurücksenden kannst.
+                </p>
+              </div>
             )}
             {/* Segmented control, same sm:w-[calc(50%-0.5rem)] half-row
                 width as the field(s) below it — Lieferadresse keeps
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 7458d29..b1ff2b4 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -71,6 +71,53 @@ function isNavLinkActive(href: string, pathname: string, activeSection: string):
   return pathname === href || pathname.startsWith(`${href}/`);
 }
 
+// Account icon — no Figma source exists for this yet (added outside the
+// normal Figma-first workflow, see the assistant's own project notes on
+// why: without it there was no reachable way to log in at all once the
+// cart was empty and no recent order existed — /checkout's own login
+// toggle never even renders in that state, see CheckoutContent.tsx's
+// early "Warenkorb ist leer" return). Fetches auth state client-side via
+// /api/account/me rather than through the server-rendered layout — this
+// component's parent (app/layout.tsx) is otherwise static/ISR-cacheable,
+// and reading the session cookie there (next/headers' cookies()) would
+// force the entire site into per-request dynamic rendering just for this.
+// `loggedIn === null` is the brief "not checked yet" state on first paint.
+function AccountLink({ variant }: { variant: "icon" | "mobile" }) {
+  const [loggedIn, setLoggedIn] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    fetch("/api/account/me")
+      .then((res) => setLoggedIn(res.ok))
+      .catch(() => setLoggedIn(false));
+  }, []);
+
+  const href = loggedIn ? "/konto/bestellungen" : "/konto/login";
+
+  if (variant === "mobile") {
+    return (
+      <Link
+        href={href}
+        className="min-h-11 flex items-center justify-center px-6 py-4 rounded-sm border border-[#868686] text-h4 font-bold text-text-primary hover:border-brand hover:text-brand active:scale-[0.97] transition-all"
+      >
+        {loggedIn ? "Mein Konto" : "Anmelden"}
+      </Link>
+    );
+  }
+
+  return (
+    <Link
+      href={href}
+      aria-label={loggedIn ? "Mein Konto" : "Anmelden"}
+      className="relative flex h-11 w-11 items-center justify-center shrink-0 active:scale-[0.9] transition-transform"
+    >
+      <svg viewBox="0 0 24 24" className="h-6 w-6 text-text-primary" fill="none" aria-hidden="true">
+        <circle cx="12" cy="8" r="3.6" stroke="currentColor" strokeWidth="1.8" />
+        <path d="M4.5 20c1.2-4 4-6 7.5-6s6.3 2 7.5 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      </svg>
+    </Link>
+  );
+}
+
 // Cart icon + count badge — traced from the Figma Navbar/Default component's
 // btn-cart (icon-cart 32x30 + cart-count-badge, node 4849:24). Visible at
 // every breakpoint tier (unlike the nav links / CTA buttons, which move into
@@ -390,6 +437,7 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean }
               (below lg). Grouped so spacing stays consistent as individual
               children hide/show across the three breakpoint tiers. */}
           <div className="flex items-center gap-2">
+            <AccountLink variant="icon" />
             <CartLink />
 
             {/* CTA buttons — inline from md (768px) up, i.e. through both
@@ -519,6 +567,9 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean }
           >
             7-Tage-Challenge
           </Link>
+          <div onClick={closeMobile}>
+            <AccountLink variant="mobile" />
+          </div>
         </div>
       </div>
     </header>
diff --git a/app/email-preview/[type]/components/LiveEmailPreviewClient.tsx b/app/email-preview/[type]/components/LiveEmailPreviewClient.tsx
new file mode 100644
index 0000000..b05834a
--- /dev/null
+++ b/app/email-preview/[type]/components/LiveEmailPreviewClient.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useLivePreview } from "@payloadcms/live-preview-react";
+import {
+  renderOrderConfirmationHtml,
+  renderPasswordResetHtml,
+  SAMPLE_ORDER,
+  type EmailTemplateContent,
+} from "../../../lib/emailTemplates";
+import type { EmailTemplateType } from "../../../lib/payload";
+
+const PAYLOAD_URL = process.env.NEXT_PUBLIC_PAYLOAD_URL || "https://payload.mk360.de";
+
+// Same useLivePreview() mechanism as LivePostContent.tsx (blog) — connects
+// to the Payload admin's iframe via postMessage and updates `data` as the
+// admin edits fields, no save required. Renders through the exact same
+// renderOrderConfirmationHtml/renderPasswordResetHtml functions that build
+// the real sent email (app/lib/orderEmail.ts, Customers.ts's forgotPassword
+// hook on the Payload side uses its own simple template instead — see that
+// hook's own comment on why the two aren't pixel-identical for
+// password-reset specifically) — order-confirmation previews exactly.
+export function LiveEmailPreviewClient({
+  type,
+  initialTemplate,
+}: {
+  type: EmailTemplateType;
+  initialTemplate: EmailTemplateContent;
+}) {
+  const { data } = useLivePreview<EmailTemplateContent>({
+    initialData: initialTemplate,
+    serverURL: PAYLOAD_URL,
+    depth: 0,
+  });
+
+  const html =
+    type === "order-confirmation"
+      ? renderOrderConfirmationHtml(data, SAMPLE_ORDER)
+      : renderPasswordResetHtml(data, "https://einfach-produktiv.mk360.de/konto/passwort-zuruecksetzen?token=beispiel-token");
+
+  return (
+    <div style={{ background: "#f4f2ee", minHeight: "100vh", padding: "32px 0" }}>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+}
diff --git a/app/email-preview/[type]/page.tsx b/app/email-preview/[type]/page.tsx
new file mode 100644
index 0000000..200ee89
--- /dev/null
+++ b/app/email-preview/[type]/page.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { draftMode } from "next/headers";
+import { getEmailTemplate, type EmailTemplateType } from "../../lib/payload";
+import { LiveEmailPreviewClient } from "./components/LiveEmailPreviewClient";
+
+export const metadata: Metadata = {
+  title: "E-Mail-Vorschau",
+  robots: { index: false, follow: false },
+};
+
+const VALID_TYPES: EmailTemplateType[] = ["order-confirmation", "password-reset"];
+
+// Entered exclusively via EmailTemplates.ts's admin.livePreview.url (a
+// Payload-admin-only iframe target, see buildPreviewUrl()/api/preview) —
+// not a page a real visitor would ever land on. Always reads with
+// draft:true so an unsaved edit in the admin shows up here immediately;
+// the actual sent email (orderEmail.ts) always reads the published version
+// instead.
+export default async function EmailPreviewPage({ params }: { params: Promise<{ type: string }> }) {
+  const { type } = await params;
+  if (!VALID_TYPES.includes(type as EmailTemplateType)) notFound();
+  const emailType = type as EmailTemplateType;
+
+  await draftMode();
+  const template = (await getEmailTemplate(emailType, { draft: true })) ?? {
+    type: emailType,
+    subject: "",
+    heading: emailType === "order-confirmation" ? "Vielen Dank für deine Bestellung!" : "Passwort zurücksetzen",
+    bodyText: "Noch kein Inhalt gespeichert — im Payload-Admin unter E-Mail-Vorlagen anlegen.",
+    footerText: null,
+  };
+
+  return <LiveEmailPreviewClient type={emailType} initialTemplate={template} />;
+}
diff --git a/app/konto/bestellungen/[orderNumber]/page.tsx b/app/konto/bestellungen/[orderNumber]/page.tsx
index d618517..1f8ada4 100644
--- a/app/konto/bestellungen/[orderNumber]/page.tsx
+++ b/app/konto/bestellungen/[orderNumber]/page.tsx
@@ -4,8 +4,9 @@ import Link from "next/link";
 import { Reveal } from "../../../components/Reveal";
 import { Footer } from "../../../components/Footer";
 import { formatPrice, formatDate } from "../../../lib/format";
-import { getSessionCustomer, getCustomerOrderDetail, ORDER_STATUS_LABEL, customerOrderAction } from "../../../lib/customerAuth";
+import { getSessionCustomer, getCustomerOrderDetail, customerOrderAction } from "../../../lib/customerAuth";
 import { OrderActionButton } from "./components/OrderActionButton";
+import { OrderStatusBadge } from "../../components/OrderStatusBadge";
 
 export const metadata: Metadata = {
   title: "Bestelldetails",
@@ -45,7 +46,7 @@ export default async function KontoBestellungDetailPage({ params }: { params: Pr
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-label text-text-muted">Status</p>
-              <p className="text-body-sm text-text-primary">{ORDER_STATUS_LABEL[order.status] ?? order.status}</p>
+              <OrderStatusBadge status={order.status} />
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-label text-text-muted">Zahlungsart</p>
diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index 6c09aad..6bc41dc 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -4,7 +4,9 @@ import Link from "next/link";
 import { Reveal } from "../../components/Reveal";
 import { Footer } from "../../components/Footer";
 import { formatPrice, formatDate } from "../../lib/format";
-import { getSessionCustomer, getCustomerOrders, ORDER_STATUS_LABEL } from "../../lib/customerAuth";
+import { getSessionCustomer, getCustomerOrders } from "../../lib/customerAuth";
+import { OrderStatusBadge } from "../components/OrderStatusBadge";
+import { LogoutButton } from "../components/LogoutButton";
 
 // robots: noindex — account area, same reasoning as /checkout.
 export const metadata: Metadata = {
@@ -57,7 +59,7 @@ export default async function KontoBestellungenPage() {
                   </div>
                   <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Status</p>
-                    <p className="text-body-sm text-text-primary">{ORDER_STATUS_LABEL[order.status] ?? order.status}</p>
+                    <OrderStatusBadge status={order.status} />
                   </div>
                   <div className="flex flex-col gap-1 ml-auto">
                     <p className="text-label text-text-muted">Gesamtbetrag</p>
@@ -75,6 +77,7 @@ export default async function KontoBestellungenPage() {
             <Link href="/shop" className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
               Weiter einkaufen
             </Link>
+            <LogoutButton />
           </div>
         </Reveal>
       </main>
diff --git a/app/konto/components/LogoutButton.tsx b/app/konto/components/LogoutButton.tsx
new file mode 100644
index 0000000..8283450
--- /dev/null
+++ b/app/konto/components/LogoutButton.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export function LogoutButton() {
+  const router = useRouter();
+
+  async function handleLogout() {
+    await fetch("/api/account/logout", { method: "POST" });
+    router.push("/");
+    router.refresh();
+  }
+
+  return (
+    <button type="button" onClick={handleLogout} className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
+      Abmelden
+    </button>
+  );
+}
diff --git a/app/konto/components/OrderStatusBadge.tsx b/app/konto/components/OrderStatusBadge.tsx
new file mode 100644
index 0000000..a77a55a
--- /dev/null
+++ b/app/konto/components/OrderStatusBadge.tsx
@@ -0,0 +1,28 @@
+import { ORDER_STATUS_LABEL } from "../../lib/customerAuth";
+
+// Colors are a rough "how good is this news" scale — neutral while
+// in-progress, success once actually delivered, warm/red for anything
+// that means the order didn't complete as planned. Reuses existing tokens
+// where they exist (--color-brand, --color-success/-subtle); cancelled/
+// return_requested borrow plain Tailwind red/orange since this codebase
+// has no custom tokens for those (same reasoning as the existing
+// text-red-600 error-text convention elsewhere).
+const STYLES: Record<string, string> = {
+  received: "bg-bg-muted text-text-muted",
+  processing: "bg-brand/10 text-brand",
+  shipped: "bg-brand/10 text-brand",
+  delivered: "bg-success-subtle text-success",
+  cancelled: "bg-red-50 text-red-600",
+  return_requested: "bg-orange-50 text-orange-600",
+  returned: "bg-bg-muted text-text-light",
+};
+
+export function OrderStatusBadge({ status }: { status: string }) {
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[status] ?? "bg-bg-muted text-text-muted"}`}
+    >
+      {ORDER_STATUS_LABEL[status] ?? status}
+    </span>
+  );
+}
diff --git a/app/konto/login/components/LoginForm.tsx b/app/konto/login/components/LoginForm.tsx
index a7367fe..6450446 100644
--- a/app/konto/login/components/LoginForm.tsx
+++ b/app/konto/login/components/LoginForm.tsx
@@ -75,6 +75,9 @@ export function LoginForm() {
           {loading ? "Einen Moment…" : "Einloggen"}
         </button>
       </form>
+      <Link href="/konto/passwort-vergessen" className="text-body-sm text-text-muted underline hover:text-brand transition-colors">
+        Passwort vergessen?
+      </Link>
       <p className="text-body-sm text-text-muted">
         Noch kein Konto? Einfach beim{" "}
         <Link href="/checkout" className="underline hover:text-brand transition-colors">
diff --git a/app/konto/passwort-vergessen/components/ForgotPasswordForm.tsx b/app/konto/passwort-vergessen/components/ForgotPasswordForm.tsx
new file mode 100644
index 0000000..860763d
--- /dev/null
+++ b/app/konto/passwort-vergessen/components/ForgotPasswordForm.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { Reveal } from "../../../components/Reveal";
+
+export function ForgotPasswordForm() {
+  const [email, setEmail] = useState("");
+  const [sent, setSent] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await fetch("/api/account/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+    } catch {
+      // Same "always show success" reasoning as the route itself — a
+      // network hiccup here shouldn't reveal anything either.
+    }
+    setSent(true);
+    setLoading(false);
+  }
+
+  if (sent) {
+    return (
+      <Reveal className="flex flex-col gap-4 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+        <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+          E-Mail unterwegs
+        </p>
+        <p className="text-body text-text-muted">
+          Falls zu <strong>{email}</strong> ein Konto existiert, haben wir dir eine E-Mail mit einem Link zum
+          Zurücksetzen deines Passworts geschickt.
+        </p>
+      </Reveal>
+    );
+  }
+
+  return (
+    <Reveal className="flex flex-col gap-6 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+      <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+        Passwort vergessen
+      </p>
+      <p className="text-body text-text-muted">
+        Gib deine E-Mail-Adresse ein — wir schicken dir einen Link, mit dem du ein neues Passwort vergeben kannst.
+      </p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start w-full">
+        <label className="flex flex-col gap-2 items-start w-full">
+          <span className="text-label text-text-muted">E-Mail-Adresse</span>
+          <input
+            type="email"
+            required
+            autoComplete="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors"
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={loading}
+          className={`w-full flex items-center justify-center py-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary ${loading ? "opacity-70 pointer-events-none" : ""}`}
+        >
+          {loading ? "Einen Moment…" : "Link anfordern"}
+        </button>
+      </form>
+    </Reveal>
+  );
+}
diff --git a/app/konto/passwort-vergessen/page.tsx b/app/konto/passwort-vergessen/page.tsx
new file mode 100644
index 0000000..14e0e46
--- /dev/null
+++ b/app/konto/passwort-vergessen/page.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import { ForgotPasswordForm } from "./components/ForgotPasswordForm";
+import { Footer } from "../../components/Footer";
+
+export const metadata: Metadata = {
+  title: "Passwort vergessen",
+  robots: { index: false, follow: true },
+};
+
+export default function PasswortVergessenPage() {
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-bg-base">
+        <ForgotPasswordForm />
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/konto/passwort-zuruecksetzen/components/ResetPasswordForm.tsx b/app/konto/passwort-zuruecksetzen/components/ResetPasswordForm.tsx
new file mode 100644
index 0000000..afe2fa7
--- /dev/null
+++ b/app/konto/passwort-zuruecksetzen/components/ResetPasswordForm.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Reveal } from "../../../components/Reveal";
+
+export function ResetPasswordForm({ token }: { token: string | null }) {
+  const router = useRouter();
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!token) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/account/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, password }),
+      });
+      const data = await res.json();
+      if (!data.ok) {
+        setError(data.reason || "Passwort konnte nicht zurückgesetzt werden.");
+        setLoading(false);
+        return;
+      }
+      router.push("/konto/bestellungen");
+      router.refresh();
+    } catch {
+      setError("Passwort konnte gerade nicht zurückgesetzt werden.");
+      setLoading(false);
+    }
+  }
+
+  if (!token) {
+    return (
+      <Reveal className="flex flex-col gap-4 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+        <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+          Link ungültig
+        </p>
+        <p className="text-body text-text-muted">
+          Dieser Link zum Zurücksetzen des Passworts ist ungültig oder abgelaufen. Fordere gerne einen neuen an.
+        </p>
+      </Reveal>
+    );
+  }
+
+  return (
+    <Reveal className="flex flex-col gap-6 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+      <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+        Neues Passwort vergeben
+      </p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start w-full">
+        <label className="flex flex-col gap-2 items-start w-full">
+          <span className="text-label text-text-muted">Neues Passwort</span>
+          <input
+            type="password"
+            required
+            minLength={8}
+            autoComplete="new-password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors"
+          />
+        </label>
+        {error && <p className="text-label text-red-600">{error}</p>}
+        <button
+          type="submit"
+          disabled={loading}
+          className={`w-full flex items-center justify-center py-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary ${loading ? "opacity-70 pointer-events-none" : ""}`}
+        >
+          {loading ? "Einen Moment…" : "Passwort speichern"}
+        </button>
+      </form>
+    </Reveal>
+  );
+}
diff --git a/app/konto/passwort-zuruecksetzen/page.tsx b/app/konto/passwort-zuruecksetzen/page.tsx
new file mode 100644
index 0000000..7d1cad1
--- /dev/null
+++ b/app/konto/passwort-zuruecksetzen/page.tsx
@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { ResetPasswordForm } from "./components/ResetPasswordForm";
+import { Footer } from "../../components/Footer";
+
+export const metadata: Metadata = {
+  title: "Passwort zurücksetzen",
+  robots: { index: false, follow: true },
+};
+
+// token read server-side from searchParams (not the client-side
+// useSearchParams() hook) — avoids needing a Suspense boundary here, same
+// reasoning as /konto/profil's ?verified= handling.
+export default async function PasswortZuruecksetzenPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string }>;
+}) {
+  const { token } = await searchParams;
+
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-bg-base">
+        <ResetPasswordForm token={token ?? null} />
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/konto/profil/page.tsx b/app/konto/profil/page.tsx
index 7804d12..ce8e1da 100644
--- a/app/konto/profil/page.tsx
+++ b/app/konto/profil/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 import { Footer } from "../../components/Footer";
 import { getSessionCustomer, getCustomerProfile } from "../../lib/customerAuth";
 import { ProfileForm } from "./components/ProfileForm";
@@ -29,6 +30,9 @@ export default async function KontoProfilPage({
     <>
       <main className="flex flex-col flex-1 bg-bg-base">
         <div className="flex flex-col gap-10 items-start pt-10 pb-16 px-[var(--layout-padding-x)] w-full max-w-[40rem] mx-auto">
+          <Link href="/konto/bestellungen" className="text-body-sm text-text-muted hover:text-brand transition-colors">
+            ← Meine Bestellungen
+          </Link>
           <VerificationBanner emailVerified={profile.emailVerified} justVerified={verified === "1" || verified === "0" ? verified : undefined} />
           <ProfileForm profile={profile} />
           <PasswordForm email={profile.email} />
diff --git a/app/lib/alertAdmin.ts b/app/lib/alertAdmin.ts
index eb4d39e..b23efbe 100644
--- a/app/lib/alertAdmin.ts
+++ b/app/lib/alertAdmin.ts
@@ -1,21 +1,4 @@
-import nodemailer from "nodemailer";
-
-// Server-only. Deliberately its own SMTP transport, independent of
-// Payload's (which now also sends mail — see Customers.ts's verification
-// email) — the whole point of this module is alerting when something is
-// broken, and if Payload itself is what's broken, routing the alert
-// through it could mean the alert never arrives. Same Hostinger account
-// either way (already proven working via Diun's update notifications),
-// just a second, separate connection to it.
-const transport = nodemailer.createTransport({
-  host: "smtp.hostinger.com",
-  port: 587,
-  secure: false,
-  auth: {
-    user: process.env.SMTP_USER || "",
-    pass: process.env.SMTP_PASSWORD || "",
-  },
-});
+import { transport } from "./mailer";
 
 // Fire-and-forget by design — callers should not await this in a way that
 // blocks or fails the actual error response the customer sees. Wrap
diff --git a/app/lib/customerAuth.ts b/app/lib/customerAuth.ts
index 7bd6623..72419cb 100644
--- a/app/lib/customerAuth.ts
+++ b/app/lib/customerAuth.ts
@@ -90,6 +90,52 @@ export async function loginCustomer(input: { email: string; password: string }):
   };
 }
 
+// Always resolves — never throws or returns a distinguishable "email not
+// found" shape. Mirrors Payload's own forgot-password operation, which
+// fails silently on a non-existent email specifically to avoid leaking
+// which addresses are registered (see auth/operations/forgotPassword.js);
+// the caller (app/api/account/forgot-password/route.ts) must preserve that
+// by always responding the same way regardless of this call's outcome.
+export async function requestPasswordReset(email: string): Promise<void> {
+  await fetch(`${PAYLOAD_URL}/api/customers/forgot-password`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email }),
+  }).catch(() => {
+    // Best-effort — same "never reveal anything" reasoning as above.
+  });
+}
+
+// Payload's reset-password operation logs the customer in on success (see
+// auth/operations/resetPassword.js) and returns the same {token, user}
+// shape as login — reused here so the frontend route can set the session
+// cookie immediately, no separate login step needed after a reset.
+export async function resetPassword(token: string, newPassword: string): Promise<AuthResult> {
+  const res = await fetch(`${PAYLOAD_URL}/api/customers/reset-password`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ token, password: newPassword }),
+  });
+  if (!res.ok) return { ok: false, reason: "Der Link ist ungültig oder abgelaufen." };
+
+  const data: {
+    token: string;
+    user: { id: number; customerNumber: string; firstName: string; lastName: string; email: string; emailVerified: boolean };
+  } = await res.json();
+  return {
+    ok: true,
+    token: data.token,
+    customer: {
+      id: data.user.id,
+      customerNumber: data.user.customerNumber,
+      firstName: data.user.firstName,
+      lastName: data.user.lastName,
+      email: data.user.email,
+      emailVerified: data.user.emailVerified,
+    },
+  };
+}
+
 export async function getCustomerFromToken(token: string): Promise<CustomerSummary | null> {
   const res = await fetch(`${PAYLOAD_URL}/api/customers/me`, {
     headers: { Authorization: `JWT ${token}` },
diff --git a/app/lib/emailTemplates.ts b/app/lib/emailTemplates.ts
new file mode 100644
index 0000000..4c1b04c
--- /dev/null
+++ b/app/lib/emailTemplates.ts
@@ -0,0 +1,118 @@
+import { formatPrice, formatDate } from "./format";
+
+// Pure string-building functions, no server-only or client-only imports —
+// used both server-side for the actual email send (app/lib/orderEmail.ts,
+// app/api/checkout/route.ts) and client-side for the Live Preview page
+// (app/email-preview/[type]/page.tsx's client component), so a Live
+// Preview edit and the real sent email are guaranteed to render
+// identically — same function, same input shape, just different data
+// (real order vs. SAMPLE_ORDER below).
+//
+// Inline-styled HTML, not Tailwind classes or a <style> block — most email
+// clients strip external/embedded CSS and only reliably honor inline
+// `style` attributes. Structure (this file) is fixed; only the wording
+// (heading/bodyText/footerText, edited in Payload's email-templates
+// collection) is admin-editable — see that collection's own comment for why.
+
+export type EmailTemplateContent = {
+  subject: string;
+  heading: string;
+  bodyText: string;
+  footerText: string | null;
+};
+
+const BRAND = "#f6a701";
+const TEXT_PRIMARY = "#1a1a18";
+const BORDER = "#e5e0d8";
+
+function paragraphs(text: string): string {
+  return text
+    .split(/\n{2,}/)
+    .map((p) => `<p style="margin:0 0 16px;line-height:1.6;">${escapeHtml(p).replace(/\n/g, "<br/>")}</p>`)
+    .join("");
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function emailShell(bodyHtml: string): string {
+  return `<div style="max-width:600px;margin:0 auto;padding:32px 24px;font-family:Arial,Helvetica,sans-serif;color:${TEXT_PRIMARY};">
+    <p style="margin:0 0 24px;font-weight:700;font-size:18px;">einfach produktiv.</p>
+    ${bodyHtml}
+    <p style="margin-top:32px;padding-top:16px;border-top:1px solid ${BORDER};font-size:12px;color:#6b6b66;">
+      einfach produktiv · admin@mk360.de
+    </p>
+  </div>`;
+}
+
+export type OrderConfirmationItem = { productName: string; quantity: number; unitPrice: number };
+export type OrderConfirmationData = {
+  orderNumber: string;
+  createdAt: string;
+  items: OrderConfirmationItem[];
+  subtotal: number;
+  shippingCost: number;
+  discountAmount: number;
+  discountCode: string | null;
+  total: number;
+};
+
+export const SAMPLE_ORDER: OrderConfirmationData = {
+  orderNumber: "#EP-0001-A7K2",
+  createdAt: new Date().toISOString(),
+  items: [
+    { productName: "ToDo-Karten – Set", quantity: 1, unitPrice: 12.9 },
+    { productName: "Wochenplaner – Überblick", quantity: 2, unitPrice: 14.9 },
+  ],
+  subtotal: 42.7,
+  shippingCost: 0,
+  discountAmount: 5,
+  discountCode: "WILLKOMMEN10",
+  total: 37.7,
+};
+
+export function renderOrderConfirmationHtml(template: EmailTemplateContent, order: OrderConfirmationData): string {
+  const rows = order.items
+    .map(
+      (item) => `<tr>
+        <td style="padding:8px 0;border-bottom:1px solid ${BORDER};">${escapeHtml(item.productName)} × ${item.quantity}</td>
+        <td style="padding:8px 0;border-bottom:1px solid ${BORDER};text-align:right;white-space:nowrap;">${formatPrice(item.quantity * item.unitPrice)}</td>
+      </tr>`,
+    )
+    .join("");
+
+  const summaryRow = (label: string, value: string) =>
+    `<tr><td style="padding:4px 0;">${label}</td><td style="padding:4px 0;text-align:right;">${value}</td></tr>`;
+
+  return emailShell(`
+    <h1 style="margin:0 0 16px;font-size:22px;">${escapeHtml(template.heading)}</h1>
+    ${paragraphs(template.bodyText)}
+    <table style="width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;">
+      <tr><td colspan="2" style="padding-bottom:8px;font-size:12px;color:#6b6b66;">Bestellnummer ${escapeHtml(order.orderNumber)} · ${formatDate(order.createdAt)}</td></tr>
+      ${rows}
+    </table>
+    <table style="width:100%;border-collapse:collapse;font-size:14px;">
+      ${summaryRow("Zwischensumme", formatPrice(order.subtotal))}
+      ${order.discountAmount > 0 ? summaryRow(`Rabattcode${order.discountCode ? ` (${escapeHtml(order.discountCode)})` : ""}`, `-${formatPrice(order.discountAmount)}`) : ""}
+      ${summaryRow("Versand", order.shippingCost === 0 ? "Kostenlos" : formatPrice(order.shippingCost))}
+    </table>
+    <table style="width:100%;border-collapse:collapse;margin-top:8px;padding-top:8px;border-top:1px solid ${BORDER};font-size:16px;font-weight:700;">
+      <tr><td>Gesamtsumme</td><td style="text-align:right;">${formatPrice(order.total)}</td></tr>
+    </table>
+    ${template.footerText ? `<p style="margin-top:24px;font-size:14px;color:#6b6b66;">${escapeHtml(template.footerText)}</p>` : ""}
+  `);
+}
+
+export function renderPasswordResetHtml(template: EmailTemplateContent, resetUrl: string): string {
+  return emailShell(`
+    <h1 style="margin:0 0 16px;font-size:22px;">${escapeHtml(template.heading)}</h1>
+    ${paragraphs(template.bodyText)}
+    <p style="margin:24px 0;">
+      <a href="${resetUrl}" style="display:inline-block;padding:12px 24px;background:${BRAND};color:${TEXT_PRIMARY};font-weight:700;text-decoration:none;border-radius:4px;">Neues Passwort vergeben</a>
+    </p>
+    <p style="font-size:13px;color:#6b6b66;">Falls der Button nicht funktioniert: ${resetUrl}</p>
+    <p style="font-size:13px;color:#6b6b66;">Der Link ist 1 Stunde gültig.</p>
+    ${template.footerText ? `<p style="margin-top:24px;font-size:14px;color:#6b6b66;">${escapeHtml(template.footerText)}</p>` : ""}
+  `);
+}
diff --git a/app/lib/mailer.ts b/app/lib/mailer.ts
new file mode 100644
index 0000000..422d181
--- /dev/null
+++ b/app/lib/mailer.ts
@@ -0,0 +1,19 @@
+import nodemailer from "nodemailer";
+
+// Server-only. This app's own SMTP connection, deliberately independent of
+// Payload's (which also sends mail now — see Customers.ts's verification/
+// password-reset emails on the Payload side) — critical-error alerts in
+// particular need to still go out even if Payload itself is what's broken.
+// Same Hostinger account either way (already proven working via Diun's
+// update notifications), just a second, separate connection to it. Shared
+// by alertAdmin.ts and orderEmail.ts so there's exactly one transport
+// instance, not one per call site.
+export const transport = nodemailer.createTransport({
+  host: "smtp.hostinger.com",
+  port: 587,
+  secure: false,
+  auth: {
+    user: process.env.SMTP_USER || "",
+    pass: process.env.SMTP_PASSWORD || "",
+  },
+});
diff --git a/app/lib/orderEmail.ts b/app/lib/orderEmail.ts
new file mode 100644
index 0000000..2c15a40
--- /dev/null
+++ b/app/lib/orderEmail.ts
@@ -0,0 +1,28 @@
+import { transport } from "./mailer";
+import { getEmailTemplate } from "./payload";
+import { renderOrderConfirmationHtml, type OrderConfirmationData } from "./emailTemplates";
+
+// Called from app/api/checkout/route.ts right after a successful
+// createOrder() — fire-and-forget, must never block or fail the checkout
+// response itself. A missing/unpublished template falls back to a plain
+// default so a first-ever order isn't silently un-confirmed just because
+// nobody's visited the Payload admin yet (mirrors seed-email-templates.ts's
+// defaults, kept in sync by hand — there are only two places this wording
+// lives, seeding it is a one-time setup step, not a runtime dependency).
+export async function sendOrderConfirmationEmail(order: OrderConfirmationData, customerEmail: string): Promise<boolean> {
+  const template = (await getEmailTemplate("order-confirmation")) ?? {
+    subject: "Deine Bestellung bei einfach produktiv",
+    heading: "Vielen Dank für deine Bestellung!",
+    bodyText: "Wir haben deine Bestellung erhalten und bereiten sie für den Versand vor.",
+    footerText: null,
+  };
+
+  const html = renderOrderConfirmationHtml(template, order);
+  await transport.sendMail({
+    from: '"einfach produktiv" <admin@mk360.de>',
+    to: customerEmail,
+    subject: template.subject,
+    html,
+  });
+  return true;
+}
diff --git a/app/lib/payload.ts b/app/lib/payload.ts
index be57470..2bfa89c 100644
--- a/app/lib/payload.ts
+++ b/app/lib/payload.ts
@@ -603,3 +603,36 @@ export async function getLegalPage(type: LegalPageType, options?: { draft?: bool
         : null,
   };
 }
+
+export type EmailTemplateType = "order-confirmation" | "password-reset";
+
+type PayloadEmailTemplate = {
+  type: EmailTemplateType;
+  subject: string;
+  heading: string;
+  bodyText: string;
+  footerText: string | null;
+};
+
+// draft:true is used by app/email-preview/[type]/page.tsx (Live Preview,
+// see EmailTemplates.ts in the Payload repo); the real send (orderEmail.ts,
+// Customers.ts's forgotPassword hook) always reads the published version.
+export async function getEmailTemplate(
+  type: EmailTemplateType,
+  options?: { draft?: boolean },
+): Promise<PayloadEmailTemplate | null> {
+  const params = new URLSearchParams({
+    "where[tenant.slug][equals]": TENANT_SLUG,
+    "where[type][equals]": type,
+    limit: "1",
+  });
+
+  const res = await fetch(`${PAYLOAD_URL}/api/email-templates?${params}`, livePreviewCacheOption(Boolean(options?.draft)));
+  if (!res.ok) {
+    console.error(`getEmailTemplate: Payload returned ${res.status} ${res.statusText}`);
+    return null;
+  }
+
+  const data: { docs?: PayloadEmailTemplate[] } = await res.json();
+  return data.docs?.[0] ?? null;
+}