/* * Warum wir — sticky-scroll section. Each of the three blocks pins its own heading while * its own paired text scrolls past; the next block's heading takes over the moment the * previous block's bottom edge passes the sticky offset. Reference: solidbold.at/leistungen * (Brand Identity / Brand Story sections) — same per-block sticky mechanic, own copy/scope, * no JS needed since position:sticky's containing block is each .nn-why-block itself. * * Since 2026-08-24 follows the site-wide Light/Dark switcher (see the "Light/Dark- * Konvention" comment in nav.css) like every other pattern — sets no background of its own * (relies on 's, see style.css), only its text/accent tokens switch here. Self- * contained tokens rather than reusing .nn-section from leistungen.css — same * one-pattern-owns-its-CSS convention as the rest of this theme (see hero.css/cta-band.css * duplicating the same --hero-* tokens rather than sharing them across sibling sections). * * Large screens (from roughly 1900px, e.g. 2560x1440): the clamp() ceilings and the * section's max-width column were raised the same way as cro.css's own header note * describes (max-width 1400px to 1750px, heading/block-gap ceilings scaled up similarly), * the vw/vh coefficient in each clamp left untouched. That lets the section keep growing * past the point where the old, tighter ceilings used to plateau, instead of freezing * early and leaving excess empty margin on very wide screens. * * 2026-08-28: raised again to match the CRO-family pages (cro.css/google-ads.css/ * social-ads.css), whose own .wrap caps at 2200px. max-width 1750px to 2200px * (ratio ~1.257), every clamp() ceiling below scaled by the same ratio, min and vw/vh * coefficient left untouched. */ .nn-why, .nn-why *, .nn-why *::before, .nn-why *::after { box-sizing: border-box; } .nn-why { --ink-on-paper: #12211a; --ink-on-paper-muted: #5c6d64; --line-light: #dfe8e2; --jade: #288760; padding: clamp(3rem, 9vh, 10.06rem) clamp(1.5rem, 5vw, 6.6rem); max-width: 2200px; margin: 0 auto; color: var(--ink-on-paper); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .nn-why { --ink-on-paper: #e7e9ec; --ink-on-paper-muted: #b0b5bf; --line-light: #22362c; --jade: #288760; } } html[data-theme="dark"] .nn-why { --ink-on-paper: #e7e9ec; --ink-on-paper-muted: #b0b5bf; --line-light: #22362c; --jade: #288760; } .nn-why-head { align-items: center; text-align: center; /* WP's own default flex-vertical block gap (2rem/32px) otherwise adds on top of the kicker's margin-bottom below (unlike leistungen.css's equivalent wrapper, this one doesn't get its child margins reset to 0 by WP's flex-layout styles) — zeroed here so the kicker's own margin-bottom is the only spacing, matching every other kicker */ gap: 0; margin-bottom: clamp(2.5rem, 6vh, 6.6rem); } .nn-why .nn-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade); margin: 0 0 0.75rem; } .nn-why .nn-h2 { font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; text-transform: uppercase; font-size: clamp(2rem, 4.5vw, 5.34rem); color: var(--ink-on-paper); margin: 0 auto; max-width: 24ch; } .nn-why-block { display: flex; align-items: flex-start; justify-content: center; gap: clamp(2rem, 6vw, 10.06rem); /* enough scroll room for the sticky-pin effect (each block's heading stays pinned while its own text scrolls past) to actually read as a pin, not a flash. Capped (unlike every other vh-based value in this file) because 55vh alone grows unbounded on tall viewports (2560x1440 -> 792px) far past what the short block text needs, leaving large empty gaps below the last paragraph of each block — the ceiling keeps normal desktop heights (~900-1080px) unaffected while reining in very tall screens. */ min-height: clamp(20rem, 55vh, 36rem); border-top: 1px solid var(--line-light); /* same value top and bottom so the divider line between two blocks sits with identical breathing room on both sides (space to the text above it and to the heading/text below it), instead of only controlling the gap on one side. */ padding-top: clamp(2rem, 5vh, 5.03rem); padding-bottom: clamp(2rem, 5vh, 5.03rem); } .nn-why-block:first-child { border-top: none; } .nn-why-sticky { position: sticky; /* clears the fixed nav bar (nav.css .nn-nav, ~94px tall in practice — the old 88px min here was actually LESS than the nav's real height, so the sticky heading had no visible gap at all, sitting flush against/just under the nav) plus a clearly visible gap below it, so there's always a bit of background showing between the nav and "Wie wir arbeiten"/"Warum mit uns"/"Was ist der Vorteil?" while pinned */ top: clamp(116px, 15vh, 150px); flex: 0 0 clamp(12rem, 28%, 32.69rem); display: flex; align-items: baseline; gap: 1rem; } .nn-why-num { font-size: 0.85rem; font-weight: 700; color: var(--jade); letter-spacing: 0.05em; } .nn-why-heading { font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(1.5rem, 2.6vw, 3.46rem); color: var(--ink-on-paper); margin: 0; } .nn-why-text { flex: 1 1 auto; max-width: 68ch; padding-top: 0.35rem; } /* display:flex + align-items:baseline instead of an absolutely-positioned ::before with a guessed "top" offset — a fixed em offset only happened to line up with this exact font-size/line-height combo and read as "too high" the moment either changed. Flex baseline alignment lines the arrow up with the first line's actual text baseline regardless of font metrics. */ .nn-why-text p { display: flex; align-items: baseline; gap: 0.65rem; font-size: 1.05rem; line-height: 1.65; color: var(--ink-on-paper-muted); margin: 0 0 1.1rem; } /* Each paragraph's own text is wrapped in one .nn-why-line span (see warum-wir.php) instead of sitting directly in the flex container as bare text. Flexbox treats EVERY contiguous run of inline content as its own separate flex item — with plain text that's harmless (one run = one item, same as before), but the moment a paragraph contains a (bold keywords, added later), the text splits into several runs ("before", the itself, "after") that each became their own flex item sitting in a row instead of one wrapping paragraph — text visibly broke into disjointed side-by-side fragments. Wrapping everything in one span keeps the flex container down to exactly two items (the ::before arrow, this span), so the arrow still gets its baseline-aligned position, while everything inside the span — including any — flows and wraps like normal paragraph text again. */ .nn-why-text p .nn-why-line { flex: 1 1 auto; } /* green arrow bullet ahead of each paragraph, same accent + motif as the arrows used elsewhere on the page (Leistungen row arrows, footer/CTA links) — sized up and set in a heavy-stroke glyph (plain "→" reads too thin/quiet at bullet size) so it actually pops as a bullet mark instead of blending into the body copy. */ .nn-why-text p::before { content: "➜"; flex: none; font-size: 1.35em; color: var(--jade); font-weight: 700; -webkit-text-stroke: 0.5px var(--jade); } .nn-why-text p:last-child { margin-bottom: 0; } /* two-column sticky layout doesn't work on narrow screens — stack instead, no pinning */ @media (max-width: 780px) { .nn-why-block { flex-direction: column; min-height: 0; gap: 1rem; } .nn-why-sticky { position: static; flex: none; } }