{/* Structural breakpoint is lg: (1024px) here, not the site-wide md: (768px) — a documented exception (see Gotcha in the figma-to-nextjs skill). At md:col-span-5 the text column was only ~320px at 768-1023px viewports, too narrow for the heading/CTA/social-proof row (which wrapped to 3 cramped lines). Staying stacked full-width through the whole Tablet range and only splitting into the 5/7 grid once there's real room (≥1024px) fixes that without touching the 5/7 ratio itself, which is fine once it has space. */}

{/* 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 — forced break after "darf" below lg: (1024px), natural wrap from lg: up. Below lg: the Hero is stacked full-width and narrower per-viewport, where natural wrap produced an awkward break — force it after "darf" there via a responsive
(visible by default, turned off at lg:+). From lg: up the 5/12 grid's text column wraps fine on its own, no forced break needed. */}

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". */} .

{/* Subheading */}

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

{/* CTA */} Starte mit der 7-Tage-Challenge

{/* Social proof */}

{/* 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 lg: (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 lg:+ (grid, image only 58% width) the full aspect ratio looks right again, so the cap is lifted. A small negative top margin below lg: pulls it up to slightly tuck under the text block (deliberately less than the social-proof row's height, so it never covers the avatars/text). Scoped to md:-only (mt-0 at base and again at lg:) — it's a Tablet-specific touch, not a permanent effect. 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. */}