Move structural breakpoint to 640px, shorten Hero heading

Tablet layout (768-1023px) hit the md: grid switch exactly where the
fluid clamp() tokens were already at their floor, leaving no room to
shrink. Moves the fluid floor and structural breakpoint down together
to sm: (640px) so real tablets always get the fluid, desktop-like
structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/
Newsletter/Footer/Tools back onto one line, leaving documented lg:
exceptions where content genuinely doesn't fit yet. Also shortens the
Hero heading to a single sentence with no trailing period (the brand's
orange dot already renders one, animated).

app/bestellbestaetigung/components/BestellbestaetigungContent.tsx

@@ -183,6 +183,12 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
       </Reveal>
 
       {!productsLoading && (
+        // Outer card+sidebar split stays lg: (fixed 18rem delivery-status
+        // sidebar, L297 below — same fixed-width-block category as Tier C
+        // exceptions elsewhere), while the inner order-meta/items row
+        // already switches at sm: — intentional, not an inconsistent
+        // leftover: the inner row has no fixed-width sidebar to fight for
+        // room against, just two flexible columns.
         <Reveal
           delay={0.05}
           className="w-full max-w-[56rem] mx-auto bg-bg-base border border-border rounded-md overflow-hidden flex flex-col lg:flex-row mb-16"
@@ -328,8 +334,8 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
           identical height regardless of how many lines the quote wraps
           to (a min-height alone lets whichever column has more content
           stretch the row past what the other side visually fills). */}
-      <Reveal className="relative w-full flex items-stretch h-[14rem] md:h-[16rem] bg-bg-muted overflow-hidden">
-        <div className="relative w-full md:w-[45%] shrink-0">
+      <Reveal className="relative w-full flex items-stretch h-[14rem] sm:h-[16rem] bg-bg-muted overflow-hidden">
+        <div className="relative w-full sm:w-[45%] shrink-0">
           {/* -inset-1, not inset-0 — this section fades in via Reveal's
               y:28→0 transform; a plain inset-0 image can leave a
               hairline gap at the top edge while that's still settling
@@ -343,10 +349,10 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
             src="/bestellbestaetigung-testimonial-photo.jpg"
             width={366}
             height={126}
-            sizes="(min-width: 768px) 45vw, 100vw"
+            sizes="(min-width: 640px) 45vw, 100vw"
             className="absolute -inset-1 w-[calc(100%+0.5rem)] h-[calc(100%+0.5rem)] object-cover"
           />
-          <div className="hidden md:block absolute inset-y-0 right-0 w-40 bg-gradient-to-l from-bg-muted to-transparent" />
+          <div className="hidden sm:block absolute inset-y-0 right-0 w-40 bg-gradient-to-l from-bg-muted to-transparent" />
         </div>
         <div className="flex-1 flex flex-col justify-center gap-3 px-8 md:px-16">
           <p