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

@@ -61,8 +61,9 @@ function useActiveSection(sections: TOCSection[]) {
 // lg:-only sidebar — same "wide fixed-width block next to content" shape
 // as the cart's order-summary sidebar (see figma-to-nextjs skill Gotcha
 // #5): a 360px TOC card plus a readable content column already exceeds
-// the 768px Tablet floor, so md: wouldn't leave room for a real 2-column
-// split at Tablet widths.
+// even the site's 640px structural floor, so sm: wouldn't leave room for
+// a real 2-column split at Tablet widths — a deliberate exception to the
+// site-wide sm: consolidation, not a leftover of it.
 //
 // Generic over `sections` — originally written just for /versand
 // (VersandTOC), generalized once /datenschutz needed the identical