From c85275200620e857d1bacfe6b9f0e506ff3a4862 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 23:01:17 +0000
Subject: [PATCH] Cap Newsletter card at 1280px, show an explicit "Keine
 Versandkosten" hint, generalize the /versand exemption note
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Newsletter.tsx: max-w-[1280px] mx-auto, matching /lebensuhr's own
  newsletter-style section and Footer.tsx's existing 1280px convention —
  previously unbounded and stretched edge-to-edge on wide viewports.
- Product pages: noShippingCost now shows "Keine Versandkosten" instead
  of just omitting "zzgl. Versand" silently.
- /versand's exemption note no longer implies only digital products can
  be exempt — noShippingCost is a general per-product flag.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/Newsletter.tsx                |  9 ++++++++-
 app/components/ProductSpotlight.tsx          | 11 +++++------
 app/todo-cards/components/Pricing.tsx        | 11 +++++------
 app/todo-cards/components/TodoKartenHero.tsx | 11 +++++------
 app/versand/components/VersandSections.tsx   |  4 ++--
 5 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/app/components/Newsletter.tsx b/app/components/Newsletter.tsx
index d4c0174..0c6792a 100644
--- a/app/components/Newsletter.tsx
+++ b/app/components/Newsletter.tsx
@@ -43,8 +43,15 @@ export function Newsletter({
       {/* Outer section padding — same fluid horizontal padding as all other sections */}
       <div className="px-[var(--layout-padding-x)] w-full">
 
+        {/* max-w-[1280px] mx-auto — the consistent default width for this
+            card, matching /lebensuhr's own newsletter-style "Bottom CTA"
+            section (same 1280px cap Footer.tsx already uses) and every
+            other narrow-viewport-friendly section on the site. Previously
+            unbounded here, so on wide desktop viewports this card stretched
+            edge-to-edge while /lebensuhr's version stayed centered and
+            noticeably narrower — reported 2026-07-29. */}
         {/* Rounded card: cream bg, stacks below sm (moved down from the old md:) */}
-        <Reveal className="bg-bg-muted flex flex-col sm:flex-row gap-8 sm:gap-12 items-center px-8 py-8 sm:py-0 rounded-md w-full">
+        <Reveal className="bg-bg-muted flex flex-col sm:flex-row gap-8 sm:gap-12 items-center px-8 py-8 sm:py-0 rounded-md w-full max-w-[1280px] mx-auto">
 
           {/* Left: copy — fixed width from sm+ so the form always gets the remaining space.
               Icon+text stacked (icon on top, centered) below sm: — side by
diff --git a/app/components/ProductSpotlight.tsx b/app/components/ProductSpotlight.tsx
index 2bd509b..41acf8a 100644
--- a/app/components/ProductSpotlight.tsx
+++ b/app/components/ProductSpotlight.tsx
@@ -86,14 +86,13 @@ export async function ProductSpotlight() {
               )}
               <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
             </div>
-            {(() => {
-              const priceHint = kleinunternehmer
+            <p className="text-label text-text-muted">
+              {kleinunternehmer
                 ? product.noShippingCost
-                  ? null
+                  ? "Keine Versandkosten"
                   : "zzgl. Versand"
-                : `inkl. ${taxRate}% MwSt.${product.noShippingCost ? "" : " zzgl. Versand"}`;
-              return priceHint && <p className="text-label text-text-muted">{priceHint}</p>;
-            })()}
+                : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
+            </p>
             {!product.noShippingCost && (
               <p className="text-label text-text-muted">
                 Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
diff --git a/app/todo-cards/components/Pricing.tsx b/app/todo-cards/components/Pricing.tsx
index c2a7ff3..758293e 100644
--- a/app/todo-cards/components/Pricing.tsx
+++ b/app/todo-cards/components/Pricing.tsx
@@ -97,14 +97,13 @@ export async function Pricing() {
               )}
               <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
             </div>
-            {(() => {
-              const priceHint = kleinunternehmer
+            <p className="text-label text-text-muted">
+              {kleinunternehmer
                 ? product.noShippingCost
-                  ? null
+                  ? "Keine Versandkosten"
                   : "zzgl. Versand"
-                : `inkl. ${taxRate}% MwSt.${product.noShippingCost ? "" : " zzgl. Versand"}`;
-              return priceHint && <p className="text-label text-text-muted">{priceHint}</p>;
-            })()}
+                : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
+            </p>
             {!product.noShippingCost && (
               <p className="text-label text-text-muted">
                 Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
diff --git a/app/todo-cards/components/TodoKartenHero.tsx b/app/todo-cards/components/TodoKartenHero.tsx
index d49532c..6face39 100644
--- a/app/todo-cards/components/TodoKartenHero.tsx
+++ b/app/todo-cards/components/TodoKartenHero.tsx
@@ -124,14 +124,13 @@ export async function TodoKartenHero() {
                     <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>
-                  {(() => {
-                    const priceHint = kleinunternehmer
+                  <p className="text-label text-text-muted">
+                    {kleinunternehmer
                       ? product.noShippingCost
-                        ? null
+                        ? "Keine Versandkosten"
                         : "zzgl. Versand"
-                      : `inkl. ${taxRate}% MwSt.${product.noShippingCost ? "" : " zzgl. Versand"}`;
-                    return priceHint && <p className="text-label text-text-muted">{priceHint}</p>;
-                  })()}
+                      : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
+                  </p>
                 </div>
               )}
               {!product?.noShippingCost && (
diff --git a/app/versand/components/VersandSections.tsx b/app/versand/components/VersandSections.tsx
index 389adc6..ee062ba 100644
--- a/app/versand/components/VersandSections.tsx
+++ b/app/versand/components/VersandSections.tsx
@@ -78,8 +78,8 @@ export function VersandSections({
         </p>
         <p>Alle angegebenen Preise verstehen sich inklusive der gesetzlichen Mehrwertsteuer.</p>
         <p>
-          Rein digitale Produkte (z.B. Downloads) verursachen keine Versandkosten und sind von den
-          oben genannten Beträgen ausgenommen.
+          Einzelne Produkte können von den oben genannten Versandkosten ausgenommen sein (z.B.
+          digitale Produkte) — das ist dann direkt auf der jeweiligen Produktseite vermerkt.
         </p>
       </Section>