/* www.lenselink.nl — aanvulling op app.css (dezelfde kleuren, letters, knoppen en banden als de Zaaglijst).
   De menubalk is dezelfde navy balk als in de Zaaglijst en de planner (app.css); daaronder is www licht: lichte
   paginakoppen, de tekening op papier. De voet is weer navy.
   Verder wat de Zaaglijst niet heeft: bewerkingenbalk, tekening, machinetabel, tijdlijn en het aanvraagformulier. */

/* één breedte voor de hele site, dezelfde als de zaaglijst en de Studio (app.css .wrap: --lz-breed met 24 px binnenrand, op de
   telefoon 16 px): het logo in de kop, de inhoud en de voet beginnen op dezelfde lijn */
.www { --ww: min(calc(var(--lz-breed) - 48px), calc(100% - 48px)); }
@media (max-width: 640px) { .www { --ww: calc(100% - 32px); } }
.www .wrap, .www .hdr-in, .www .footer-in, .www .hdr-panel-links, .www .hdr-panel-vat { width: var(--ww); max-width: none; padding-left: 0; padding-right: 0; }
/* smalle pagina's (inloggen, account): op de lijn van het logo, maar een leesbare breedte */
.www .wrap.narrow-sm > * { max-width: 480px; }
.www .wrap.narrow-sm.auth-wide > * { max-width: 720px; }

/* kop: navy zoals de Zaaglijst */
.www .hdr-icon.w-hdr-cta, .www .hdr-icon.w-hdr-cta:hover { color: var(--lz-wit); }
/* op de homepage een witte kop (Beau, 15-10: zoals op de oude site in Framer), zodat de homepage zich onderscheidt; het
   donkere logo (layout.ts lichteKop), donkere menulinks met het oranje streepje, en op de telefoon een licht menu */
