Show product subline on cards/cart/PDP hero; brand-color trailing period

Follows Products.subline (docker/payload commit ad7156e). Cards and cart
line items showed nothing but the bare name — added the subline under it.
der-eine and todo-cards' hero taglines were hardcoded copy nearly
identical to this new field — switched both to read subline instead, so
future edits go through the CMS.

Also adds a shared ProductName component: every hand-written PDP headline
already styled a trailing "." in brand color, but the few places that
render product.name as plain text (cards, cart, the Payload-driven
tasse-die-pause hero) had silently lost that styling. Centralizes it so
it can't drift per call site again.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J1Hu5bZ1kZUgKhab6yNwCt

app/tasse-die-pause/components/Hero.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
 import { RichText } from "../../components/RichText";
+import { ProductName } from "../../components/ProductName";
 import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
@@ -44,12 +45,19 @@ export async function Hero() {
           </p>
 
           <div className="flex flex-col gap-6 items-start w-full flex-1 lg:justify-center">
-            <p
-              className="font-semibold text-h-page text-text-primary"
-              style={{ fontFamily: "var(--font-playfair)" }}
-            >
-              {product?.name ?? "Tasse"}
-            </p>
+            <div className="flex flex-col gap-2 items-start w-full">
+              <p
+                className="font-semibold text-h-page text-text-primary"
+                style={{ fontFamily: "var(--font-playfair)" }}
+              >
+                {product ? <ProductName name={product.name} /> : "Tasse"}
+              </p>
+              {product?.subline && (
+                <p className="font-semibold text-h3 text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+                  {product.subline}
+                </p>
+              )}
+            </div>
 
             {product?.description ? <RichText content={product.description} /> : null}
 

app/tasse-die-pause/components/Pricing.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
 import { RichText } from "../../components/RichText";
+import { ProductName } from "../../components/ProductName";
 import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
@@ -47,8 +48,9 @@ export async function Pricing() {
             className="font-semibold text-h-small text-text-primary"
             style={{ fontFamily: "var(--font-lora)" }}
           >
-            {product.name}
+            <ProductName name={product.name} />
           </p>
+          {product.subline && <p className="text-body-sm font-semibold text-text-primary">{product.subline}</p>}
           {product.description ? <RichText content={product.description} /> : null}
         </div>