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/components/CheckoutSteps.tsx

@@ -20,7 +20,12 @@ function StepCircle({ state, number }: { state: StepState; number: number }) {
     );
   }
   return (
-    <div className="flex size-9 items-center justify-center rounded-full border border-border font-bold text-body-sm text-text-muted">
+    // border-[#c4b8a0], not the shared border-border (#e5e0d8) — nearly the
+    // same luminance as the page's own bg-bg-base (#f8f5f1), barely visible
+    // (fixed 2026-07-24, feedback: "die Striche bei den Nummern-Steps sind
+    // zu hell"). Same color as the connector line below and the checkout
+    // step cards' own border fix, for consistency.
+    <div className="flex size-9 items-center justify-center rounded-full border border-[#c4b8a0] font-bold text-body-sm text-text-muted">
       {number}
     </div>
   );
@@ -50,7 +55,7 @@ export function CheckoutSteps({ current }: { current: number }) {
                 </span>
               </div>
             </div>
-            {i < STEP_LABELS.length - 1 && <div className="h-px bg-border flex-1 mx-4 min-w-4" />}
+            {i < STEP_LABELS.length - 1 && <div className="h-px bg-[#c4b8a0] flex-1 mx-4 min-w-4" />}
           </div>
         );
       })}