.www .hdr-licht { background: var(--lz-wit); color: var(--lz-navy); border-bottom: 1px solid var(--lz-vlak-2); } /* subtiele rand (Beau, 16-10) */
.www .hdr-licht .brand-sub { color: var(--lz-navy); }
/* "Hout & Plaat Bewerking" in hetzelfde blauw als "Lenselink" in het logo (Beau, 15-10) */
.www .hdr-licht .brand-sub.brand-pl span { color: var(--lz-route-interieur); border-left-color: var(--lz-rand); }
.www .hdr-licht .hdr-link { color: var(--lz-tekst-2); }
.www .hdr-licht .hdr-link:hover, .www .hdr-licht .hdr-link.is-on { color: var(--lz-navy); }
.www .hdr-licht .hdr-icon, .www .hdr-licht .hdr-burger { color: var(--lz-navy); border-color: var(--lz-lijn-sterk); }
.www .hdr-licht .hdr-icon:hover, .www .hdr-licht .hdr-burger:hover, .www .hdr-licht .hdr-icon.is-on { color: var(--lz-navy); background: var(--lz-vlak); border-color: var(--lz-navy); }
.www .hdr-licht .omg > summary { color: var(--lz-navy); }
.www .hdr-licht .hdr-panel { background: var(--lz-wit); border-top-color: var(--lz-rand); border-bottom-color: var(--lz-rand); box-shadow: 0 16px 32px rgba(13, 30, 39, .12); }
.www .hdr-licht .hdr-panel-links a { color: var(--lz-navy); border-bottom-color: var(--lz-rand); }
.www .hdr-licht .hdr-panel-links a.is-on { color: var(--lz-oranje-tekst); }
.www .hdr-licht .w-panel-tel { color: var(--lz-navy); }
/* de bewerkingenbalk: net niet wit, onder de witte kop */
.www .w-sub { background: var(--lz-vlak); color: var(--lz-tekst-2); border-bottom: 1px solid var(--line); }
.www .w-sub .step-link { color: var(--lz-tekst-2); }
.www .w-sub .step-link:hover, .www .w-sub .step-link.is-on { color: var(--ink); }
/* merk: hetzelfde als in de andere omgevingen (pages.ts subBrand): het logo, een streep en "Hout & Plaat Bewerking" */
.w-brand { flex: none; }
@media (max-width: 640px) { .w-brand span { display: none; } } /* op de telefoon alleen het logo */
.hdr-link svg { opacity: .55; margin-left: 2px; }
.w-hdr-cta { width: auto; padding: 0 16px; background: var(--orange); border-color: var(--orange); }
.w-hdr-cta:hover { background: var(--orange-2); border-color: var(--orange-2); }
.hdr-panel-links a svg { margin-left: 6px; opacity: .55; }
.w-panel-foot { flex-direction: column; align-items: stretch; gap: 12px; }
.w-panel-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--lz-wit); font-weight: 600; text-decoration: none; }
@media (min-width: 761px) { .w-panel-foot { display: flex; } }
.w-sub-nav { overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.w-sub-nav::-webkit-scrollbar { display: none; }
.w-sub .step-link { font-weight: 500; font-size: 13.5px; }
.w-sub .step-link.is-on { font-weight: 600; }
.w-sub-tel a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.w-sub-tel a:hover { color: var(--orange); }
.w-sub-tel svg { color: var(--orange); }
/* logo, vijf menu-items en Inloggen passen naast elkaar; smaller dan 1080 px (zoals de Zaaglijst) achter de menuknop */
@media (max-width: 1080px) {
  .www .hdr-links { display: none; }
  .www .hdr-actions { margin-left: auto; }
  .www .hdr-burger { display: inline-flex; }
}
@media (max-width: 640px) {
  .w-hdr-cta { padding: 0 12px; font-size: 13.5px; }
  .w-sub .steps-nav { justify-content: flex-start; }
  .w-sub .step-link { padding: 0 10px; font-size: 13px; }
  .w-sub .step-link:first-child { padding-left: 0; }
}
@media (max-width: 760px) { .w-sub-tel { display: none; } }

/* voet: dezelfde opbouw en regels als de voet van de Zaaglijst (app.css, .zl .footer) */
.www .footer a { color: var(--lz-navy-tekst); text-decoration: none; }
.www .footer a:hover { color: var(--lz-wit); }
.www .footer .mono-label { font: 600 13px/1.4 var(--lz-font); letter-spacing: 0; text-transform: none; color: var(--lz-wit); height: 26px; display: flex; align-items: center; margin: 0 0 14px; }
.www .footer-in p { margin: 0; line-height: 1.7; }
.www .footer-in p + p { margin-top: 12px; }
.www .footer .footer-brand { --bh: 26px; margin: 0 0 14px; }

/* kop van de pagina: licht, tekst links en een foto rechts */
.www .eyebrow-dark span { color: var(--ink); opacity: .45; }
.w-ph { background: var(--grey); color: var(--ink); padding: 44px 0 48px; border-bottom: 1px solid var(--line); }
.w-ph h1 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 14px; max-width: 820px; }
.w-ph .lead { max-width: 680px; margin: 0 0 22px; color: var(--lz-tekst-2); }
.w-ph .cta-row { margin-bottom: 0; }
.w-crumbs { margin: 0 0 18px; }
.w-ph .chip { color: var(--ink); border-color: var(--line-2); background: var(--lz-wit); }
.w-ph .chip:hover { color: var(--ink); border-color: var(--ink); }
.w-ph .chip.chip-on { color: var(--lz-wit); background: var(--orange); border-color: var(--orange); }
.w-ph-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.w-ph-photo .w-ph-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.w-ph-fig { margin: 0; overflow: hidden; background: var(--lz-lijn); aspect-ratio: 4 / 3; }
.w-ph-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.w-facts li { background: var(--navy); border-color: var(--navy); }
.w-facts strong { color: var(--lz-wit); }
.w-facts span { color: var(--lz-rand); }
.www .lp-facts strong { white-space: nowrap; }
.w-ph .hero-alt { color: var(--muted); }
.w-ph .hero-alt a { color: var(--ink); }
.w-hero-sm.w-ph { padding: 36px 0 36px; }
.w-hero-sm h1 { font-size: clamp(28px, 3.4vw, 40px); }
.www .post-hero .post-meta { color: var(--muted); }
@media (max-width: 900px) { .w-ph-photo .w-ph-in { grid-template-columns: minmax(0, 1fr); gap: 28px; } .w-ph-fig { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .w-ph { padding: 28px 0 32px; } }

/* home: licht, de foto als plaat met maatlijnen zoals op een werktekening */
.w-hero { padding: 64px 0 72px; background: var(--lz-wit); }
.w-hero-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.w-hero .hero-copy { max-width: 600px; }
.w-hero h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 18px; color: var(--ink); }
.w-hero .lead { color: var(--lz-tekst-2); max-width: 560px; margin: 0 0 26px; }
.w-hero .checks { color: var(--lz-tekst-2); margin-top: 26px; }
.w-plate { --gap: 34px; margin: 0; }
.w-plate-draw { position: relative; padding: var(--gap) 0 0 var(--gap); }
.w-plate-img { aspect-ratio: 3100 / 2200; overflow: hidden; background: var(--grey); box-shadow: 0 0 0 1px rgba(13,30,39,.12); }
.w-plate-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.w-plate-dim { position: absolute; color: var(--orange-ink); font: 500 13px var(--mono); }
.w-plate-dim span { position: absolute; background: var(--lz-wit); padding: 0 8px; line-height: 1; }
/* breedte: lijn boven de plaat met eindstreepjes */
.w-plate-w { left: var(--gap); right: 0; top: 0; height: 22px; border-left: 1px solid var(--orange); border-right: 1px solid var(--orange); }
.w-plate-w::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; border-top: 1px solid var(--orange); }
.w-plate-w span { left: 50%; top: 4px; transform: translateX(-50%); }
/* hoogte: lijn links van de plaat */
.w-plate-h { top: var(--gap); left: 0; bottom: 0; width: 22px; border-top: 1px solid var(--orange); border-bottom: 1px solid var(--orange); }
.w-plate-h::before { content: ''; position: absolute; top: 0; bottom: 0; left: 11px; border-left: 1px solid var(--orange); }
.w-plate-h span { top: 50%; left: 11px; transform: translate(-50%, -50%) rotate(-90deg); padding: 0 8px; }
.w-plate figcaption { margin: 12px 0 0 var(--gap); color: var(--muted); }
@media (max-width: 960px) {
  .w-hero { padding: 36px 0 48px; }
  .w-hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.w-hero + .trust { border-top: 1px solid var(--line); }
@media (max-width: 640px) { .w-plate { --gap: 28px; } .w-plate-dim { font-size: 12px; } }

/* slotband: licht, met een oranje streep boven */
.w-final { background: var(--grey); color: var(--ink); border-top: 3px solid var(--orange); }
.w-final .lead { max-width: 620px; margin: 0; color: var(--lz-tekst-2); }

/* kaarten en tegels */
.w-who { color: var(--orange-ink); margin: 0 0 -4px; }
.lp-type-body h3 + p { margin-top: 0; }
.w-specs div { grid-template-columns: 96px 1fr; }
/* tekst naast de foto: mag smaller worden, lange woorden (Productontwikkeling) breken af; de foto blijft in de tegel */
.w-tiles .tile { overflow: hidden; }
.w-tiles .tile > span:first-child { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.w-tiles .tile-sub { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-proj-tiles .kast-tile-img { background: var(--grey); }
.w-proj-tiles .kast-tile-img img { object-fit: cover; }
.w-proj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-proj-list .kast-tile-img { aspect-ratio: 16 / 10; }
.w-proj-list h2 { margin: 0; }
.w-tags { margin-top: auto; padding-top: 8px; }
.w-proj-list .kast-tile:hover { border-color: var(--line); box-shadow: none; }
@media (max-width: 760px) { .w-proj-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .kast-tiles.w-proj-tiles { grid-template-columns: minmax(0, 1fr); } }
.w-fig { margin: 0; overflow: hidden; }
.w-fig img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.w-note { margin: 24px 0 0; }

/* banden: grijs met ruimte onder (de Zaaglijst-band heeft onder weinig, voor de FAQ) */
.band-grey.w-band { padding-bottom: 72px; }
.w-split-top { align-items: start; }
.w-split-mid { align-items: center; margin-bottom: 40px; }

/* stappen: vijf in een rij */
.steps.w-steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.w-steps .step { padding: 22px; }
.w-steps .step h3 { font-size: 17px; }
@media (max-width: 1080px) { .steps.w-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .steps.w-steps { grid-template-columns: minmax(0, 1fr); } }

/* donker paneel met afbeelding (ruimteplanner, werken bij) */
.w-plan { align-items: center; }
.w-plan-img { display: block; overflow: hidden; background: var(--lz-wit); }
.w-plan-light { padding: 32px; }
.w-plan-light .lead { margin: 0 0 20px; }
.w-plan-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.w-zaag-tip { padding: 32px; }
.w-zaag-tip .lead-light { margin: 8px 0 20px; }
.w-file-chips { margin-top: 8px; }
.w-file-chips .chip-light { cursor: default; font-family: var(--mono); font-weight: 500; }

/* de nesting-tekening: tekent zich één keer in */
.w-nest { margin: 0; padding: 36px 32px 24px; background: var(--lz-wit); }
.w-nest figcaption { margin-top: 12px; color: var(--muted); }
.nest { width: 100%; height: auto; overflow: visible; display: block; }
.nest .nest-sheet { fill: var(--lz-vlak); stroke: rgba(13,30,39,.3); stroke-width: 1; }
.nest .p { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: w-draw 1.1s cubic-bezier(.5,0,.3,1) both; animation-delay: var(--d); }
.nest .p.o { stroke: var(--orange); stroke-width: 1.8; }
.nest .h { fill: none; stroke: rgba(13,30,39,.5); stroke-width: 1; animation: w-show .4s ease-out both; animation-delay: calc(var(--d) + .5s); }
.nest .dim path { stroke: var(--orange); stroke-width: 1; fill: none; }
.nest .dim .tick { stroke-width: 1.4; }
.nest .dim text { fill: var(--orange-ink); font: 500 15px var(--mono); }
@keyframes w-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes w-show { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nest .p, .nest .h { animation: none; } }

/* machinetabel met de bedmaat op schaal */
.w-machines-card { margin-top: 0; }
.w-machines tbody th { text-align: left; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); padding: 14px 12px; border-bottom: 1px solid var(--lz-vlak-2); white-space: normal; min-width: 180px; vertical-align: top; }
.w-machines td { padding-top: 14px; padding-bottom: 14px; }
.w-machines tbody tr:last-child th, .w-machines tbody tr:last-child td { border-bottom: 0; }
.w-dim { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.w-bed { width: 70px; height: auto; flex: none; }
.w-bed-max { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 2; }
.w-bed-this { fill: rgba(232,89,12,.14); stroke: var(--orange); stroke-width: 1.2; }
@media (max-width: 640px) {
  .w-machines thead { display: none; }
  .w-machines tr { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--lz-vlak-2); }
  .w-machines tbody tr:last-child { border-bottom: 0; }
  .w-machines tbody th, .w-machines td { border: 0; padding: 0; min-width: 0; }
}

/* artikel van een bewerking */
.w-article .prose ul:not(.lp-tags) { padding-left: 1.2em; }
.w-article .prose figure { margin: 1.6em 0; }
.w-article .prose figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.w-article .prose figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.w-uses { margin: 0; }
.w-uses li { font-size: 14px; padding: 5px 12px; }
.w-spec dl { margin: 10px 0 18px; }
.w-spec dl > div { padding: 9px 0; border-top: 1px solid var(--line); }
.w-spec dl > div:first-child { border-top: 0; padding-top: 0; }
.w-spec dt { font-size: 12.5px; color: var(--muted); }
.w-spec dd { margin: 0; font-weight: 600; font-size: 14.5px; }
.w-spec .small { margin: 12px 0 0; }
.w-side-nav a { color: var(--ink); text-decoration: none; }
.w-side-nav a[aria-current] { color: var(--orange-ink); font-weight: 700; }
.www .post-toc { display: block; }
.w-draft { color: var(--orange-ink); }

/* tijdlijn (een echte volgorde in tijd) */
/* geschiedenis op Ons bedrijf, in de huisstijl: per jaar een rij met een dunne lijn erboven (zoals de feiten op de homepage),
   het jaartal groot en dun, de kop klein en vet, de tekst smal en een foto rechts; ruim tussen de jaren */
.w-hist-intro { max-width: 640px; }
.w-hist { list-style: none; margin: 40px 0 0; padding: 0; }
.w-hist li { display: grid; grid-template-columns: 132px minmax(0, 560px) 320px; justify-content: space-between; column-gap: 48px; padding: 44px 0; border-top: 1px solid var(--lz-lijn); }
.w-hist li:last-child { border-bottom: 1px solid var(--lz-lijn); }
.w-hist-jaar { display: block; font-size: 44px; line-height: 1; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.w-hist h3 { margin: 4px 0 12px; font-size: 20px; line-height: 1.3; color: var(--ink); }
.w-hist p { margin: 0; line-height: 1.65; color: var(--lz-tekst-2); }
.w-hist-logo { display: block; margin-top: 22px; }
.w-hist-logo img { display: block; height: 36px; width: auto; max-width: 100%; }
.w-hist-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lz-vlak); }
.w-hist-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .w-hist li { grid-template-columns: 100px minmax(0, 1fr) 260px; column-gap: 32px; } .w-hist-jaar { font-size: 36px; } }
@media (max-width: 760px) {
  .w-hist li { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 32px 0; }
  .w-hist-jaar { font-size: 32px; }
  .w-hist-foto { margin-top: 10px; }
}
/* certificering: tekst en daaronder de bosfoto met de keurmerken over de volle breedte */
.w-cert-tekst { max-width: 720px; }
.w-cert-foto { display: block; margin-top: 32px; aspect-ratio: 1024 / 359; overflow: hidden; background: var(--line); }
.w-cert-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .w-cert-foto { aspect-ratio: 16 / 9; } }

