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

@@ -1,32 +1,22 @@
 export function Newsletter() {
   return (
-    <section className="py-16 w-full">
+    <section className="py-10 lg:py-16 w-full">
+      <div className="px-4 md:px-8 lg:px-[5rem] w-full">
 
-      {/* Outer section padding — same 80px horizontal as all other sections */}
-      <div className="px-[5rem] w-full">
+        {/* Card: stacked on mobile, side-by-side on lg+ */}
+        <div className="bg-[#f8f3ec] flex flex-col lg:flex-row gap-8 lg:gap-[3.5rem] items-start lg:items-center px-6 lg:px-8 py-8 lg:py-0 rounded-xl w-full">
 
-        {/* Rounded card: cream bg, 32px inner padding, 56px gap between copy and form */}
-        <div className="bg-[#f8f3ec] flex gap-[3.5rem] items-center px-8 rounded-xl w-full">
-
-          {/* Left: copy — fixed width 612px so form always gets the remaining flex-1 */}
-          <div className="flex gap-8 items-start py-4 shrink-0 w-[38.25rem]">
-
-            {/* Decorative envelope icon, tilted -4° as per design */}
-            <div className="flex items-center justify-center shrink-0 w-[4.23rem] h-[3.71rem]">
+          {/* Left: copy — full width mobile, fixed 612px desktop */}
+          <div className="flex gap-6 lg:gap-8 items-start w-full lg:w-[38.25rem] lg:shrink-0 lg:py-4">
+            <div className="flex items-center justify-center shrink-0 w-[3.5rem] h-[3.5rem] lg:w-[4.23rem] lg:h-[3.71rem]">
               <div className="-rotate-4 -scale-y-100">
-                <img
-                  alt=""
-                  src="/newsletter-icon.svg"
-                  className="w-16 h-[3.438rem] block"
-                />
+                <img alt="" src="/newsletter-icon.svg" className="w-12 lg:w-16 h-auto block" />
               </div>
             </div>
-
-            {/* Heading + body */}
-            <div className="flex flex-col gap-4 flex-1 min-w-0 text-[#222221]">
+            <div className="flex flex-col gap-3 lg:gap-4 flex-1 min-w-0 text-[#222221]">
               <p
-                className="font-semibold text-[1.75rem] leading-normal"
-                style={{ fontFamily: "var(--font-lora)" }}
+                className="font-semibold leading-normal"
+                style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)" }}
               >
                 Starte mit einer Woche voller Klarheit
               </p>
@@ -37,16 +27,14 @@ export function Newsletter() {
             </div>
           </div>
 
-          {/* Right: form — takes remaining space, centered vertically */}
-          <div className="flex flex-1 items-center self-stretch min-w-0">
-            <div className="flex flex-1 flex-col gap-4 min-w-0">
-
-              {/* Input + submit button side by side */}
-              <div className="flex gap-4 items-stretch w-full">
+          {/* Right: form — full width on mobile */}
+          <div className="flex flex-1 items-center lg:self-stretch w-full min-w-0">
+            <div className="flex flex-1 flex-col gap-4 min-w-0 w-full">
+              <div className="flex flex-col sm:flex-row gap-3 items-stretch w-full">
                 <input
                   type="email"
                   placeholder="Deine E-Mail-Adresse"
-                  className="flex-1 min-w-0 bg-white border border-[#d9d9d9] rounded-lg px-6 py-3 text-[1rem] text-[#868686] font-normal outline-none focus:border-[#f6a701] transition-colors"
+                  className="flex-1 min-w-0 bg-white border border-[#d9d9d9] rounded-lg px-5 py-3 text-[1rem] text-[#868686] font-normal outline-none focus:border-[#f6a701] transition-colors"
                 />
                 <button
                   type="submit"
@@ -55,12 +43,9 @@ export function Newsletter() {
                   Jetzt anmelden
                 </button>
               </div>
-
-              {/* Privacy note */}
               <p className="text-[0.75rem] text-[#222221] font-normal leading-normal">
                 Ich achte auf deine Daten. Kein Spam, jederzeit abbestellbar.
               </p>
-
             </div>
           </div>