diff --git a/app/todo-cards/components/TodoKartenHero.tsx b/app/todo-cards/components/TodoKartenHero.tsx
index 5ad5f4b..1faba69 100644
--- a/app/todo-cards/components/TodoKartenHero.tsx
+++ b/app/todo-cards/components/TodoKartenHero.tsx
@@ -2,6 +2,8 @@ import Link from "next/link";
 import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
+import { getProductBySlug } from "../../lib/payload";
+import { formatPrice, discountPercent } from "../../lib/format";
 
 const checklist = [
   "Klarer Fokus auf das, was wirklich zählt",
@@ -9,7 +11,14 @@ const checklist = [
   "Minimalistisch, analog, effektiv",
 ];
 
-export function TodoKartenHero() {
+// Same "todo-karten" product Pricing.tsx reads further down the page —
+// this is just a compact early teaser so the hero's CTA isn't asking for
+// a click without saying what it costs; the full price/VAT/shipping-time
+// detail still lives only in Pricing.tsx, not duplicated here.
+export async function TodoKartenHero() {
+  const product = await getProductBySlug("todo-karten");
+  const discount = product ? discountPercent(product.price, product.compareAtPrice) : null;
+
   return (
     <section className="bg-bg-base w-full overflow-hidden">
       {/* Same lg:-only structural exception as the Home Hero (see
@@ -81,6 +90,16 @@ export function TodoKartenHero() {
               ))}
             </ul>
 
+            {product && (
+              <div className="flex gap-2 items-baseline">
+                {discount !== null && (
+                  <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
+                )}
+                <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
+                <p className="text-label text-text-muted">inkl. MwSt.</p>
+              </div>
+            )}
+
             <AddToCartButton label="ToDo-Karten bestellen" />
           </div>
         </Reveal>