feat: full responsive layout — mobile-first, lg breakpoint, fluid typography

Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type.

Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close,
  h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open.
Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image
  scales responsively, gradient mask via .hero-mask only at lg+ in CSS.
Divider: flex-wrap + gap-y for smaller screens.
Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight.
Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row,
  excerpt hidden on mobile secondary cards to save space.
About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo.
Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+.
Footer: flex-col→lg:flex-row, flex-wrap on legal links.
globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/Footer.tsx

@@ -9,18 +9,16 @@ const links = [
 
 export function Footer() {
   return (
-    <footer className="bg-[#111] flex flex-col items-center justify-end w-full mt-auto">
+    <footer className="bg-[#111] flex flex-col items-center w-full mt-auto">
 
-      {/* 3px top divider — #30302c, not a border */}
+      {/* 3px top divider */}
       <div className="bg-[#30302c] h-[3px] w-full shrink-0" />
 
-      {/* Footer inner — max-width 1280px, centered */}
+      {/* Footer inner */}
       <div className="flex flex-col items-start w-full max-w-[1280px] py-4">
+        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-5 lg:gap-0 px-4 md:px-8 lg:px-16 w-full">
 
-        {/* Three columns: logo | @handle | links */}
-        <div className="flex items-center justify-between px-16 w-full">
-
-          {/* Logo: "einfach produktiv" white + "." gold */}
+          {/* Logo */}
           <div className="flex items-center p-2 shrink-0">
             <span
               className="font-semibold text-white text-[1.25rem] leading-normal whitespace-nowrap"
@@ -31,16 +29,16 @@ export function Footer() {
             </span>
           </div>
 
-          {/* Social handle — Lora Regular (weight 400), 24px */}
+          {/* Social handle */}
           <p
-            className="font-normal text-white text-[1.5rem] text-center leading-[1.2] whitespace-nowrap shrink-0"
+            className="font-normal text-white text-[1.25rem] lg:text-[1.5rem] lg:text-center leading-[1.2] whitespace-nowrap shrink-0"
             style={{ fontFamily: "var(--font-lora)", fontWeight: 400 }}
           >
             @einfach.produktiv
           </p>
 
-          {/* Legal links — Inter Regular 14px, gap 24px */}
-          <div className="flex items-start gap-6 shrink-0">
+          {/* Legal links */}
+          <div className="flex flex-wrap items-start gap-x-6 gap-y-2 shrink-0">
             {links.map((link) => (
               <Link
                 key={link.label}