/* contact */
.w-contact address { font-style: normal; margin: 12px 0 16px; line-height: 1.6; }
.w-contact .h-lg { margin-top: 6px; }
.w-big { font-size: clamp(19px, 2vw, 22px); font-weight: 700; line-height: 1.5; margin: 0 0 18px; overflow-wrap: anywhere; }
.w-big a { color: var(--ink); text-decoration: none; }
.w-big a:hover { color: var(--orange-ink); }
.w-kv { margin: 18px 0 0; font-size: 14px; }
.w-kv div { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 6px 0; border-top: 1px solid var(--line); }
.w-kv dt { color: var(--muted); }
.w-kv dd { margin: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

/* aanvraagformulier */
.w-form-page { padding-top: 40px; }
.w-form fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.w-form fieldset + fieldset { padding-top: 24px; border-top: 1px solid var(--line); }
.w-form legend { padding: 0; margin: 0 0 4px; }
.w-form label .muted { font-weight: 400; }
.w-form textarea { min-height: 120px; resize: vertical; width: 100%; }
.w-form .grid-2 > label { margin-top: 14px; }
.w-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.w-choice label { position: relative; display: block; margin: 0; border: 1.5px solid var(--line); padding: 12px 14px 12px 42px; cursor: pointer; font-weight: 400; background: var(--lz-wit); }
.w-choice label strong { display: block; font-weight: 700; font-size: 14.5px; }
.w-choice label span { font-size: 13px; color: var(--muted); }
.w-choice input { position: absolute; left: 14px; top: 15px; }
.w-choice label:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.w-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.w-opts label { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0 !important; height: var(--ctl); border: 1px solid var(--line-2); padding: 0 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.w-opts label:has(input:checked) { border-color: var(--navy); background: var(--navy); color: var(--lz-wit); }
.w-opts input { width: 16px; height: 16px; }
.w-drop { margin-top: 12px; border: 1.5px dashed var(--line-2); padding: 24px; text-align: center; background: var(--grey); cursor: pointer; }
.w-drop.is-over, .w-drop:hover { border-color: var(--orange); background: var(--orange-soft); }
.w-drop p { margin: 0; }
.w-drop .small { margin-top: 4px; }
.w-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.w-files li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); font-size: 14px; background: var(--lz-wit); }
.w-files .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-files .fsize { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.w-files button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; }
.w-form-actions { align-items: center; gap: 16px; flex-wrap: wrap; }
.w-side-dark { padding: 28px; }
.w-side-dark .lead-light { font-size: 15px; margin: 0 0 16px; }
.account-side .w-spec dl { margin-bottom: 12px; }
@media (max-width: 640px) { .w-choice { grid-template-columns: minmax(0, 1fr); } }

