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/Footer.tsx

@@ -19,11 +19,10 @@ export function Footer() {
       <div className="flex flex-col items-center w-full max-w-[1280px] py-8 md:py-4">
 
         {/* Three groups: logo | @handle | links — stacked + centered below
-            lg: (was md:). Logo + handle + 5 legal links all side by side
-            with justify-between read too cramped on Tablet — stacked
-            through that range instead, side by side again once there's
-            real room at lg:. */}
-        <div className="flex flex-col lg:flex-row items-center lg:justify-between gap-6 lg:gap-0 px-8 md:px-16 w-full">
+            sm: (640px, moved down from the old md:/lg: skip-pattern now
+            that grid/flex structure across the site aligns with the fluid
+            floor). Side by side again once there's real room at sm:. */}
+        <div className="flex flex-col sm:flex-row items-center sm:justify-between gap-6 sm:gap-0 px-8 md:px-16 w-full">
 
           {/* Logo: "einfach produktiv" white + "." gold */}
           <div className="flex items-center p-2 shrink-0">