/* Voorpagina van Lenselink Studio in de huisstijl (stijl.css, docs/STIJL.md): licht, hoekig en vlak, navy met oranje voor
   de hoofdactie, kleine labels in hoofdletters. Kop en voet zijn die van de andere Studio-pagina's (layout in pages.ts).
   De keuken staat op hetzelfde lichte werkvlak als in de Studio zelf. */
.pl-page { background: var(--lz-wit); }
.pl { max-width: var(--lz-breed); margin: 0 auto; padding: 0 24px 72px; }
.pl h1, .pl h2 { color: var(--lz-navy); letter-spacing: -.02em; }
.pl h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 800; margin: 6px 0 12px; }
.pl p { color: var(--lz-tekst-2); line-height: 1.6; }
.pl .lz-label { margin-bottom: 4px; }
.pl-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-cta .btn { white-space: nowrap; }
.pl-link { color: var(--lz-navy); font-weight: 600; text-underline-offset: 4px; }
.pl-link:hover { color: var(--lz-oranje-tekst); }

/* hero: tekst links, de keuken rechts op het werkvlak van de Studio, met een schuif naar de röntgenweergave */
.pl-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 6vh, 64px) 0 clamp(36px, 6vh, 56px); }
.pl-hero h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; font-weight: 800; margin: 10px 0 18px; max-width: 15ch; }
.pl-lead { font-size: clamp(16px, 1.2vw, 18px); max-width: 46ch; margin: 0 0 26px; }
.pl-note { margin: 14px 0 0; font-size: 13.5px; color: var(--lz-grijs) !important; }
/* van de render naar de röntgenweergave (Beau, 15-10): twee beelden uit dezelfde camera, het tweede wordt vanaf de schuif
   getoond; de render vult het vlak, zonder grijs vlak of rand. Het knopje is rond (bediening boven een beeld, .lz-rond). */
.pl-compare { position: relative; margin: 0; user-select: none; }
.pl-compare img { display: block; width: 100%; height: auto; }
.pl-cmp-b { position: absolute; inset: 0; height: 100%; clip-path: inset(0 0 0 var(--pos)); }
.pl-cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--lz-wit); pointer-events: none; }
.pl-cmp-knop { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; background: var(--lz-wit); color: var(--lz-navy); box-shadow: 0 4px 14px rgba(13, 30, 39, .28); }
.pl-cmp-knop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-cmp-range { position: absolute; inset: 0; }
.pl-cmp-range input { width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pl-cmp-range input:focus-visible { opacity: .01; }
.pl-compare:has(input:focus-visible) .pl-cmp-knop { outline: 2px solid var(--lz-oranje); outline-offset: 2px; }
.pl-compare figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none;
  font: 600 12px/1.3 var(--lz-font); color: var(--lz-navy); }
/* de bijschriften als labeltjes op het beeld, zodat ze op elke ondergrond leesbaar zijn */
.pl-compare figcaption > span { padding: 5px 9px; background: rgba(255, 255, 255, .9); }

/* twee routes in één kader: de klant op wit, de vakman op het lichte vlak met een tabel */
.pl-routes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--lz-rand); }
.pl-route { padding: clamp(22px, 3vw, 40px); }
.pl-route p { max-width: 54ch; margin: 0 0 20px; }
.pl-route-pro { background: var(--lz-vlak); border-left: 1px solid var(--lz-rand); }
.pl-stappen { list-style: none; counter-reset: s; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.pl-stappen li { counter-increment: s; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--lz-navy); }
.pl-stappen li::before { content: counter(s); width: 24px; height: 24px; display: inline-grid; place-items: center; flex: none; background: var(--lz-vlak-2); font: 600 12px var(--lz-font); color: var(--lz-navy); }

/* tabellen: het begrip links (gewone letter, grijs), de waarde rechts, lijnen ertussen */
.pl-tabel { margin: 0 0 24px; border-top: 1px solid var(--lz-rand); }
.pl-tabel div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--lz-rand); }
.pl-tabel dt { font: 600 14px/1.6 var(--lz-font); color: var(--lz-grijs); }
.pl-tabel dd { margin: 0; color: var(--lz-navy); }

/* secties */
.pl-sectie { padding-top: clamp(48px, 8vh, 88px); }
.pl-kop p { max-width: 42ch; }
.pl-twee { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); }
.pl-twee .pl-tabel { margin: 0; }

/* van ontwerp tot levering: genummerd langs een lijn, de laatste stap oranje */
.pl-flow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pl-flow li { position: relative; display: grid; gap: 6px; align-content: start; padding: 44px 22px 0 0; }
.pl-flow li::after { content: ''; position: absolute; top: 14px; left: 28px; right: 0; height: 1px; background: var(--lz-rand); }
.pl-flow li:last-child::after { display: none; }
.pl-n { position: absolute; top: 0; left: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--lz-navy); color: #fff; font: 600 12.5px var(--lz-font); }
.pl-flow li.is-eind .pl-n { background: var(--lz-oranje); }
.pl-flow strong { font-size: 16px; color: var(--lz-navy); }
.pl-flow li > span:last-child { color: var(--lz-tekst-2); line-height: 1.55; font-size: 14.5px; }

/* vragen */
.pl-faq details { border-bottom: 1px solid var(--lz-rand); }
.pl-faq details:first-child { border-top: 1px solid var(--lz-rand); }
.pl-faq summary { cursor: pointer; padding: 15px 32px 15px 0; font-weight: 600; color: var(--lz-navy); list-style: none; position: relative; }
.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: 400 20px var(--lz-font); color: var(--lz-grijs); }
.pl-faq details[open] summary::after { content: '–'; }
.pl-faq summary:hover { color: var(--lz-oranje-tekst); }
.pl-faq details p { margin: 0 0 18px; max-width: 64ch; }

/* slot: de navy band zoals de kop */
.pl-eind { margin-top: clamp(56px, 9vh, 96px); padding: clamp(24px, 3.5vw, 44px); background: var(--lz-navy); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pl-eind h2 { color: #fff; margin: 4px 0 0; }
.pl-eind .lz-label { color: var(--lz-navy-zacht); }
.pl-eind .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.pl-eind .btn-outline:hover { border-color: #fff; color: #fff; }

@media (max-width: 980px) {
  .pl-hero, .pl-routes, .pl-twee { grid-template-columns: minmax(0, 1fr); }
  .pl-route-pro { border-left: 0; border-top: 1px solid var(--lz-rand); }
  .pl-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pl-flow li { padding: 3px 0 0 44px; }
  .pl-flow li::after { top: 28px; bottom: -20px; left: 14px; right: auto; width: 1px; height: auto; }
}
@media (max-width: 640px) {
  .pl { padding: 0 16px 56px; }
  .pl-tabel div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pl-cap-lang { display: none; }
  .pl-cta .btn { flex: 1 1 auto; }
}

/* bij springen naar een blok (bijv. "Voor keukenbedrijven") ruimte onder de menubalk, in plaats van er direct tegenaan (Beau, 15-10) */
.pl-page main [id] { scroll-margin-top: 40px; }