/* mijn lenselink */
.w-links a { display: block; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.w-links a:first-of-type { border-top: 0; }
.w-links strong { display: block; font-size: 14.5px; }
.w-links span { font-size: 13px; color: var(--muted); }
.w-links a:hover strong { color: var(--orange-ink); }
.w-links form { margin-top: 14px; }
.nowrap { white-space: nowrap; }
.status.s-in, .status.s-offerte { background: var(--info-soft); color: var(--info); }
.status.s-akkoord { background: var(--ok-soft); color: var(--ok); }
.status.s-afgewezen { background: var(--lz-rood-licht); color: var(--err); }

/* vier kolommen (bewerkingen en projecten) */
.lp-types.w-n4, .kast-tiles.w-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .lp-types.w-n4, .kast-tiles.w-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp-types.w-n4, .kast-tiles.w-n4 { grid-template-columns: minmax(0, 1fr); } }
.w-n4 .lp-type-img { aspect-ratio: 16 / 9; }
.w-type-dark { background: var(--navy); border-color: var(--navy); color: var(--lz-wit); }
.w-type-dark .lp-type-body { justify-content: center; padding: 24px; }
.w-type-dark h3 a { color: var(--lz-wit); }
.w-type-dark h3 a:hover { color: var(--lz-wit); text-decoration: underline; }
.w-type-dark .lp-type-body > p:not(.eyebrow) { color: var(--lz-rand); }
.w-type-dark .eyebrow { margin: 0; }
.w-intro { max-width: 760px; margin-bottom: 32px; }
.lp-split + .w-machines-card { margin-top: 8px; }
.w-article .prose ul.w-uses { padding-left: 0; }
/* bewerkingen als lichte tegels */
.w-tiles-light .tile { background: var(--lz-wit); border-color: var(--line); color: var(--ink); }
.w-tiles-light .tile:hover { color: var(--ink); border-color: var(--orange); background: var(--lz-wit); }
.w-tiles-light .tile-sub { color: var(--muted); }
.w-tiles-light .tile-img { background-color: var(--grey); }
.w-tiles .tile-img { background-color: rgba(255,255,255,.08); }
.status.s-niet { background: var(--lz-rood-licht); color: var(--err); }

/* offerte voor de klant */
.w-offer tfoot td { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
.w-offer tfoot tr:first-child td { border-top: 1px solid var(--ink); padding-top: 12px; }
.w-offer-total td { font-weight: 800; font-size: 16px; }
.w-intro-text { margin: 4px 0 18px; }
.w-intro-text p { margin: 0 0 10px; }
.w-offer-facts { margin-top: 20px; }
.w-offer-facts div { grid-template-columns: 110px minmax(0, 1fr); }
.w-offer-facts dd { font-family: inherit; font-size: 14px; }
.w-accept-total { font-size: 28px; font-weight: 800; margin: 4px 0 6px; letter-spacing: -0.02em; }
.w-accept .check { flex-direction: row !important; align-items: flex-start; font-weight: 500 !important; }
.w-accept .check input { margin-top: 2px; flex: none; }
.w-accept .btn-block { margin-top: 18px; }
.w-decline summary { cursor: pointer; font-weight: 700; }
.w-decline .form { margin-top: 8px; }
.w-decline .btn { margin-top: 12px; }
.w-reply { font-size: 16px; }
.w-steer { margin-top: 14px; padding: 16px 18px; background: var(--orange-soft); border-left: 3px solid var(--orange); }
.w-steer p { margin: 0 0 10px; }
.w-steer p:last-child { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.w-delen { margin-top: 18px; border: 1px solid var(--line); padding: 12px 16px; }
.w-delen summary { cursor: pointer; }
.w-delen[open] summary { margin-bottom: 6px; }
.w-delen-table td { padding: 6px 4px; }
.w-delen-table input, .w-delen-table select { width: 100%; min-width: 0; }
.w-delen-table td:nth-child(2), .w-delen-table td:nth-child(3), .w-delen-table td:nth-child(4) { width: 92px; }
.w-delen-table td:first-child { min-width: 120px; }
.w-del { width: var(--ctl-sm); padding: 0; font-size: 18px; }
.w-delen > .btn-ghost { margin-top: 8px; }
.www .post-hero .post-cover { box-shadow: 0 0 0 1px rgba(13,30,39,.1); }

/* ---- home: drie grote fotopanelen met elk een eigen kleurverloop (navy, oranje, grijs), direct onder de kop */
.w-trio { padding: 20px 0 36px; background: var(--lz-wit); }
.w-trio-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.w-panel { --t: 13, 30, 39; --b: var(--t); position: relative; isolation: isolate; overflow: hidden; min-height: clamp(440px, 64vh, 640px); display: flex; align-items: flex-end; color: var(--lz-wit); background: rgb(var(--t)); }
.w-panel-oranje { --t: 214, 82, 12; --b: 168, 58, 4; } /* onderaan donkerder oranje: witte tekst blijft leesbaar */
.w-panel-grijs { --t: 58, 66, 72; }
.w-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.w-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--t), .55) 0%, rgba(var(--t), .62) 45%, rgba(var(--b), .96) 100%); transition: background .3s; }
.w-panel:hover > img { transform: scale(1.04); }
.w-panel:hover::before { background: linear-gradient(180deg, rgba(var(--t), .4) 0%, rgba(var(--t), .55) 45%, rgba(var(--b), .97) 100%); }
.w-panel-in { position: relative; padding: 26px 26px 28px; display: grid; gap: 8px; width: 100%; }
.w-panel h2 { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; letter-spacing: -0.03em; }
.w-panel h2 a { color: var(--lz-wit); text-decoration: none; }
.w-panel h2 a::after { content: ''; position: absolute; inset: 0; z-index: 0; } /* het hele paneel is klikbaar */
.w-panel-who { margin: 0; font-weight: 600; font-size: 15px; }
.w-panel-text { margin: 0; color: rgba(255,255,255,.9); font-size: 15px; line-height: 1.55; max-width: 34ch; }
@media (min-width: 961px) { .w-panel-text { min-height: 4.65em; } } /* drie regels: de titels staan op één lijn */
.w-panel-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.w-panel-cta .btn { pointer-events: none; }
.w-panel-alt { position: relative; z-index: 1; color: var(--lz-wit); font-weight: 600; font-size: 14px; text-underline-offset: 3px; }
.w-panel-alt:hover { color: var(--lz-wit); text-decoration-thickness: 2px; }
.w-panel:focus-within { outline: 3px solid var(--orange); outline-offset: 3px; }
.w-panel-oranje:focus-within { outline-color: var(--ink); }
.w-trio-intro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; padding: 26px 0 0; }
.w-trio-intro .eyebrow { margin: 0; }
.w-trio-lead { margin: 0; color: var(--lz-tekst-2); font-size: 16px; max-width: 760px; }
@media (max-width: 960px) {
  .w-trio-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .w-panel { min-height: 0; aspect-ratio: auto; }
  .w-panel-in { padding: 64px 20px 20px; }
  .w-panel-text { display: none; }
  .w-trio-intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) and (min-width: 600px) { .w-panel-text { display: block; } }
@media (prefers-reduced-motion: reduce) { .w-panel > img, .w-panel::before { transition: none; } .w-panel:hover > img { transform: none; } }

