{/* Structural breakpoint is md: (768px) for the GRID only — the text column stays ~283-320px wide through the whole 768-1023px Tablet range regardless. Below, every piece of *content* inside the text column (heading/subtitle/CTA/social-proof) keeps its smaller, fixed-below-lg: sizing all the way through Tablet too, not just true Mobile — reusing the full fluid-token sizes at md: (as a first pass 2026-07-24 briefly did) put the original ~19-44px fluid floors right back in that narrow column, recreating the exact 3-line-wrap problem the old `lg:` structural exception existed to avoid. Splitting "grid at md:" from "full-size content at lg:" gets both: Tablet shows the real 5/7 grid, but with content sized for its column's actual width, not the column width `lg:` was designed for. */}

{/* Text content — first in DOM/visual order at every breakpoint so the CTA stays above the fold on Mobile (deliberate exception to the "keep DOM order" default, see Hero decision in the plan). Reveal fires ~immediately since Hero is already in the initial viewport — this doubles as the page's entrance animation. */} {/* Heading — smaller fixed-ish size below lg: (text-h1, still a real paired font-size+line-height token, not an arbitrary value) — text-display's own 44px floor wraps very heavily in a ~283-320px Tablet column (even a single word can approach that width). Forced break after "darf" only in the sm-md tablet range (natural wrap there landed awkwardly); removed at true mobile widths (below sm:) 2026-07-24 — narrower still, natural wrap reads fine there, and the forced break made "darf" the whole first line. Full text-display only from lg: up, where the column has real room again. */}

Produktivität darf
sich leicht anfühlen {/* Brand's signature orange dot (also in the logo/footer) — bouncy pop-in once the heading scrolls into view, timed to land just after the Reveal's own 0.6s fade-up so it reads as a deliberate flourish, not simultaneous with the text. One-shot, not a looping pulse — continuous motion next to the primary CTA would be distracting rather than "cool". Same text-h1 lg:text-display as the heading itself, so the dot scales down to match below lg:. */} .

{/* Subheading — smaller fixed size below lg:, text-h-emphasis's own 20px floor read too large next to the now-smaller CTA text. leading shrinks to match, not just font-size. */}

Für Menschen mit Familie, Verantwortung und zu wenig Zeit

{/* CTA */} {/* Letting this wrap to two lines below lg: (tried 2026-07-24) put the icon beside a two-line text block, which read as broken rather than intentional. Smaller fixed size below lg: instead, so the full phrase fits on one line within the column's width — text-h3's own 19px floor was still too wide for that, both on a 375px phone AND in the ~283-320px Tablet grid column. */} Starte mit der 7-Tage-Challenge {/* Scaled down to match the smaller CTA text (same ~0.76 aspect ratio as the lg: size), full size again from lg: up alongside text-h3. */}

{/* Social proof — always avatars-then-text on two lines below lg: (not just when it happens to overflow), single row again from lg: up where the real column width fits it fine. */}

{/* Avatars — gap 2px, not overlapping */}

{["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (

))}

10.000+ Menschen vertrauen einfach-produktiv

{/* Image — bleeds to the true edge at every breakpoint (never padded). Below md: (stacked layout) the full 887:583 aspect ratio at 100vw would make the image ~600-900px tall and dominate the page, so height is capped and object-cover crops it into a supporting banner instead; at md:+ (grid, image only 58% width) the full aspect ratio looks right again, so the cap is lifted. No shadow: a plain box-shadow reads as a hard rectangular edge against the existing corner/right/bottom mask-gradient fade below, which looked worse than no shadow at all — tried and reverted. */} {/* No Reveal (fade-in-on-scroll) below md: — whileInView's -80px viewport margin means the image doesn't fade in until scrolled that much further into view; on a short mobile viewport this image sits right at the initial fold, so it stayed at opacity:0 (a white gap, matching the section's own bg-bg-base) above the fold until the user scrolled (reported 2026-07-24). Plain, always-visible image below md: instead; Reveal's fade kept from md: up, where the image is beside the text with plenty of room and this was never an issue. */}