feat(shipping): move delivery-time settings to Payload, polish product/cart CTAs

The delivery-time range (handling + transit days) was a hardcoded
HANDLING_DAYS/TRANSIT_DAYS_DE pair in lib/shipping.ts — changing it
needed a code deploy. Now sourced from Payload's new Shipping Settings
collection via getShippingSettings(), threaded down as a prop to the
few Client Components (Cart/Checkout/VersandModal) that can't fetch it
themselves, with the old code constants removed.

Also: the delivery-time note is now shown on every purchase CTA (shop
grid, home spotlight, ToDo-Karten hero + pricing panel), not just one
of them — required next to each buy button per Art. 246a §1 Abs.1
Nr.8 EGBGB, not just somewhere reachable via a link. Checkout's
sidebar was missing the "ab 39€ kostenlos" note Cart already had;
that's fixed too, and both now show the delivery-time range on its own
line instead of crammed onto the shipping-cost line.

Related smaller fixes bundled in since they touch the same files:
price/delivery-time spacing tightened into its own group, the
redundant "Sichere Zahlung" note under Cart's checkout button (already
shown via the trustBadges list right below) replaced with "Sichere
SSL-Verschlüsselung" to match Checkout, and ToDo-Karten's pricing panel
no longer shows a premature payment-security note at the add-to-cart
step.

app/todo-cards/components/Pricing.tsx

@@ -1,8 +1,7 @@
 import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
-import { TOTAL_DAYS_DE } from "../../lib/shipping";
-import { getProductBySlug } from "../../lib/payload";
+import { getProductBySlug, getShippingSettings } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 
 const bullets = [
@@ -18,7 +17,7 @@ const bullets = [
 // reasoning; the bullet list stays hand-written since it's spec detail,
 // not something the Products collection models.
 export async function Pricing() {
-  const product = await getProductBySlug("todo-karten");
+  const [product, shipping] = await Promise.all([getProductBySlug("todo-karten"), getShippingSettings()]);
   if (!product) return null;
   const discount = discountPercent(product.price, product.compareAtPrice);
 
@@ -53,7 +52,7 @@ export async function Pricing() {
           <ul className="flex flex-col gap-[0.375rem] items-start">
             {bullets.map((b) => (
               <li key={b} className="flex gap-2 items-center">
-                <img alt="" src="/icon-bullet-dot.svg" className="size-1 shrink-0" />
+                <Image alt="" src="/icon-bullet-dot.svg" width={4} height={4} className="size-1 shrink-0" />
                 <span className="text-body-sm text-text-primary">{b}</span>
               </li>
             ))}
@@ -61,24 +60,26 @@ export async function Pricing() {
         </div>
 
         <div className="flex flex-col gap-3 items-start w-full lg:w-[18.75rem] lg:shrink-0">
-          <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. zzgl. Versand</p>
+          <div className="flex flex-col gap-1 items-start">
+            <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. zzgl. Versand</p>
+            </div>
+            <p className="text-label text-text-muted">
+              Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
+            </p>
           </div>
-          <p className="text-label text-text-muted">
-            Lieferzeit: {TOTAL_DAYS_DE.min}–{TOTAL_DAYS_DE.max} Werktage innerhalb Deutschlands
-          </p>
+          {/* No "Sichere Zahlung" trust note here (unlike Cart/Checkout) —
+              this is an add-to-cart step, not the actual payment step, so
+              a payment-security reassurance is premature here and just
+              duplicates the one shown later at checkout. */}
           <AddToCartButton
             label="In den Warenkorb"
             className="w-full inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-muted"
           />
-          <div className="flex gap-[0.375rem] items-center">
-            <img alt="" src="/icon-lock.svg" className="size-3.5" />
-            <span className="text-body-sm text-text-primary">Sichere Zahlung</span>
-          </div>
         </div>
       </Reveal>
     </section>

app/todo-cards/components/TodoKartenHero.tsx

@@ -2,7 +2,7 @@ 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 { getProductBySlug, getShippingSettings } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 
 const checklist = [
@@ -13,10 +13,12 @@ const checklist = [
 
 // 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.
+// a click without saying what it costs. Delivery time is repeated here too
+// (not just in Pricing.tsx) since this is also a purchase CTA — Art. 246a
+// §1 Abs.1 Nr.8 EGBGB's delivery-date disclosure needs to sit next to every
+// buy button, not just one of them.
 export async function TodoKartenHero() {
-  const product = await getProductBySlug("todo-karten");
+  const [product, shipping] = await Promise.all([getProductBySlug("todo-karten"), getShippingSettings()]);
   const discount = product ? discountPercent(product.price, product.compareAtPrice) : null;
 
   return (
@@ -84,21 +86,26 @@ export async function TodoKartenHero() {
             <ul className="flex flex-col gap-3 items-start w-full">
               {checklist.map((item) => (
                 <li key={item} className="flex gap-[0.625rem] items-center w-full">
-                  <img alt="" src="/icon-check.svg" className="size-5 shrink-0" />
+                  <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0" />
                   <span className="flex-1 text-body text-text-primary">{item}</span>
                 </li>
               ))}
             </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>
-            )}
+            <div className="flex flex-col gap-1 items-start">
+              {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>
+              )}
+              <p className="text-label text-text-muted">
+                Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
+              </p>
+            </div>
 
             <AddToCartButton label="ToDo-Karten bestellen" />
           </div>