/* ---------------------------------------------------------------- homepage: de drie wegen, daaronder het bedrijf
   Bovenaan staan de drie online omgevingen (zaaglijst, interieurplanner, toelevering) als grote fotopanelen; dat is het
   ene opvallende element. Alles daaronder is rustig: wit en lichtgrijs, foto's uit de fabriek, ruime koppen. */
.w-hdr-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--lz-rand); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; padding: 0 6px; }
.w-hdr-tel svg { color: var(--orange); }
.w-hdr-tel:hover { color: var(--lz-wit); }
@media (max-width: 1599px) { .w-hdr-tel { display: none; } }

.w-home { padding: 36px 0 64px; background: var(--lz-wit); }
.w-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 40px; flex-wrap: wrap; margin: 0 0 24px; }
.w-home-head h1 { margin: 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; max-width: 16ch; }
.w-home-head p { margin: 0 0 6px; color: var(--lz-tekst-2); font-size: 17px; max-width: 34ch; }
.w-home .w-trio-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.w-home .w-panel { min-height: clamp(480px, 62vh, 660px); }
.w-panel-dom { margin: 0 0 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; color: rgba(255, 255, 255, .78); }

.w-about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.w-about .h-xl { margin-top: 0; }
.w-about .lead { max-width: 60ch; }
.w-about-fig { margin: 0; }
.w-about-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.w-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 28px 0 32px; }
.w-feiten div { padding: 14px 0; border-top: 1px solid var(--line); }
.w-feiten dt { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.w-feiten dd { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.w-sub-lead { margin: 8px 0 0; max-width: 62ch; }
.w-bew { padding-top: 24px; }
.w-mach { padding: 72px 0; }
.w-visit { background: var(--grey); border-top: 1px solid var(--line); padding: 56px 0; }
.w-visit-in { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.w-visit .lead { margin: 10px 0 0; }
.w-visit .btn svg { vertical-align: -3px; }

@media (max-width: 960px) {
  .w-home { padding: 24px 0 40px; }
  .w-home .w-trio-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .w-home .w-panel { min-height: 0; }
  .w-about-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .w-about-fig { order: -1; }
}
@media (max-width: 520px) { .w-feiten { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 961px) { .w-home .w-panel-text { min-height: 6.2em; } } /* vier regels: de namen staan op één lijn */

/* ======================================================================= www in de huisstijl (14-10-2026, docs/STIJL.md)
   Zoals de rest van Lenselink (stijl.css): rechte knoppen (één oranje hoofdactie, de rest omlijnd), rechte hoeken, vlak (geen
   verloop, geen schaduw), grote koppen dun. Oranje alleen voor de hoofdactie en de plek waar u bent.
   Geen mono-letter op www (Beau, 14-10: "ik wil van al die nutteloze kopjes in dat programmeerlettertype af"): de kopjes boven
   de koppen en boven de kaarten zijn weg; titels van kaders, tabelkoppen, maten en jaartallen staan in de gewone letter. */
.www { --w-papier: var(--lz-vlak); --w-grijs: var(--lz-grijs); --w-lijn: var(--lz-lijn); }
.www main h1, .www main h2 { font-weight: 800; letter-spacing: -.02em; text-wrap: balance; color: var(--lz-navy); }
.www main h3 { font-weight: 700; letter-spacing: -.01em; }
.www .h-xl { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; line-height: 1.1; }
.www .h-lg { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.15; }
.www main .lead { color: var(--lz-tekst-2); }
/* geen kopjes boven de koppen en de kaarten */
.www main .eyebrow, .www main .mono-label.w-who { display: none; }
/* titel van een kader (In het kort, Alle bewerkingen, Bezoekadres): een klein kopje in de gewone letter */
.www main .mono-label { display: block; font: 600 14px/1.4 var(--lz-font); letter-spacing: 0; text-transform: none; color: var(--lz-navy); margin: 0 0 10px; }
.www .step-num { font-family: var(--lz-font); }
/* knoppen: recht; oranje voor de ene hoofdactie, omlijnd voor de rest (app.css .btn-primary / .btn-outline) */
.www main .btn { height: var(--lz-veld); padding: 0 18px; font-size: 14px; }
.www main .btn-lg { height: var(--lz-veld-lg); padding: 0 22px; font-size: 15px; }
.www main .btn-outline { background: var(--lz-wit); color: var(--lz-navy); }
/* "alles bekijken": een kleine omlijnde knop */
.www main .btn-ghost { height: var(--lz-veld-sm); padding: 0 12px; border: 1px solid var(--lz-lijn-sterk); background: var(--lz-wit); color: var(--lz-navy); font-weight: 600; font-size: 13px; }
.www main .btn-ghost:hover { border-color: var(--lz-navy); color: var(--lz-navy); }
/* koppen van een sectie: lijn eronder */
.www main .section-head { padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--lz-rand); }
.www .band-grey { background: var(--lz-vlak); }
/* tabellen: kolomkoppen klein en grijs, in de gewone letter */
.www main .table thead th { font: 500 12px/1.4 var(--lz-font); letter-spacing: 0; text-transform: none; color: var(--lz-grijs); }
/* kaarten met foto (bewerkingen, soorten werk): foto + kop + tekst, recht en zonder schaduw */
.www main .lp-type { border: 1px solid var(--lz-rand); background: var(--lz-wit); box-shadow: none; }
.www main .lp-type-body { padding: 16px; }
.www main .lp-type h3 { font-size: 18px; font-weight: 700; }
.www main .lp-type h3 a { color: var(--lz-navy); text-decoration: none; }
.www main .lp-type h3 a:hover { text-decoration: underline; }
.www main .lp-type-body > p { color: var(--lz-tekst-2); }
.www main .w-type-dark { background: var(--lz-navy); border-color: var(--lz-navy); }
/* zes bewerkingen + het Zaaglijst-blok: het blok over twee kolommen, zodat het raster vol is */
@media (min-width: 1001px) { .www main .lp-types.w-n4 > .w-type-dark:nth-child(7) { grid-column: span 2; } }
.www main .w-type-dark .lp-type-body { padding: 22px; }
.www main .w-type-dark h3 a { color: var(--lz-wit); }
.www main .w-type-dark .lp-type-body > p, .www main .w-type-dark .eyebrow { color: var(--lz-navy-tekst); }
/* tegels met foto (soorten werk, projecten): recht, met een rand */
.www main .kast-tile { border: 1px solid var(--lz-rand); background: var(--lz-wit); box-shadow: none; }
.www main .kast-tile:hover { border-color: var(--lz-navy); box-shadow: none; }
.www main .kast-tile-body { padding: 14px 16px 16px; }
.www main .kast-tile-body strong, .www main .kast-tile-body h2, .www main .kast-tile-body h3 { font-weight: 700; }
/* maten, nummers en jaartallen in de gewone letter, met cijfers even breed */
.www main .w-kv dd, .www main .w-files .fsize { font-family: inherit; font-variant-numeric: tabular-nums; }

/* paginakop: navy met een zachte blauwe gloed rechtsboven (Beau, 14-10: "levendiger"), sluit aan op de menubalk */
.w-ph { background: radial-gradient(ellipse 70% 90% at 82% 8%, rgba(79, 147, 200, .32), rgba(13, 30, 39, 0) 70%), var(--lz-navy); color: var(--lz-wit); padding: clamp(36px, 5vw, 64px) 0; border-bottom: 0; }
.w-ph h1, .www main .w-ph h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.02em; color: var(--lz-wit); }
.w-ph .lead, .www .w-ph .lead { color: var(--lz-navy-tekst); font-size: 16px; }
.www main .w-ph .mono-label { color: var(--lz-navy-tekst); }
.www .eyebrow-dark span { color: inherit; opacity: .6; }
.w-ph .crumbs, .w-ph .crumbs a { color: var(--lz-rand); }
.w-ph .crumbs a:hover { color: var(--lz-wit); }
.w-ph .crumbs [aria-current] { color: var(--lz-wit); }
.www main .w-ph .btn-outline { background: transparent; color: var(--lz-wit); border-color: rgba(255, 255, 255, .45); }
.www main .w-ph .btn-outline:hover { background: var(--lz-wit); color: var(--navy); border-color: var(--lz-wit); }
.w-ph .chip { color: var(--lz-wit); border-color: rgba(255, 255, 255, .3); background: transparent; }
.w-ph .chip:hover { color: var(--lz-wit); border-color: var(--lz-wit); }
.w-ph .hero-alt, .w-ph .hero-alt a { color: var(--lz-rand); }
.w-ph-fig { background: var(--navy-2, var(--lz-navy-2)); }
/* feitjes in de kop: lijnen in plaats van donkere blokjes */
.w-ph .w-facts { gap: 20px 28px; }
.w-ph .w-facts li { background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); padding: 12px 0 0; }
.w-ph .w-facts strong { font-weight: 500; font-size: 20px; }
.w-ph .w-facts span { color: var(--lz-rand); }
.w-hero-sm.w-ph { padding: clamp(32px, 4vw, 48px) 0; }
.w-hero-sm h1 { font-size: clamp(30px, 3.6vw, 44px); }
.www .post-hero .post-meta { color: var(--lz-rand); }

/* zekerheden onder de kop: rustige grijze regel */
.www .trust { background: var(--lz-wit); border-bottom: 1px solid var(--w-lijn); }
.www .trust span { color: var(--w-grijs); font-size: 13px; }

/* slotband: navy blok binnen de breedte, zoals "Langskomen of bellen" op de homepage */
.w-final { background: none; color: var(--navy); border-top: 0; padding: 0 0 clamp(56px, 8vw, 104px); }
.w-final .final-in { background: var(--navy); color: var(--lz-wit); padding: clamp(28px, 4vw, 56px); text-align: left; align-items: flex-start; }
.w-final .h-xl { color: var(--lz-wit); }
.www main .w-final .lead { color: var(--lz-navy-tekst); }
.w-final .eyebrow, .www main .w-final .eyebrow { color: var(--lz-rand); }
.www main .w-final .btn-outline { background: transparent; color: var(--lz-wit); border-color: rgba(255, 255, 255, .45); }
.www main .w-final .btn-outline:hover { background: var(--lz-wit); color: var(--navy); border-color: var(--lz-wit); }

/* tegels van de bewerkingen: licht, rechte hoeken */
.www .w-tiles-light .tile:hover { border-color: var(--navy); }

/* machinetabel zoals op de homepage: geen kaart, bedmaat als navy omlijnd vlak */
.www .w-machines-card { background: none; border: 0; }
.www .w-machines thead th { padding: 0 16px 12px 0; color: var(--w-grijs); }
.www .w-machines tbody th { font-size: 14px; font-weight: 500; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--w-lijn); }
.www .w-machines td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--w-lijn); vertical-align: top; }
.www .w-machines td:last-child { color: var(--w-grijs); }
.www .w-machines tbody tr:last-child th, .www .w-machines tbody tr:last-child td { border-bottom: 1px solid var(--w-lijn); }
.www .w-machines .mono { font-family: inherit; font-variant-numeric: tabular-nums; }
.www .w-bed-max { stroke: var(--w-lijn); }
.www .w-bed-this { fill: var(--lz-wit); stroke: var(--navy); stroke-width: 1.5; }

