/* ============================================================================ i18n length-tolerance German and Dutch run ~30% longer than English. Every rule here is scoped to html[lang="de"] / html[lang="nl"], so the English site is byte-for-byte unaffected. Loaded site-wide via base.njk (no-op on EN pages). hyphens:auto uses the language-correct hyphenation dictionary (the is set per locale) to break long compound words natively instead of letting them overflow their container. It only fires when a word would otherwise not fit, so short text is untouched. overflow-wrap is the hard fallback. ============================================================================ */ html[lang="de"], html[lang="nl"] { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* Large display headings are the tightest slots — let German/Dutch wrap and hyphenate cleanly here rather than overflow (e.g. the phase-accordion title). */ html[lang="de"] .pd-v4 .pd-title, html[lang="nl"] .pd-v4 .pd-title { max-width: 24ch; } /* Header nav: German/Dutch items + CTA run wider, so in the desktop-nav laptop band (burger takes over at <=1200) the row crowds and clips the CTA. Measured (Pass 2, 2026-06-22): at 1201px the row overflows the viewport by up to +123px on NL (links intrinsic width ~876px) and +86px on DE; both clear by ~1366px. The earlier tighten (gap/font/cta only) didn't account for the D3 language picker's "DE/NL" code span (~30px) added afterwards, which re-pushed the CTA past the edge. This block reclaims the width four ways, all scoped to DE/NL so English + wide screens (>=1481) stay byte-for-byte untouched: 1. tighten the outer nav grid gap (two gaps, ~28px saved) 2. tighten the inter-item gap inside .links 3. drop the nav link + CTA font to 13px in this band only 4. globe-only language trigger here (hide the code span) — the current language is still marked inside the dropdown, so no information is lost; this returns the ~30px the D3 code span cost. Pairs with the shortened DE/NL cta.book_call label ("Beratung buchen" / "Plan een gesprek"). */ @media (min-width: 1201px) and (max-width: 1480px) { html[lang="de"] .nav-a-in, html[lang="nl"] .nav-a-in { gap: clamp(14px, 1.4vw, 28px); } html[lang="de"] .nav-a .links, html[lang="nl"] .nav-a .links { gap: clamp(7px, 0.85vw, 18px); } html[lang="de"] .nav-a .links > li > a, html[lang="nl"] .nav-a .links > li > a { font-size: 13px; } html[lang="de"] .nav-lang-code, html[lang="nl"] .nav-lang-code { display: none; } html[lang="de"] .nav-a .cta, html[lang="nl"] .nav-a .cta { padding: 9px 12px; font-size: 13px; gap: 6px; } } /* Closing CTA band (.cta-pathways): the big serif arrow label is white-space:nowrap so the English labels ("Free download", "Request a pilot") stay on one line. The German/Dutch labels ("Kostenlos herunterladen") are longer than the 1/3 cell at that size, so let them wrap here — keeps the cell, and the grid (repeat(3,minmax(0,1fr))), contained. English is untouched. */ html[lang="de"] .cta-pathways .cell .arr > span, html[lang="nl"] .cta-pathways .cell .arr > span { white-space: normal; overflow-wrap: break-word; } /* Lead-magnet role selector (.lm-form__roles, defined in each pack page's inline