{/* Structural breakpoint is sm: (640px, moved down from the old md: 768px so the grid arrives exactly where the fluid token floor also sits — see fluid.ts/globals.css) for the GRID only — the text column stays narrow through the whole 640-1023px Tablet range regardless. Below, every piece of *content* inside the text column (heading/subtitle/CTA/social-proof) deliberately keeps its smaller, fixed-below-lg: sizing all the way through Tablet too, not just true Mobile — reusing the full fluid-token sizes that early 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. This is a narrower, intentional exception to the site-wide sm: consolidation — the column's real width at sm: hasn't been visually verified yet (no browser in this environment), so full-size content stays gated behind lg: as a fast-follow rather than a guess. Splitting "grid at sm:" 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). The old forced break after "darf" only existed for a "wide single-column, not yet grid" band (640-767px under the old md: 768px grid switch) that no longer exists now the grid itself starts at sm: (640px) — below sm: the stack is narrower than that old band ever was, where natural wrap already reads fine (confirmed 2026-07-24), so the break is removed rather than re-anchored to a new range. Full text-display only from lg: up, where the column has real room again. */}

Finde heraus, was wichtig ist {/* 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. */}

Ich helfe dir, zwischen Job, Familie und eigenen Projekten nicht unterzugehen

{/* CTA — centered below sm: (reads better against the centered image/banner above it on true Mobile), left-aligned with the rest of the text column again from sm: up. */} {/* 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. */} Jetzt starten {/* 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. Centered on true Mobile (<640px, matches the CTA above it, see self-center there); left-aligned in the 640-1023px Tablet band instead, matching the left-aligned heading/ subheading — plain centered there read as floating/ disconnected from that column (reported 2026-07-29); back to a centered row at lg:. */}

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

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

))}

1.120+ Menschen vertrauen einfach-produktiv

{/* Image — bleeds to the true edge at every breakpoint (never padded). Below sm: (stacked layout, moved down from the old md: 768px) 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 sm:+ (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 sm: — 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 sm: instead; Reveal's fade kept from sm: up, where the image is beside the text with plenty of room and this was never an issue. */}