/* ======================================================================= pagina bewerken (alleen beheerders, /js/www-cms.js) */
.cms-bar { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--navy); color: var(--lz-wit); box-shadow: 0 10px 30px rgba(13, 30, 39, .35); font: 600 14px Inter, system-ui, sans-serif; }
.cms-btn { height: 36px; padding: 0 16px; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; color: var(--lz-wit); font: inherit; cursor: pointer; }
.cms-btn:hover { border-color: var(--lz-wit); }
.cms-start, .cms-save { background: var(--orange); border-color: var(--orange); }
.cms-save:disabled { opacity: .45; cursor: default; }
.cms-status { padding: 0 8px; font-weight: 500; color: var(--lz-rand); }
.cms-on [data-cms] { outline: 1.5px dashed rgba(232, 89, 12, .7); outline-offset: 3px; cursor: text; min-width: 1ch; }
.cms-on [data-cms]:hover { outline-style: solid; }
.cms-on [data-cms]:focus { outline: 2px solid var(--orange); background: rgba(232, 89, 12, .06); }
.cms-on [data-cms-img] { outline: 1.5px dashed rgba(232, 89, 12, .7); outline-offset: -3px; }
.cms-foto { position: absolute; top: 10px; left: 10px; z-index: 5; height: 34px; padding: 0 14px; border: 0; background: var(--orange); color: var(--lz-wit); font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.cms-foto[hidden] { display: none; }
@media print { .cms-bar, .cms-foto { display: none !important; } }

/* ======================================================================= homepage (ontwerp oktober 2026, huisstijl 14-10)
   Bovenaan donkerblauw met een gloed en de kop, daarop de drie routes als fotokaarten die bij aanwijzen breder schuiven (15-10). Daarna wit:
   het bedrijf. Grote koppen dun, kleine vet, rechte knoppen: oranje alleen voor de hoofdactie. Navy kop en voet. */

.is-home { --wh-w: var(--ww); --wh-papier: var(--lz-vlak); --wh-grijs: var(--lz-grijs); --wh-lijn: var(--lz-rand); }
.is-home main { font-family: var(--lz-font); color: var(--lz-navy); }
.is-home main h1, .is-home main h2, .is-home main h3 { font-family: inherit; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.is-home main h3 { font-weight: 700; letter-spacing: -.01em; }
.wh-w { width: var(--wh-w); margin-inline: auto; }

/* bovenaan (Beau, 15-10): donkerblauw over de hele breedte met een blauwe gloed (zoals de kop van de andere pagina's) en
   de kop; daaroverheen de drie routes als hoge fotokaarten op de breedte van de pagina, even breed. Onderin elke kaart een
   kleurverloop in de kleur van de dienst, waarop witte tekst goed leesbaar is. Toelevering (oranje) staat eerst. */
.is-home { --wh-in: clamp(20px, 2.4vw, 30px); --wh-over: clamp(140px, 17vw, 260px); }
/* (Beau, 16-10: "het blauwe weghalen en alleen de gloed laten op een witte achtergrond") */
.wh-held { padding: clamp(36px, 4vw, 56px) 0 calc(var(--wh-over) + clamp(32px, 3.4vw, 48px)); color: var(--lz-navy); background: radial-gradient(ellipse 70% 90% at 82% 8%, rgba(79, 147, 200, .32), rgba(255, 255, 255, 0) 70%), var(--lz-wit); }
/* de kop en de zin links onder elkaar */
.wh-held .wh-w { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; animation: wh-op .8s cubic-bezier(.2, .7, .2, 1) both; }
.is-home .wh-held h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; color: var(--lz-navy); max-width: 22ch; }
.wh-held p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--lz-tekst-2); }
.wh-trio { position: relative; z-index: 1; margin: calc(-1 * var(--wh-over)) 0 0; padding: 0; list-style: none; display: flex; gap: 8px; height: clamp(440px, 40vw, 600px); container-type: inline-size; }
.wh-trio li { flex: 1 1 0; min-width: 0; display: flex; transition: flex-grow .7s cubic-bezier(.2, .7, .2, 1); }
.wh-paneel { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--wh-in) var(--wh-in) clamp(16px, 1.6vw, 22px); overflow: hidden; isolation: isolate; color: var(--lz-wit); text-decoration: none; background: var(--k); }
.wh-paneel:hover { color: var(--lz-wit); }
.wh-oranje { --k: var(--lz-oranje-2); }
.wh-blauw { --k: var(--lz-blauw); }
.wh-grijs { --k: var(--lz-route-interieur); }
.wh-paneel-foto { position: absolute; inset: 0; z-index: -2; }
.wh-paneel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .6s; }
.wh-paneel::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--k) 0%, color-mix(in srgb, var(--k) 74%, transparent) 36%, transparent 70%), linear-gradient(to bottom, rgba(13, 30, 39, .3), transparent 22%); }
.is-home main .wh-paneel:focus-visible { outline: 3px solid var(--lz-wit); outline-offset: -6px; }
.is-home main a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
/* de tekst staat stil als de kaarten schuiven (Beau, 15-10): de naam heeft een vaste grootte en de tekst een vaste breedte,
   die van de smalste stand (een kwart van de rij min de twee tussenruimtes, zie de schuif hieronder), dus er loopt niets opnieuw */
