{/* 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" only in the sm-lg tablet range (Hero stacked full-width, natural wrap there landed awkwardly). Removed at true mobile widths (below sm:) 2026-07-24 — narrower still, natural wrap there reads fine, and the forced break made "darf" the whole first line, leaving very little text above the CTA. Natural wrap from lg: up too, once the 5/12 grid gives the column real width 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". */} .

{/* Subheading */}

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 stacked mobile column's width — text-h3's own 19px floor was still too wide for that at ~236px of available text budget on a 375px phone. */} Starte mit der 7-Tage-Challenge

{/* Social proof — flex-wrap + justify-center rather than a fixed breakpoint: at narrow widths avatars+text don't fit on one row, so the text wraps to its own line and both lines end up centered; from lg: up (real column width) it still fits on one row exactly as before, so nothing changes there. */}

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