Fix low-contrast checkout borders, and a Tablet-sizing regression in Hero/About

- Checkout: the 4 step cards' border-border and CheckoutSteps' connector
  lines/upcoming-circle borders were nearly the same luminance as the
  page's own bg-bg-base background, barely visible. Darker (#c4b8a0),
  scoped to just these spots rather than the shared border-border token.
- Hero.tsx: fixes a mistake from the last Tablet pass — moving the CTA/
  subtitle/icon/social-proof size overrides from lg: to md: (to match the
  grid breakpoint move) actually removed their smaller sizing from the
  whole Tablet range, recreating the exact 3-line-wrap problem the lg:
  exception used to prevent. Reverted those specific overrides back to
  lg: (grid structure stays at md:), and added a smaller heading size
  (text-h1) below lg: too — text-display's 44px floor doesn't fit the
  ~283-320px Tablet column any better than the CTA did.
- About.tsx: the quote/divider/bio row and its divider orientation also
  pushed from md: to lg: — still too tight for the Tablet column even
  after the text/photo ratio swap from the previous pass.

app/checkout/components/CheckoutContent.tsx

@@ -668,7 +668,15 @@ export function CheckoutContent({
         {/* Form column */}
         <div className="w-full lg:flex-1 flex flex-col gap-6 items-start min-w-0">
           {/* 1. Rechnungsadresse */}
-          <Reveal className="w-full bg-bg-base border border-border rounded-md p-7 flex flex-col gap-5 items-start">
+          {/* border-[#c4b8a0], not the shared border-border (#e5e0d8) — that
+              token is nearly the same luminance as this card's own bg-bg-base
+              background (#f8f5f1), so the card's outline barely read at all
+              (fixed 2026-07-24, feedback: "die Striche bei den Steps sind zu
+              hell"). Darker but still on the warm-cream palette, scoped to
+              just these 4 step cards rather than the shared token, since
+              border-border reads fine everywhere else it's paired with a
+              genuinely different background. */}
+          <Reveal className="w-full bg-bg-base border border-[#c4b8a0] rounded-md p-7 flex flex-col gap-5 items-start">
             <p
               className="font-semibold text-h-small text-text-primary"
               style={{ fontFamily: "var(--font-lora)" }}
@@ -1107,7 +1115,7 @@ export function CheckoutContent({
           </Reveal>
 
           {/* 2. Versandart */}
-          <Reveal delay={0.05} className="w-full bg-bg-base border border-border rounded-md p-7 flex flex-col gap-5 items-start">
+          <Reveal delay={0.05} className="w-full bg-bg-base border border-[#c4b8a0] rounded-md p-7 flex flex-col gap-5 items-start">
             <p
               className="font-semibold text-h-small text-text-primary"
               style={{ fontFamily: "var(--font-lora)" }}
@@ -1138,7 +1146,7 @@ export function CheckoutContent({
           </Reveal>
 
           {/* 3. Zahlungsart */}
-          <Reveal delay={0.1} className="w-full bg-bg-base border border-border rounded-md p-7 flex flex-col gap-5 items-start">
+          <Reveal delay={0.1} className="w-full bg-bg-base border border-[#c4b8a0] rounded-md p-7 flex flex-col gap-5 items-start">
             <p
               className="font-semibold text-h-small text-text-primary"
               style={{ fontFamily: "var(--font-lora)" }}
@@ -1198,7 +1206,7 @@ export function CheckoutContent({
 
         {/* Sidebar */}
         <Reveal delay={0.15} className="w-full lg:w-[24.375rem] lg:shrink-0 flex flex-col gap-6 items-start">
-          <div className="bg-bg-base border border-border rounded-md p-7 flex flex-col gap-5 items-start w-full">
+          <div className="bg-bg-base border border-[#c4b8a0] rounded-md p-7 flex flex-col gap-5 items-start w-full">
             <p
               className="font-semibold text-h-small text-text-primary"
               style={{ fontFamily: "var(--font-lora)" }}