.wh-paneel-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: calc((100cqw - 16px) / 4 - 2 * var(--wh-in)); }
.is-home .wh-paneel h2 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; color: var(--lz-wit); }
.wh-paneel p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--lz-wit); }
/* de knop: recht en wit (huisstijl), altijd zichtbaar (Beau, 15-10); bij aanwijzen schuift de pijl iets op */
.wh-ga { display: inline-flex; align-items: center; gap: 10px; height: 40px; margin-top: 4px; padding: 0 14px 0 16px; background: var(--lz-wit); color: var(--lz-navy); font-size: 14px; font-weight: 600; white-space: nowrap; }
.wh-ga svg { width: 16px; height: 16px; transition: transform .2s; }
.wh-paneel:hover .wh-ga svg { transform: translateX(3px); }
/* de schuif: de aangewezen kaart wordt breder, de andere smaller en grijzer */
@media (hover: hover) and (min-width: 901px) {
  .wh-trio:hover li, .wh-trio:focus-within li { flex-grow: .8; }
  .wh-trio li:hover, .wh-trio li:focus-within { flex-grow: 1.6; }
  .wh-trio:hover li:not(:hover) .wh-paneel-foto img { filter: saturate(.3) brightness(.8); }
}
/* de namen op dezelfde hoogte: de zin eronder neemt altijd vier regels in */
@media (min-width: 901px) { .wh-paneel p { min-height: 5.8em; } }
/* de foto's elders op de homepage, in echte kleur (Beau, 15-10: geen kleurfilter meer op de foto bij Langskomen of bellen) */
.wh-foto { display: block; position: relative; overflow: hidden; isolation: isolate; background: var(--navy); }
.wh-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* één moment bij het laden: de kaarten schuiven na elkaar van onder open, daarna komt hun tekst omhoog */
@keyframes wh-op { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wh-open { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.wh-trio li { animation: wh-open 1s cubic-bezier(.2, .7, .2, 1) both; }
.wh-trio li:nth-child(2) { animation-delay: .1s; }
.wh-trio li:nth-child(3) { animation-delay: .2s; }
.wh-paneel-tekst { animation: wh-op .8s .55s cubic-bezier(.2, .7, .2, 1) both; }
.wh-trio li:nth-child(2) .wh-paneel-tekst { animation-delay: .65s; }
.wh-trio li:nth-child(3) .wh-paneel-tekst { animation-delay: .75s; }

/* secties */
.wh-sectie { padding-block: clamp(56px, 8vw, 104px); }

.wh-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--wh-lijn); }
.is-home .wh-kop h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
.wh-kop p { margin: 8px 0 0; color: var(--lz-tekst-2); max-width: 60ch; }
.wh-link { display: inline-flex; align-items: center; height: var(--lz-veld-sm); padding: 0 12px; border: 1px solid var(--lz-lijn-sterk); background: var(--lz-wit); color: var(--lz-navy); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.wh-link:hover { border-color: var(--lz-navy); }
.wh-pil { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--lz-veld); padding: 0 18px; border: 1px solid var(--lz-lijn-sterk); background: var(--lz-wit); color: var(--lz-navy); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.wh-pil:hover { border-color: var(--lz-navy); color: var(--lz-navy); }
.wh-pil-oranje { background: var(--lz-oranje); border-color: var(--lz-oranje); color: var(--lz-wit); }
.wh-pil-oranje:hover { background: var(--lz-oranje-2); border-color: var(--lz-oranje-2); color: var(--lz-wit); }
.wh-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* fabriek */
/* de kop over de volle breedte, daaronder foto en tekst naast elkaar; de tekst in het midden naast de foto (Beau, 15-10:
   het blok lijnde niet). De linkerkolom (kop en foto) valt weg in het raster, zodat kop, foto en tekst elk hun eigen vak hebben. */
.wh-fabriek { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'kop kop' 'foto tekst'; gap: 32px clamp(28px, 5vw, 72px); align-items: center; }
.wh-fabriek > div:first-child { display: contents; }
.is-home .wh-fabriek h2 { grid-area: kop; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; }
.wh-fabriek .wh-foto { grid-area: foto; aspect-ratio: 4 / 3; }
.wh-fabriek > div:last-child { grid-area: tekst; }
.wh-lead { margin: 0 0 28px; font-size: 16px; line-height: 1.6; max-width: 60ch; color: var(--lz-tekst-2); }

/* bewerkingen: vier kolommen, de aanvraag sluit het raster af */
.wh-bew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wh-bew a { display: flex; flex-direction: column; height: 100%; color: var(--navy); text-decoration: none; }
.wh-bew .wh-foto { aspect-ratio: 4 / 3; }
.wh-bew .wh-foto img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wh-bew a:hover .wh-foto img { transform: scale(1.05); }
.is-home .wh-bew h3 { font-size: 18px; margin: 14px 0 4px; }
.wh-bew p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wh-grijs); }
.wh-bew a:hover h3 { text-decoration: underline; }
.wh-aanvraag { grid-column: span 2; }
.wh-aanvraag a { background: var(--navy); color: var(--lz-wit); padding: 22px; justify-content: space-between; min-height: 100%; }
.is-home .wh-aanvraag h3 { margin: 0 0 8px; font-size: 22px; color: var(--lz-wit); }
.wh-aanvraag p { color: var(--lz-navy-tekst); }
.wh-aanvraag a:hover h3 { color: var(--lz-wit); }
.wh-pijl { align-self: flex-start; margin-top: 18px; height: var(--lz-veld-sm); padding: 0 14px; background: var(--lz-oranje); display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
.wh-aanvraag a:hover .wh-pijl { background: var(--lz-oranje-2); }

/* machinepark */
.wh-band { background: var(--wh-papier); }

/* online bij Lenselink: advertenties voor de drie omgevingen (Beau, 15-10), om en om het schermbeeld links en rechts, in
   een venster met de adresbalk; daarnaast het merk van de omgeving, een kop, een zin, drie punten en de knop */
.wh-online { background: var(--lz-vlak); }
.wh-ad { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.wh-ad + .wh-ad { margin-top: clamp(48px, 6vw, 88px); }
.wh-ad:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.wh-ad:nth-of-type(even) .wh-ad-beeld { order: 2; }
.wh-ad-beeld { display: block; overflow: hidden; background: var(--lz-wit); border: 1px solid var(--lz-rand); box-shadow: 0 24px 48px rgba(13, 30, 39, .12); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.wh-ad-beeld:hover { transform: translateY(-4px); box-shadow: 0 30px 56px rgba(13, 30, 39, .16); }
.wh-ad-balk { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--lz-navy); color: var(--lz-navy-tekst); font-size: 12px; }
.wh-ad-balk i { width: 8px; height: 8px; background: rgba(255, 255, 255, .22); }
.wh-ad-balk span { margin-left: 10px; }
.wh-ad-beeld img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.wh-ad-merk { display: flex; align-items: center; margin: 0 0 20px; }
.wh-ad-merk img { width: auto; height: 22px; }
.wh-ad-merk span { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--lz-rand); font-size: 15px; font-weight: 700; line-height: 22px; color: var(--lz-route-interieur); }
/* een grote kop, dus dun (huisstijl: grote koppen dun, kleine vet; stijl.css zet h3 op www op 600) */
body.is-home main .wh-ad h3 { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 400 !important; line-height: 1.12; }
.wh-ad-tekst > p:not(.wh-ad-merk) { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--lz-tekst-2); }
.wh-ad ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.wh-ad li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; }
.wh-ad li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 12px; height: 6px; border-left: 2px solid var(--lz-oranje); border-bottom: 2px solid var(--lz-oranje); transform: rotate(-45deg); }
.wh-ad .wh-knoppen { margin-top: 28px; }
@media (max-width: 900px) {
  .wh-ad, .wh-ad:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .wh-ad:nth-of-type(even) .wh-ad-beeld { order: 0; }
}

