{/* Structural breakpoint is md: (768px), same as the site-wide convention — briefly moved to lg: (see the figma-to-nextjs skill's Gotcha #5) because at md:col-span-5 the text column was only ~283px at 768px and the full-size CTA/subtitle text made the heading/CTA/social-proof row wrap to 3 cramped lines. Reverted 2026-07-24: the CTA/subtitle/icon sizing added since then for true mobile widths (see each one's own comment below) uses fixed sizes well under half that column width, so the original problem doesn't recur — moving back to md: means Tablet gets the real 5/7 grid (image beside text) instead of stacking full-width like a phone. */}

{/* 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-md tablet range (Hero stacked full-width there, natural wrap 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 md: 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 — smaller fixed size below md:, text-h-emphasis's own 20px floor read too large next to the now-smaller mobile 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 md: (tried 2026-07-24) put the icon beside a two-line text block, which read as broken rather than intentional. Smaller fixed size below md: 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 {/* Scaled down to match the smaller mobile CTA text (same ~0.76 aspect ratio as the md: size), full size again from md: up alongside text-h3. */}

{/* Social proof — always avatars-then-text on two lines below md: (not just when it happens to overflow), single row again from md: 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. */}