/* projecten: één groot en drie kleiner, de foto vult het vlak en de tekst staat er onderin op (zoals de kaarten bovenaan) */
.wh-proj { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, clamp(220px, 21vw, 300px)); gap: 8px; }
.wh-proj li:first-child { grid-row: span 2; }
.wh-proj li:last-child { grid-column: span 2; }
.wh-proj a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: clamp(18px, 2vw, 26px); overflow: hidden; isolation: isolate; color: var(--lz-wit); text-decoration: none; }
.wh-proj a::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(13, 30, 39, .82) 0%, rgba(13, 30, 39, .38) 38%, rgba(13, 30, 39, 0) 64%); }
.wh-beeld { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; background: var(--wh-papier); }
.wh-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wh-proj a:hover img { transform: scale(1.04); }
.is-home .wh-proj h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: var(--lz-wit); }
.is-home .wh-proj li:first-child h3 { font-size: clamp(22px, 2.2vw, 30px); }
.wh-proj p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .86); }
/* rustige inloop bij scrollen (www-home.js zet .wh-anim en daarna .is-in) */
.wh-anim { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.wh-anim.is-in { opacity: 1; transform: none; }

/* langskomen */
.wh-bezoek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--navy); color: var(--lz-wit); margin-bottom: clamp(56px, 8vw, 104px); }
.wh-bezoek .wh-foto { min-height: 360px; }
.wh-bezoek-in { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.is-home .wh-bezoek h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: var(--lz-wit); }
.wh-adres { margin: 0; color: var(--lz-navy-tekst); font-size: 15px; line-height: 1.6; }
.wh-adres strong { color: var(--lz-wit); font-weight: 700; }
.wh-adres a { color: inherit; text-decoration: none; }
.wh-adres a:hover { color: var(--lz-wit); }
.wh-bezoek .wh-knoppen { margin-top: 6px; }
.wh-bezoek .wh-pil { background: transparent; color: var(--lz-wit); border-color: rgba(255, 255, 255, .45); }
.wh-bezoek .wh-pil:hover { border-color: var(--lz-wit); color: var(--lz-wit); }
.wh-bezoek .wh-pil-oranje { background: var(--lz-oranje); border-color: var(--lz-oranje); }
.wh-bezoek .wh-pil-oranje:hover { background: var(--lz-oranje-2); border-color: var(--lz-oranje-2); }

@media (max-width: 1000px) {
  .wh-bew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wh-proj { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(220px, 34vw, 300px); }
  .wh-proj li:first-child { grid-row: auto; grid-column: span 2; }
  .wh-proj li:last-child { grid-column: auto; }
}
/* smaller dan 900 px: de kaarten onder elkaar, zonder schuif */
@media (max-width: 900px) {
  .is-home { --wh-over: 56px; }
  .wh-trio { flex-direction: column; height: auto; }
  .wh-trio li { flex: none; height: clamp(280px, 70vw, 380px); }
  .wh-paneel-tekst { width: auto; }
  .wh-paneel p { max-width: 40ch; }
  .is-home .wh-paneel h2 { font-size: clamp(30px, 8vw, 40px); }
}
@media (max-width: 760px) {
  .wh-held p { font-size: 15px; }
  .wh-fabriek, .wh-bezoek { grid-template-columns: 1fr; }
  .wh-fabriek { grid-template-areas: 'kop' 'foto' 'tekst'; }
  .wh-bezoek .wh-foto { min-height: 220px; }
  .wh-kop { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wh-bew, .wh-proj { grid-template-columns: 1fr; }
  .wh-proj li:first-child { grid-column: auto; }
  .wh-aanvraag { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wh-trio li, .wh-paneel-tekst, .wh-held .wh-w { animation: none; }
  .wh-trio li, .wh-paneel-foto img, .wh-bew .wh-foto img, .wh-beeld img, .wh-ga, .wh-ga svg, .wh-anim { transition: none; }
}