/* ════════════════════════════════════════════════════════════════
   BEZO — gedeeld stylesheet voor alle pagina's
   Vervangt de 11 losse <style>-blokken die per pagina uit elkaar waren
   gegroeid (bv. --ink-400 was #6b7178 op de homepage maar #7f878f op
   shop/offertes/vacatures). Eén bron, dus één waarde.

   Laadvolgorde in elke pagina (bewust, zie bouw/bouw.mjs):
     1. css/bezo.css      (dit bestand: tokens + componenten)
     2. css/tailwind.css  (utilities — winnen bij gelijke specificiteit,
                           precies zoals de oude Tailwind-CDN, die zijn
                           <style> ook ná het paginablok invoegde)

   Buiten scope en dus NIET hier: de twee prijsdashboards
   (configuratie-dashboard.html, leiding-prijzen-dashboard.html) houden hun
   eigen stijl en CDN.
   ════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------- tokens */
:root{
  /* merk */
  --yellow:#f2b200; --amber:#e0a300; --blue:#1b5fa8; --deep:#134a84;
  /* papier (licht, "tekening") */
  --paper:#ffffff; --paper-50:#f7f8f9; --paper-100:#eff1f3; --paper-200:#e3e6ea;
  /* inkt — 400 is de ondergrens voor kleine tekst: >= 4,5:1 op wit, paper-50 én
     paper-100 (was #6b7178: 4,36:1 op paper-100). 300 = randen van invoervelden,
     >= 3:1 (WCAG 1.4.11; paper-200 haalde maar 1,25:1). */
  --ink:#15171a; --ink-700:#2b3035; --ink-500:#5b636b; --ink-400:#676d74; --ink-300:#858c93;
  --panel:rgba(255,255,255,.74); --line:#e3e6ea;
  --danger:#c0272d;

  /* blauwdruk-laag: lijnen en raster in "Blueprint Blue" op papier */
  --bp-line:rgba(27,95,168,.085);
  --bp-line-strong:rgba(27,95,168,.16);
  --bp-ink:rgba(27,95,168,.55);

  /* beweging */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-snap:cubic-bezier(.16,1,.3,1);

  /* schaduwen */
  --shadow-card:0 1px 2px rgba(21,23,26,.04), 0 18px 40px -30px rgba(21,23,26,.35);
  --shadow-lift:0 14px 34px -22px rgba(21,23,26,.3);
}

html{ -webkit-tap-highlight-color:transparent; }
/* <picture> (webp met jpg-terugval) mag de lay-out niet veranderen: de <img> erin gedraagt zich alsof hij er direct staat */
picture{ display:contents; }
body{ background:var(--paper); color:var(--ink-700); font-family:'IBM Plex Sans',system-ui,sans-serif; overflow-x:hidden; }
::selection{ background:rgba(242,178,0,.4); color:#15171a; }
.no-scroll{ overflow:hidden; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px;
}

/* ------------------------------------------------ raster & achtergronden
   "Papier/tekening": het licht deel van de site is het tekenblad, de twee
   configurators zijn de gebouwde werkelijkheid (donker). Het raster is dus
   een blauwdruk-raster — fijn 16px, met een zwaardere lijn om de 80px —
   altijd zacht genoeg om er tekst op te lezen.                             */
.grid-floor{
  background-image:
    linear-gradient(to right, var(--bp-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line-strong) 1px, transparent 1px);
  background-size:80px 80px; background-position:-1px -1px;
}
.grid-fine, .bp-raster{
  background-image:
    linear-gradient(to right, var(--bp-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line-strong) 1px, transparent 1px),
    linear-gradient(to right, var(--bp-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position:-1px -1px;
}
/* op de donkere hero-foto: krijtlijnen in plaats van blauwe inkt */
.hero-raster{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:80px 80px;
}
.grid-fine-dark{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:16px 16px;
}
.mask-fade{ mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 78%);
            -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 78%); }

/* ---------------------------------------------------------------- panelen */
.glass{ background:var(--panel); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
        border:1px solid var(--line); box-shadow:var(--shadow-card); }
.glass-soft{ background:rgba(255,255,255,.88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
        border:1px solid var(--line); }
.glow-accent{ box-shadow:0 0 0 1px rgba(242,178,0,.45), 0 20px 46px -30px rgba(21,23,26,.4); }
.glow-hover{ transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease; }
.glow-hover:hover{ border-color:rgba(242,178,0,.85); box-shadow:var(--shadow-lift); transform:translateY(-3px); }

/* ------------------------------------------------------------- typografie */
.eyebrow{ font-family:'IBM Plex Sans',sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.01em;
          text-transform:none; color:var(--blue); }
.h-display{ font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:none; letter-spacing:0;
            line-height:1.05; color:var(--ink); }
.rule{ height:1px; background:linear-gradient(90deg, var(--yellow), rgba(242,178,0,0)); }

/* ------------------------------------------------------------------ hoeken
   Het "blueprint-hook"-motief is terug: twee haakjes (linksboven en
   rechtsonder) zoals de passermerken op een werktekening. Ze tekenen zich
   in zodra de kaart in beeld komt (.reveal.in), en staan er meteen bij
   prefers-reduced-motion. Kleur per context via --hook.                    */
.corner{ position:relative; border-radius:10px; overflow:hidden; --hook:var(--bp-ink); }
.corner::before,.corner::after{
  content:''; position:absolute; width:16px; height:16px; z-index:3; pointer-events:none;
  border:0 solid var(--hook); transition:transform .5s var(--ease-snap) .15s, opacity .4s ease .15s;
}
.corner::before{ top:8px; left:8px; border-top-width:1.5px; border-left-width:1.5px; transform-origin:top left; }
.corner::after{ right:8px; bottom:8px; border-bottom-width:1.5px; border-right-width:1.5px; transform-origin:bottom right; }
.reveal.corner:not(.in)::before, .reveal.corner:not(.in)::after,
.reveal:not(.in) .corner::before, .reveal:not(.in) .corner::after{ transform:scale(.2); opacity:0; }
.corner-geel{ --hook:rgba(242,178,0,.9); }

/* ------------------------------------------------------ tekenblad-labels
   Elke hoofdsectie krijgt een bladnummer, zoals een tekenset: [04] voor het
   eyebrow-label. Puur typografisch (data-blad), geen extra markup.          */
.eyebrow[data-blad]{ display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow[data-blad]::before{
  content:attr(data-blad); font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:500;
  letter-spacing:.08em; color:var(--blue); border:1px solid rgba(27,95,168,.35); padding:.12rem .38rem;
  line-height:1.2; background:rgba(255,255,255,.7);
}

/* maatlijn: horizontale maatvoering met pijlkoppen en een maat in het midden */
.maatlijn{ display:flex; align-items:center; gap:.6rem; color:var(--bp-ink);
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }
.maatlijn::before, .maatlijn::after{ content:''; flex:1; height:9px;
  background:
    linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) left center/1px 9px no-repeat; }
.maatlijn::after{ background:
    linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) right center/1px 9px no-repeat; }
.maatlijn span{ white-space:nowrap; }

/* titelblok: het vakje rechtsonder op een werktekening */
.titelblok{ display:grid; grid-template-columns:auto 1fr; border:1px solid var(--paper-200); background:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:10.56px; }
.titelblok > *{ padding:.45rem .7rem; border-bottom:1px solid var(--paper-200); }
.titelblok > :nth-child(odd){ color:var(--ink-400); text-transform:uppercase; letter-spacing:.14em; border-right:1px solid var(--paper-200); }
.titelblok > :nth-child(even){ color:var(--ink); }
.titelblok > :nth-last-child(-n+2){ border-bottom:0; }

/* lijntekeningen (inline SVG, <symbol>) in blauwdrukstijl */
.lt{ color:var(--blue); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
/* geen voorouder-selectors: binnen een <use>-schaduwboom matchen die niet */
.lt-dun{ stroke-width:.8; opacity:.55; }
.lt-as{ stroke-dasharray:6 3 1.5 3; stroke-width:.8; opacity:.55; }
.lt-vlak{ fill:rgba(27,95,168,.07); }
.lt-geel{ stroke:var(--yellow); }
.lt-geelvlak{ fill:rgba(242,178,0,.35); stroke:var(--amber); }
.lt-mini{ stroke-width:6; }  /* klein pictogram (bv. 36 px): dikkere lijn, de dunne maatlijnen vallen weg */
.lt text, symbol text{ fill:currentColor; stroke:none; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.08em; }

/* ----------------------------------------------------------------- knoppen */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600;
      text-transform:none; letter-spacing:0; font-size:1rem; padding:.75rem 1.5rem; border-radius:999px;
      border:1px solid transparent; transition:all .25s ease; }
.btn-primary{ background:var(--yellow); color:#1b1300; box-shadow:0 6px 16px -8px rgba(242,178,0,.7); }
.btn-primary:hover{ background:var(--amber); box-shadow:0 8px 20px -8px rgba(242,178,0,.85); transform:translateY(-1px); }
.btn-primary:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-ghost{ border-color:var(--paper-200); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-ghost[aria-pressed="true"]{ border-color:var(--blue); color:var(--blue); background:rgba(27,95,168,.06); }
.btn-orange{ background:transparent; border-color:rgba(27,95,168,.4); color:var(--blue); }
.btn-orange:hover{ background:rgba(27,95,168,.07); border-color:var(--blue); }
.btn-danger{ border-color:var(--paper-200); color:var(--danger); background:#fff; }
.btn-danger:hover{ border-color:var(--danger); background:rgba(192,39,45,.05); }

/* ------------------------------------------------------------------- chips */
.chip{ font-family:'IBM Plex Sans',sans-serif; font-size:.85rem; font-weight:500; letter-spacing:0; padding:.5rem .9rem;
       border:1px solid var(--paper-200); border-radius:999px; color:var(--ink-500); background:#fff;
       transition:all .22s ease; text-align:left; }
.chip:hover{ border-color:var(--blue); color:var(--ink); }
.chip[aria-pressed="true"]{ border-color:var(--blue); color:var(--ink); background:rgba(27,95,168,.07); }

/* ----------------------------------------------------------- range sliders */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; cursor:grab; }
input[type=range]::-webkit-slider-runnable-track{ height:3px; background:linear-gradient(90deg,var(--yellow) var(--fill,50%), var(--paper-200) var(--fill,50%)); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; margin-top:-6.5px; background:#fff;
  border:2px solid var(--ink); box-shadow:0 1px 5px rgba(21,23,26,.3); }
input[type=range]::-moz-range-track{ height:3px; background:var(--paper-200); }
input[type=range]::-moz-range-progress{ height:3px; background:var(--yellow); }
input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:0; background:#fff; border:2px solid var(--ink); }

/* ------------------------------------------------------------------ reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ----------------------------------------------------- barcode / ticker */
.scanline{ position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(27,95,168,.28), transparent);
  width:70px; animation:scan 3.6s linear infinite; mix-blend-mode:multiply; }
@keyframes scan{ 0%{ transform:translateX(-80px);} 100%{ transform:translateX(100%);} }
.pulse-dot{ animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(242,178,0,.6);} 50%{ opacity:.7; box-shadow:0 0 0 6px rgba(242,178,0,0);} }
.marquee{ display:flex; gap:3.5rem; width:max-content; animation:slide 70s linear infinite; }
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ================================================================= HOMEPAGE */

/* hero: achtergrondfoto's kruisvloeien elke 10s (script onderin index.html) */
.hero-bg-foto{ transition:opacity 1.4s ease; will-change:opacity; }

/* hero-titel: cascade-entree */
#hero-titel .hero-lijn{ display:inline-block; opacity:0; transform:translateY(16px);
  animation:hero-lijn-rise .6s var(--ease-snap) forwards; }
#hero-titel .hero-lijn-1{ animation-delay:0ms; }
#hero-titel .hero-lijn-2{ animation-delay:.14s; }
@keyframes hero-lijn-rise{ to{ opacity:1; transform:translateY(0); } }

/* hero: uitklapbare details */
.hero-toggle{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none; }
.hero-toggle-box{ position:absolute; opacity:0; width:1px; height:1px; }
.hero-toggle-box:focus-visible + .hero-toggle{ outline:2px solid var(--blue); outline-offset:3px; }
.hero-details{ max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s var(--ease-snap), opacity .3s ease; }
.hero-toggle-box:checked ~ .hero-details{ max-height:40rem; opacity:1; }
@supports (interpolate-size: allow-keywords){
  .hero-details{ interpolate-size:allow-keywords; }
  .hero-toggle-box:checked ~ .hero-details{ max-height:auto; height:auto; }
}

/* hero-stats: één keer bij het laden "gestempeld", niet bij scroll */
.hero-stat{ opacity:0; transform:translateY(6px) scale(.97);
  animation:heroStamp .22s var(--ease-out) forwards; }
.hero-stat:nth-child(1){ animation-delay:.05s; }
.hero-stat:nth-child(2){ animation-delay:.16s; }
.hero-stat:nth-child(3){ animation-delay:.27s; }
.hero-stat:nth-child(4){ animation-delay:.38s; }
@keyframes heroStamp{ to{ opacity:1; transform:none; } }
.hero-stat .font-display{ position:relative; display:inline-block; }
.hero-stat .font-display::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--blue); transform-origin:left; transform:scaleX(0);
  animation:heroStampRule .3s var(--ease-out) forwards; }
.hero-stat:nth-child(1) .font-display::after{ animation-delay:.24s; }
.hero-stat:nth-child(2) .font-display::after{ animation-delay:.35s; }
.hero-stat:nth-child(3) .font-display::after{ animation-delay:.46s; }
.hero-stat:nth-child(4) .font-display::after{ animation-delay:.57s; }
@keyframes heroStampRule{ to{ transform:scaleX(1); } }

/* faq: accordion (native <details>, dicht bij standaard) */
.faq-item{ border-color:var(--paper-200); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:1.1rem 0; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:''; }
.faq-item summary .chevron{ flex-shrink:0; transition:transform .25s var(--ease-out); color:var(--ink-500); }
.faq-item[open] summary .chevron{ transform:rotate(180deg); }
.faq-item .faq-a{ padding-bottom:1.1rem; }

/* ---- ingebedde configurators: licht, in de kleuren van de site (okt. 2026; was een donker eiland) ----
   Letterlijk overgenomen uit het oude <style>-blok van index.html. Dit is de
   "buitenkant" van de twee (buiten-scope) configurators: aanpassen alleen
   met een configurator-regressiecheck (zie bouw/bouw.mjs --controle).    */
#bz-embed{ color:var(--ink); background:#fff; border-color:var(--paper-200); box-shadow:0 24px 60px -40px rgba(21,23,26,.35); }
#bz-embed .h-display{ color:var(--ink); }
#bz-embed .corner::before, #bz-embed .corner::after{ border-color:rgba(242,178,0,.5); }
#bz-stage{ height:clamp(620px, 84vh, 1060px); background:#fff; }
@media (max-width: 767px) {
  /* Op verzoek een echte hoogte i.p.v. auto: het menu scrolt intern (React-
     kant, zie bz-cfg-src) zodat de 3D-viewer boven in beeld blijft. */
  #bz-stage{ height:clamp(560px, 85vh, 900px); }
}
#bz-mount{ height:100%; }
#bz-mount .bezo-root{ height:100% !important; min-height:0 !important; }
#bz-mount canvas{ width:100% !important; height:100% !important; object-fit:contain !important; }

#lg-embed{ color:var(--ink); background:#fff; border-color:var(--paper-200); box-shadow:0 24px 60px -40px rgba(21,23,26,.35); }
#lg-embed .h-display{ color:var(--ink); }
#lg-embed .corner::before, #lg-embed .corner::after{ border-color:rgba(27,95,168,.55); }
#lg-stage{ height:clamp(560px, 76vh, 900px); background:#fff; }
@media (max-width: 767px) {
  /* Zelfde 85vh als #bz-stage — de twee configurators moeten identiek
     aanvoelen op mobiel. */
  #lg-stage{ height:clamp(560px, 85vh, 900px); }
}
#lg-mount{ height:100%; }
#lg-mount .bezo-root{ height:100% !important; min-height:0 !important; }
#lg-mount canvas{ width:100% !important; height:100% !important; object-fit:contain !important; }

/* passermerken op het kader zelf (de "buitenkant"): geel bij het luik,
   blauw bij het leidingwerk — klein en in de uiterste hoek, zodat ze de
   bediening van de configurator (die op 20px begint) nooit raken. */
#bz-embed{ --hook:rgba(242,178,0,.6); }
#lg-embed{ --hook:rgba(90,150,215,.75); }
#bz-embed.corner::before, #bz-embed.corner::after,
#lg-embed.corner::before, #lg-embed.corner::after{ width:12px; height:12px; }
#bz-embed.corner::before, #lg-embed.corner::before{ top:5px; left:5px; }
#bz-embed.corner::after, #lg-embed.corner::after{ right:5px; bottom:5px; }

#bz-embed.bz-full{ position:fixed; inset:0; z-index:120; margin:0; border:0; background:#fff; }
#bz-embed.bz-full #bz-stage{ height:100dvh; }
#bz-embed.bz-full::before, #bz-embed.bz-full::after{ display:none; }

/* ---- doorsnede gemaal (sectie infra) ---- */
.ds-nr circle{ fill:#fff; stroke:var(--blue); stroke-width:1.4; transition:fill .2s ease, stroke .2s ease; }
.ds-nr text{ text-anchor:middle; font-size:12px; font-weight:600; letter-spacing:0; fill:var(--blue); }
.ds-deel{ transition:opacity .25s ease; }
#doorsnede.focus .ds-deel{ opacity:.35; }
#doorsnede.focus .ds-deel.aan{ opacity:1; }
#doorsnede.focus .ds-deel.aan *{ stroke:var(--deep); }
.ds-nr.aan circle{ fill:var(--yellow); stroke:var(--amber); }
.ds-nr.aan text{ fill:#1b1300; }
.ds-badge{ display:inline-grid; place-items:center; width:26px; height:26px; flex-shrink:0; border-radius:999px;
  border:1.4px solid var(--blue); color:var(--blue); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  transition:all .2s ease; }
.ds-item{ cursor:default; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ds-item:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.ds-item.aan{ border-color:rgba(242,178,0,.85); box-shadow:var(--shadow-lift); }
.ds-item.aan .ds-badge{ background:var(--yellow); border-color:var(--amber); color:#1b1300; }

/* ---- kernlijnen (specialismen): tekening als kop van de kaart ---- */
.kernlijn-tekening{ background-color:rgba(255,255,255,.55); }
.kernlijn .lt{ transition:transform .6s var(--ease-out); }
.kernlijn:hover .lt{ transform:scale(1.035); }

/* ---- machinepark: merkloze technische illustraties ---- */
.mp-kaart{ position:relative; background:#fff; padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; }
.mp-kaart .lt{ width:100%; height:auto; aspect-ratio:16/10; }
.mp-kaart .mp-nr{ position:absolute; top:2.15rem; left:2.25rem; z-index:1; font-family:'IBM Plex Mono',monospace; font-size:10.56px;
  letter-spacing:.14em; color:var(--ink-400); }
.mp-tekening{ background:#f3f6f8; padding:1rem 0 .25rem; }
.mp-illustratie{ display:block; width:100%; height:auto; aspect-ratio:400/260; }
.mp-kaart h3{ color:var(--ink); }
.mp-kaart h3::before{ content:''; display:block; width:24px; height:2px; margin-bottom:.75rem; background:var(--yellow); }
.mp-specs{ display:grid; grid-template-columns:auto 1fr; font-family:'IBM Plex Mono',monospace; font-size:11px;
  border-top:1px solid var(--paper-200); }
.mp-specs dt, .mp-specs dd{ padding:.4rem 0; border-bottom:1px dashed var(--paper-200); }
.mp-specs dt{ color:var(--ink-500); padding-right:1rem; }
.mp-specs dd{ color:var(--ink); text-align:right; }
@media (max-width:639px){ .mp-kaart{ padding:1.25rem; } .mp-kaart .mp-nr{ top:1.9rem; left:2rem; } }

/* ---- werkwijze: processtappen als tijdlijn ---- */
.proces{ position:relative; counter-reset:stap; }
.proces-stap{ position:relative; padding:3.25rem 0 0; }
.proces-stap p{ margin-top:.6rem !important; }
.proces-nr{ position:absolute; top:0; left:0; display:grid; place-items:center; width:34px; height:34px; background:#fff;
  border:1.4px solid var(--blue); color:var(--blue); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; z-index:1; }
.proces-stap-eind .proces-nr{ background:var(--yellow); border-color:var(--amber); color:#1b1300; }
/* de verbindingslijn: per stap een stuk, zodat hij ook bij wrappen klopt */
.proces-stap::before{ content:''; position:absolute; top:17px; left:34px; right:-1.25rem; height:1px;
  background:repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 10px); opacity:.55; }
.proces-stap:last-child::before{ display:none; }
@media (max-width:639px){
  .proces{ gap:0; }
  .proces-stap{ padding:0 0 1.75rem 3.25rem; }
  .proces-stap::before{ top:34px; bottom:0; left:17px; right:auto; width:1px; height:auto;
    background:repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 10px); }
}
@media (min-width:640px) and (max-width:1023px){ .proces-stap:nth-child(2n)::before{ display:none; } }
@media (min-width:1024px) and (max-width:1279px){ .proces-stap:nth-child(3n)::before{ display:none; } }

/* beeldband */
.band{ position:relative; overflow:hidden; background:var(--paper-100); }
.band img{ width:100%; height:100%; object-fit:cover; display:block; }
.band-hoog{ height:clamp(280px, 38vw, 520px); }

/* Vakwerk: grote opening, rustige selectie en een uitklapbaar fotoarchief. */
.galerij-selectie,.galerij-vervolg{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
.galerij figure{ position:relative; margin:0; min-width:0; }
.gknop{ position:relative; display:block; width:100%; padding:0; border:0; background:var(--paper-100);
  cursor:zoom-in; overflow:hidden; aspect-ratio:4/3; }
.gknop::after{ content:'↗'; position:absolute; right:12px; top:12px; display:grid; place-items:center;
  width:30px; height:30px; background:#fff; color:var(--ink); font-size:18px; opacity:0; transition:opacity .2s; }
.gknop:hover::after,.gknop:focus-visible::after{ opacity:1; }
.gknop img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-out); }
.gknop:hover img{ transform:scale(1.025); }
.galerij figcaption{ position:absolute; inset:auto 0 0; padding:48px 18px 18px; color:#fff;
  background:linear-gradient(transparent,rgba(10,18,24,.88)); font-size:14px; font-weight:500;
  line-height:1.4; pointer-events:none; opacity:0; transition:opacity .22s ease; }
.galerij figure:hover figcaption,.galerij figure:has(.gknop:focus-visible) figcaption{ opacity:1; }
.galerij-hoofd,.galerij-detail{ grid-column:1/-1; }
.galerij-hoofd .gknop{ aspect-ratio:3/2; }
.galerij-detail .gknop{ aspect-ratio:3/2; }
.galerij-detail img{ object-position:50% 57%; }
.galerij-hoofd figcaption{ font-weight:600; }
.galerij-meer{ margin-top:32px; border-top:1px solid var(--paper-200); border-bottom:1px solid var(--paper-200); }
.galerij-meer summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; cursor:pointer; font-size:15px; font-weight:600; color:var(--ink); }
.galerij-meer summary::-webkit-details-marker{ display:none; }
.galerij-meer summary:hover{ color:var(--blue); }
.galerij-meer small{ display:inline-block; margin-left:12px; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:400; color:var(--ink-500); }
.galerij-plus{ font-size:24px; font-weight:400; color:var(--blue); }
.galerij-meer[open] .galerij-plus{ transform:rotate(45deg); }
.galerij-dicht-tekst,.galerij-meer[open] .galerij-open-tekst{ display:none; }
.galerij-meer[open] .galerij-dicht-tekst{ display:inline; }
.galerij-vervolg{ padding:4px 0 28px; }
.galerij-vervolg .gknop{ aspect-ratio:3/4; }
@media(min-width:700px){
  .galerij-selectie{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:28px 20px; }
  .galerij-selectie figure{ grid-column:span 6; }
  .galerij-selectie .galerij-hoofd{ grid-column:span 8; }
  .galerij-selectie .galerij-detail{ grid-column:span 4; }
  .galerij-hoofd .gknop{ aspect-ratio:auto; height:clamp(300px,36vw,450px); }
  .galerij-detail .gknop{ aspect-ratio:auto; height:clamp(300px,36vw,450px); }
  .galerij-hoofd figcaption,.galerij-detail figcaption{ font-size:18px; padding:64px 24px 24px; }
}
@media(min-width:1000px){
  .galerij-selectie figure{ grid-column:span 3; }
  .galerij-vervolg{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; }
}
@media(hover:none){ .galerij figcaption{ opacity:1; padding:36px 12px 12px; font-size:12px; } }
@media(prefers-reduced-motion:reduce){ .gknop img,.gknop::after,.galerij figcaption{ transition:none; } .gknop:hover img{ transform:none; } }

/* lightbox */
#lb[hidden]{ display:none; }
#lb{ position:fixed; inset:0; z-index:140; display:grid; place-items:center;
     background:rgba(21,23,26,.92); opacity:0; transition:opacity .25s ease; padding:1rem; }
#lb.in{ opacity:1; }
#lb figure{ margin:0; max-width:min(1400px,94vw); max-height:88vh; display:flex; flex-direction:column; gap:.9rem; }
#lb img{ max-width:100%; max-height:78vh; object-fit:contain; display:block; margin:0 auto; background:#101012; }
#lb figcaption{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em;
                color:#cfd3d6; text-align:center; }
.lb-knop{ position:absolute; width:48px; height:48px; display:grid; place-items:center; color:#fff;
          border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.3); transition:all .2s ease; }
.lb-knop:hover{ background:#fff; color:#15171a; }
#lb-sluit{ top:1rem; right:1rem; }
#lb-vorige{ left:1rem; top:50%; margin-top:-24px; }
#lb-volgende{ right:1rem; top:50%; margin-top:-24px; }
@media (max-width:640px){ #lb-vorige{ left:.4rem; } #lb-volgende{ right:.4rem; } }

/* team */
.team-beeld{ position:relative; overflow:hidden; border:1px solid var(--paper-200); background:var(--paper-100); }
.team-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }

/* LinkedIn-insluiting + projecten */
.li-frame{ width:100%; height:560px; border:0; display:block; background:#fff; }
.li-vraag{ border-top:1px solid var(--paper-200); padding:1rem 1.5rem; }
.li-kaart-open .pr-media{ display:none; }
.pr-media{ position:relative; aspect-ratio:1/1;   /* de LinkedIn-afbeeldingen zijn vierkant; 4:3 sneed er logo en rand af */ background:var(--paper-100); overflow:hidden; }
.pr-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.pr-kaart:hover .pr-media img{ transform:scale(1.03); }
.pr-media.leeg{ display:grid; place-items:center; border:1px dashed var(--paper-200); }
.pr-media.leeg::after{ content:attr(data-naam); font-family:'IBM Plex Mono',monospace; font-size:.66rem;
                       letter-spacing:.12em; color:var(--ink-400); text-align:center; padding:0 1rem; }

/* ============================================================ GEDEELDE UI */

/* hoofdnavigatie (bouw/delen/nav.html) */
.nav-link{ position:relative; padding:.5rem .75rem; font-family:'IBM Plex Sans',sans-serif; font-size:15px; font-weight:500;
  color:var(--ink-500); transition:color .2s ease; }
.nav-link:hover{ color:var(--ink); }
.nav-link::after{ content:''; position:absolute; left:.75rem; right:.75rem; bottom:.2rem; height:2px; background:var(--yellow);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ transform:scaleX(1); }
.nav-link[aria-current="page"]{ color:var(--ink); }
/* uitklapmenu (Configurators): hover en toetsenbord (focus-within), geen JS.
   De link zelf blijft een gewone link naar de luikconfigurator. */
.nav-drop{ position:relative; }
.nav-drop > .nav-link{ display:inline-flex; align-items:center; gap:.3rem; }
.nav-drop-pijl{ transition:transform .2s ease; }
.nav-drop:hover .nav-drop-pijl, .nav-drop:focus-within .nav-drop-pijl{ transform:rotate(180deg); }
.nav-drop-menu{ position:absolute; top:100%; left:0; min-width:270px; padding:.4rem; margin-top:.35rem; background:#fff;
  border:1px solid var(--paper-200); box-shadow:0 18px 40px -24px rgba(21,23,26,.4); z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.nav-drop-menu::before{ content:''; position:absolute; left:0; right:0; top:-.5rem; height:.5rem; }   /* brug: hover valt niet weg */
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav-drop-menu a{ display:flex; flex-direction:column; gap:.15rem; padding:.65rem .8rem; font-family:'IBM Plex Sans',sans-serif;
  font-size:15px; font-weight:500; color:var(--ink); }
.nav-drop-menu a span{ font-family:'IBM Plex Mono',monospace; font-size:10.56px; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500); }
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible{ background:var(--paper-50); color:var(--blue); }
.m-link{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.8rem 0;
  font-family:'IBM Plex Sans',sans-serif; font-size:1.05rem; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--paper-200); }
.m-link span{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-400); text-align:right; }
.m-link[aria-current="page"]{ color:var(--blue); }

/* footer */
.footer-kop{ font-family:'IBM Plex Mono',monospace; font-size:10.56px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--blue); }

/* categorie-tabs op de shoppagina's */
.cat-tab{ display:inline-flex; align-items:center; min-height:40px; padding:.45rem .95rem; border:1px solid var(--paper-200);
  border-radius:999px; background:#fff; font-size:.85rem; font-weight:500; color:var(--ink-500); transition:all .2s ease; }
.cat-tab:hover{ border-color:var(--blue); color:var(--ink); }
.cat-tab[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* footer-links: tekstlinkjes halen het 24px-tapdoel (WCAG 2.2) */
footer ul.space-y-2 li > a, footer span.flex.gap-5 > a{ display:inline-block; padding-block:.3rem; }

/* vaste actiebalk: zwevend paneel rechtsonder */
#bz-bar{ transform:translateY(105%); transition:transform .32s var(--ease-out), opacity .2s ease; }
#bz-bar.in{ transform:none; }
#bz-bar > div{ border-radius:10px; border:1px solid var(--paper-200);
  box-shadow:0 1px 2px rgba(21,23,26,.04), 0 18px 40px -30px rgba(21,23,26,.35), 0 -10px 26px -22px rgba(21,23,26,.4); }
/* elke drawer/overlay zet body.bz-drawer-open: balk dan echt weg */
body.bz-drawer-open #bz-bar, body.no-scroll #bz-bar{
  transform:translateY(105%); opacity:0; pointer-events:none; }

/* aanvraag-drawer */
#bz-drawer[hidden]{ display:none; }
/* Velden die alleen bij 'account aanvragen' horen: de utility-klassen .block/.flex winnen anders van het hidden-attribuut. */
[data-bz-veld-aanvragen][hidden],[data-bz-veld-login][hidden],[data-bz-veld-ww][hidden]{ display:none !important; }
#bz-drawer .bz-veil{ opacity:0; transition:opacity .3s ease; }
#bz-drawer .bz-panel{ transform:translateX(100%); transition:transform .34s var(--ease-out);
                      box-shadow:-24px 0 60px -30px rgba(21,23,26,.35); }
#bz-drawer.in .bz-veil{ opacity:1; }
#bz-drawer.in .bz-panel{ transform:none; }

/* formuliervelden */
.bz-field{ width:100%; background:#fff; border:1px solid var(--ink-300);
           color:var(--ink); font-family:'IBM Plex Sans',sans-serif; font-size:15px; padding:.72rem .9rem;
           transition:border-color .2s ease, box-shadow .2s ease; }
.bz-field::placeholder{ color:var(--ink-400); }
.bz-field:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,95,168,.14); }
.bz-field[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(192,39,45,.1); }
.bz-label{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.2em;
           text-transform:uppercase; color:var(--ink-500); display:block; margin-bottom:.5rem; }
.bz-err{ font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:var(--danger); margin-top:.35rem; display:none; }
.bz-err.on{ display:block; }
.bz-drop{ border:1px dashed var(--paper-200); background:var(--paper-50);
          padding:1.1rem; text-align:center; cursor:pointer; transition:all .2s ease; }
.bz-drop:hover, .bz-drop.over{ border-color:var(--blue); background:rgba(27,95,168,.05); }

/* ------------------------------------------------ paginakop (subpagina's)
   Zelfde taal als de homepage: tekenblad-raster dat naar onderen uitvloeit,
   bladnummer, display-kop. Gebruikt door shop, product, vacatures en de
   nutspagina's (offertes, mijn bestellingen, vacaturebeheer).             */
.paginakop{ position:relative; padding:9.5rem 0 3rem; border-bottom:1px solid var(--paper-200); overflow:hidden;
  background:linear-gradient(180deg, var(--paper-50), #fff 85%); }
.paginakop::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--bp-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line-strong) 1px, transparent 1px),
    linear-gradient(to right, var(--bp-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px;
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 95%); mask-image:linear-gradient(180deg, #000 20%, transparent 95%); }
.paginakop > *{ position:relative; }
.kruimel{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-400); }
.kruimel a:hover{ color:var(--blue); }

/* KPI-tegels */
.kpi-rij{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:1px;
  background:var(--paper-200); border:1px solid var(--paper-200); }
.kpi{ background:#fff; padding:1rem 1.1rem; }
.kpi-getal{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:2rem; line-height:1; color:var(--ink); }
.kpi-label{ margin-top:.45rem; font-family:'IBM Plex Mono',monospace; font-size:10.56px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); }

/* filterchips + zoekveld */
.filterchip{ display:inline-flex; align-items:center; gap:.45rem; min-height:40px; padding:.4rem .85rem; border:1px solid var(--paper-200);
  border-radius:999px; background:#fff; font-size:.85rem; font-weight:500; color:var(--ink-500); transition:all .2s ease; }
.filterchip:hover{ border-color:var(--blue); color:var(--ink); }
.filterchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.filterchip .tel{ font-family:'IBM Plex Mono',monospace; font-size:10.56px; opacity:.7; }
.zoekveld{ position:relative; }
.zoekveld svg, .zoekveld i{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--ink-400); pointer-events:none; }
.zoekveld .bz-field{ padding-left:2.4rem; border-radius:999px; }

/* kaart: het standaard paneel op nutspagina's */
.kaart{ background:#fff; border:1px solid var(--paper-200); border-radius:10px; box-shadow:var(--shadow-card); }
.kaart-kop{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem 1.25rem; }
.label-mono{ font-family:'IBM Plex Mono',monospace; font-size:10.56px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-400); }
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius:999px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; }
.badge-blauw{ color:var(--blue); background:rgba(27,95,168,.06); }
.badge-geel{ color:#7a5a00; background:rgba(242,178,0,.14); border-color:rgba(242,178,0,.6); }
.badge-grijs{ color:var(--ink-500); background:var(--paper-50); border-color:var(--paper-200); }

/* lege staat / geen toegang */
.leeg-staat{ text-align:center; padding:3rem 1.5rem; border:1px dashed rgba(27,95,168,.3); border-radius:10px;
  background-color:rgba(255,255,255,.7); }
.leeg-staat .lt{ width:160px; height:auto; margin:0 auto 1.25rem; opacity:.9; }

/* productpagina: foto als tekenblad met maatlijnen B (onder) en L (rechts) */
.product-blad{ display:grid; grid-template-columns:1fr auto; column-gap:.6rem; }
.product-blad > .corner{ grid-column:1; grid-row:1; }
.product-blad > #maat-b{ grid-column:1; grid-row:2; }
.maatlijn-v{ grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--bp-ink);
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }
.maatlijn-v span{ writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
.maatlijn-v::before, .maatlijn-v::after{ content:''; flex:1; width:9px;
  background:
    linear-gradient(currentColor,currentColor) center top/1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) center top/9px 1px no-repeat; }
.maatlijn-v::after{ background:
    linear-gradient(currentColor,currentColor) center top/1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) center bottom/9px 1px no-repeat; }
.maatlijn b, .maatlijn-v b{ color:var(--ink); font-weight:600; }
.kenmerk{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border:1px solid var(--paper-200);
  border-radius:6px; background:#fff; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-700); }
.kenmerk::before{ content:''; width:5px; height:5px; background:var(--blue); }

/* plakbare actiebalk onderaan een bewerkformulier */
.opslagbalk{ position:sticky; bottom:1rem; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  padding:.75rem .9rem; border-radius:12px; border:1px solid var(--paper-200); background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 18px 40px -26px rgba(21,23,26,.45); }

/* spamrem (honeypot): buiten beeld, niet display:none — sommige robots slaan verborgen velden over */
.bz-hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* tikdoelen >= 44px op aanraakschermen (lanceringscheck punt 14). Alleen bij
   pointer:coarse, zodat de desktop-lay-out compact blijft. */
@media (pointer: coarse){
  .site-footer ul li > a, .site-footer span.flex.gap-5 > a{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; }
  .site-footer ul.space-y-2 > li + li{ margin-top:0 !important; }
  .cat-tab, .filterchip{ min-height:44px; }
  a.font-mono.inline-flex, button.font-mono.inline-flex{ min-height:44px; }
  #nav a[aria-label^="BEZO"]{ min-height:44px; }
  .kruimel a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
  .home-contact-links a{ display:flex; align-items:center; min-height:44px; }
  .btn, .chip{ min-height:44px; }
  .chip{ display:inline-flex; align-items:center; }
  .bz-field{ min-height:44px; }   /* bewust geen algemene input-selector: niets in de configurators raken */
  button[data-bz-cart-login]{ display:inline-flex; align-items:center; min-height:44px; }
}

/* juridische pagina's: leesbare lopende tekst */
.juridisch{ color:var(--ink-700); font-size:16px; line-height:1.7; }
.juridisch h2{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.7rem; line-height:1.1; color:var(--ink);
  margin:2.6rem 0 .8rem; }
.juridisch h2:first-child{ margin-top:0; }
.juridisch p{ margin:.8rem 0; }
.juridisch ul{ margin:.8rem 0; padding-left:0; list-style:none; }
.juridisch li{ position:relative; padding-left:1.3rem; margin:.55rem 0; }
.juridisch li::before{ content:''; position:absolute; left:0; top:.7em; width:6px; height:6px; background:var(--blue); }
.juridisch a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.juridisch strong{ color:var(--ink); }
.tabel-scroll{ overflow-x:auto; margin:1rem 0; border:1px solid var(--paper-200); border-radius:10px; }
.juridisch table{ width:100%; min-width:640px; border-collapse:collapse; font-size:14px; line-height:1.5; }
.juridisch th{ text-align:left; background:var(--paper-50); font-family:'IBM Plex Mono',monospace; font-size:10.56px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); }
.juridisch th, .juridisch td{ padding:.7rem .85rem; border-bottom:1px solid var(--paper-200); vertical-align:top; }
.juridisch tr:last-child td{ border-bottom:0; }

/* vacatures */
.vac-kaart{ border:1px solid var(--paper-200); background:#fff; }
.vac-lijst li{ position:relative; padding-left:1.4rem; }
.vac-lijst li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; background:var(--blue); }

/* ============================================================ TOEGANKELIJK */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-bg-foto{ transition:none; }
  #hero-titel .hero-lijn{ opacity:1; transform:none; }
  .hero-stat{ opacity:1; transform:none; }
  .hero-stat .font-display::after{ transform:scaleX(1); }
  html{ scroll-behavior:auto; }
}
@media print{
  #bz-bar, #bz-drawer, #bz-embed, #lg-embed{ display:none !important; }
}

/* Homepage: configurators first, compact section rhythm. */
.home-page #hoofd > section.py-24 { padding-top:72px; padding-bottom:72px; }
.home-page #hoofd > section:first-child { min-height:780px; padding-top:160px; padding-bottom:64px; }
.home-page #hero-titel {font-size:clamp(2.8rem,5.8vw,5.4rem);}
.home-page #hero-titel + div {margin-top:28px;}
.home-page #hero-cta + .btn {background:#fff;color:#15171a;border-color:#fff;}
.home-welcome {max-width:440px;width:100%;justify-self:end;}
.home-availability {padding:26px;background:rgba(250,250,248,.94);}
.home-status-heading {display:flex;justify-content:space-between;gap:16px;margin-bottom:22px;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#626971;}
.home-status-heading > span:first-child {display:flex;align-items:center;gap:9px;}
.home-status-sub {margin-top:10px;font-size:12px;line-height:1.6;color:#626971;}
.home-contact-note {margin-top:20px;padding-top:18px;border-top:1px solid #dce0e5;font-size:14px;color:#4b535c;}
.home-contact-links {display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:12px;font-size:14px;color:#1b5fa8;}
.home-contact-links a:hover {text-decoration:underline;}
#configurators {scroll-margin-top:150px;}
.home-page #configurator .shrink-0.flex-wrap {flex-shrink:1;max-width:430px;}
.home-page #bz-embed {margin-top:28px;}
#leiding-configurator .lg-chips {flex-shrink:1;max-width:430px;}
.home-faq {padding:48px 0;background:#fff;}
.home-page #faq {margin-top:0;padding-top:0;border-top:0;}
.home-page #faq-lijst {max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;border:0;margin-top:24px;align-items:start;}
.home-page #faq-lijst .faq-item {border-top:1px solid #dce0e5;}
.home-page .band-hoog {height:clamp(220px,25vw,340px);}

/* ---- herindeling homepage (okt. 2026): korte blokken die doorverwijzen ---- */
/* foto's in lopende tekst (bouw/inhoud) en de brede teamfoto op /over-ons/ */
.inhoud-fotos{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.inhoud-fotos figure{ margin:0; }
.inhoud-fotos figcaption{ margin-top:.5rem; font-family:'IBM Plex Mono',monospace; font-size:10.56px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-400); line-height:1.4; }
/* duo: liggende + staande foto even hoog (3:2 naast 2:3 -> kolommen 9:4) */
.inhoud-fotos-duo{ grid-template-columns:9fr 4fr; align-items:start; }
@media(max-width:519px){ .inhoud-fotos{ grid-template-columns:1fr; } }
.team-breed{ aspect-ratio:2/1; }
@media(max-width:639px){ .team-breed{ aspect-ratio:3/2; } }

/* kernlijnen: hele kaart is een link, bovenin een echte werkplaatsfoto */
a.kernlijn{ display:flex; flex-direction:column; }
.kernlijn-beeld{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-100); border-bottom:1px solid var(--paper-200); }
.kernlijn-beeld img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
a.kernlijn:hover .kernlijn-beeld img{ transform:scale(1.04); }
.kernlijn-tekst{ display:flex; flex-direction:column; flex:1; padding:1.6rem 1.75rem 1.75rem; }
.kernlijn-meer{ display:inline-flex; align-items:center; gap:.45rem; margin-top:auto; padding-top:1.25rem;
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--blue); }
a.kernlijn:hover .kernlijn-meer{ color:var(--ink); }
a.kernlijn:hover .kernlijn-meer svg{ transform:translateX(3px); }
.kernlijn-meer svg{ transition:transform .2s ease; }
/* sectoren (was een lopende band) */
.sectoren{ display:flex; flex-wrap:wrap; gap:.5rem; max-width:470px; }
.sectoren li{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .7rem; border:1px solid var(--paper-200);
  background:#fff; font-family:'IBM Plex Mono',monospace; font-size:10.56px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-500); }
/* FAQ: door naar de kennisbank */
.faq-meer{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1.5rem; font-family:'IBM Plex Mono',monospace;
  font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--blue); }
.faq-meer:hover{ color:var(--ink); }
/* verwijzing naar de leidingconfigurator: lichte kaart, blauwe haakjes zoals #lg-embed */
.leiding-kaart{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; padding:1.6rem;
  background:#fff; border:1px solid var(--paper-200); color:var(--ink); --hook:rgba(27,95,168,.55);
  box-shadow:var(--shadow-card); transition:border-color .2s ease, transform .2s ease; }
.leiding-kaart:hover{ border-color:rgba(27,95,168,.45); transform:translateY(-2px); }
.leiding-kaart .h-display{ color:var(--ink); }
.leiding-kaart p{ color:var(--ink-500); }
.leiding-kaart .eyebrow{ color:var(--blue); }
.leiding-kaart .eyebrow[data-blad]::before{ color:var(--blue); border-color:rgba(27,95,168,.35); background:transparent; }
.leiding-kaart-tekening{ position:relative; border:1px solid var(--paper-200); padding:.6rem 1rem; background-color:var(--paper-50); }
.leiding-kaart-tekening .lt{ position:relative; display:block; width:100%; height:auto; max-height:150px; color:var(--blue); }
.leiding-kaart-knop{ justify-self:start; white-space:nowrap; }
@media(min-width:900px){
  .leiding-kaart{ grid-template-columns:240px minmax(0,1fr) auto; gap:2.25rem; padding:1.75rem 2.25rem; }
}
/* werkplaats: vier foto's in één rij */
.galerij-strook{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.galerij-strook .gknop{ aspect-ratio:4/3; }
@media(min-width:1000px){ .galerij-strook{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } }
/* machinepark in één regel (namen uit config.js) */
.mp-rij{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mp-rij li{ padding:.45rem .75rem; border:1px solid var(--paper-200); background:#fff; font-family:'IBM Plex Mono',monospace;
  font-size:10.56px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-700); }
/* leiding-configurator/: kaarten "meer leidingwerk" */
.verder-kaart{ display:flex; flex-direction:column; background:#fff; padding:1.5rem; transition:background .2s ease; }
.verder-kaart:hover{ background:var(--paper-50); }
.verder-kaart:hover strong{ color:var(--blue); }

@media(max-width:1023px){
 .home-page #faq-lijst {grid-template-columns:1fr;}
}
/* mobiel: kaartenrijen veegbaar naast elkaar i.p.v. onder elkaar (kernlijnen,
   projecten). De volgende kaart steekt een stukje in beeld: dat is de hint.
   .home-page ervoor: anders wint Tailwinds .grid (laadt na dit bestand). */
@media(max-width:767px){
 .home-page .veeg {display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-20px;margin-right:-20px;
   padding:4px 20px 16px;scroll-padding:0 20px;overscroll-behavior-x:contain;scrollbar-width:none;}
 .home-page .veeg::-webkit-scrollbar {display:none;}
 .home-page .veeg > * {flex:0 0 84%;min-width:0;scroll-snap-align:start;}
 .proces-stap {padding-bottom:1.25rem;}
}
@media(max-width:767px){
 .home-page #hoofd > section.py-24 {padding-top:48px;padding-bottom:48px;}
 .home-page #hoofd > section:first-child {min-height:0;padding-top:112px;padding-bottom:40px;}
 .home-page #faq-lijst {grid-template-columns:1fr;}
 .home-welcome {max-width:none;}
 .home-availability {padding:22px;}
 #configurators {scroll-margin-top:100px;}
 .home-page #hero-eyebrow {white-space:normal;}
}

/* ------------------------------------------------ inhoud (lopende tekst)
   Landings-, kennisbank- en categorieteksten uit bouw/inhoud/. Zelfde
   typografie als de rest: Barlow-koppen, Plex-tekst, mono-tabelkoppen.     */
.inhoud{ color:var(--ink-700); font-size:17px; line-height:1.7; }
.inhoud > * + *{ margin-top:1.1em; }
.inhoud h2{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(1.7rem,3.2vw,2.2rem);
  line-height:1.1; color:var(--ink); margin-top:2.2em; letter-spacing:-.005em; }
.inhoud h3{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1.35rem; line-height:1.2;
  color:var(--ink); margin-top:1.6em; }
.inhoud h2 + *, .inhoud h3 + *{ margin-top:.6em; }
.inhoud > :first-child{ margin-top:0; }
.inhoud a:not(.btn){ color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.inhoud a:not(.btn):hover{ color:var(--deep); }
.inhoud ul, .inhoud ol{ padding-left:1.25rem; }
.inhoud ul{ list-style:square; }
.inhoud ol{ list-style:decimal; }
.inhoud li + li{ margin-top:.35em; }
.inhoud li::marker{ color:var(--blue); }
.inhoud strong{ color:var(--ink); font-weight:600; }
.inhoud .tabel-wrap{ overflow-x:auto; border:1px solid var(--paper-200); }
.inhoud table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.inhoud th, .inhoud td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--paper-200); vertical-align:top; }
.inhoud thead th{ font-family:'IBM Plex Mono',monospace; font-size:10.56px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); background:var(--paper-50); }
.inhoud tbody tr:last-child td, .inhoud tbody tr:last-child th{ border-bottom:0; }
.inhoud tbody th{ font-weight:600; color:var(--ink); }
.inhoud .kader{ border:1px solid var(--paper-200); border-left:3px solid var(--blue); background:var(--paper-50); padding:1rem 1.2rem; }
.inhoud .kaarten{ display:grid; gap:1px; background:var(--paper-200); border:1px solid var(--paper-200);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.inhoud .kaarten > a{ display:block; background:#fff; padding:1.1rem 1.2rem; text-decoration:none; color:var(--ink-700); transition:background .2s ease; }
.inhoud .kaarten > a:hover{ background:var(--paper-50); }
.inhoud .kaarten > a strong{ display:block; font-family:'Barlow Condensed',sans-serif; font-size:1.25rem; color:var(--ink); }
.inhoud .kaarten > a span{ display:block; margin-top:.3rem; font-size:15px; line-height:1.5; color:var(--ink-500); }
.inhoud blockquote{ border-left:3px solid var(--yellow); padding:.2rem 0 .2rem 1.1rem; color:var(--ink-700); }
.inhoud blockquote footer{ margin-top:.5rem; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-500); }
.inhoud-faq{ margin-top:3rem; }
.inhoud-faq h2{ margin-bottom:1rem; }
.inhoud-faq .faq-item summary{ padding:1.05rem 0; gap:1rem; justify-content:space-between; }

/* /luiken/: onze luiktypes (beeld + typecode + naam), gelijk aan de luiken-nieuwsbrief */
.luiktypes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--paper-200); border:1px solid var(--paper-200); }
@media(min-width:640px){ .luiktypes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.inhoud .luiktypes a:not(.btn){ display:flex; flex-direction:column; gap:.2rem; padding:1rem 1rem 1.15rem; background:#fff; color:inherit; text-decoration:none; }
.luiktypes img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; margin-bottom:.6rem; transition:transform .4s var(--ease-out); }
.luiktypes a:hover img{ transform:scale(1.03); }
.luiktype-code{ font-family:'IBM Plex Mono',monospace; font-size:10.56px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.luiktypes strong{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.2rem; line-height:1.15; color:var(--ink); }
.luiktypes a:hover strong{ color:var(--blue); }
.luiktypes span:last-child{ font-size:14px; line-height:1.45; color:var(--ink-500); }

/* ---- taalkeuze (linksboven) en taalsuggestie ----
   Vlag + taalcode als knop; de lijst bevat gewone links naar dezelfde pagina in
   de andere talen (js/taal.js regelt toetsenbord en onthouden). Op desktop in de
   bovenbalk, op mobiel naast het logo. */
.taalkeuze{ position:relative; display:inline-flex; }
.taalkeuze-knop{ display:inline-flex; align-items:center; gap:.4rem; min-height:30px; padding:.2rem .45rem; border:1px solid transparent;
  border-radius:6px; background:transparent; color:var(--ink-700); font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.08em; cursor:pointer; }
.taalkeuze-knop:hover, .taalkeuze-knop[aria-expanded="true"]{ border-color:var(--paper-200); background:#fff; color:var(--ink); }
.taalkeuze-knop:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.taalvlag{ width:18px; height:12px; flex-shrink:0; border-radius:2px; box-shadow:0 0 0 1px rgba(21,23,26,.14); }
.taalkeuze-pijl{ width:12px; height:12px; transition:transform .2s ease; }
.taalkeuze-knop[aria-expanded="true"] .taalkeuze-pijl{ transform:rotate(180deg); }
.taalkeuze-lijst{ position:absolute; top:calc(100% + 6px); left:0; z-index:95; min-width:200px; margin:0; padding:.35rem; list-style:none;
  background:#fff; border:1px solid var(--paper-200); border-radius:8px; box-shadow:0 18px 40px -18px rgba(21,23,26,.4); }
.taalkeuze-lijst[hidden]{ display:none; }
.taalkeuze-lijst a{ display:flex; align-items:center; gap:.65rem; min-height:44px; padding:.55rem .7rem; border-radius:6px;
  color:var(--ink-700); font:500 14px/1.2 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:0; text-decoration:none; }
.taalkeuze-lijst a:hover, .taalkeuze-lijst a:focus-visible{ background:var(--paper-50); color:var(--blue); outline:none; }
.taalkeuze-lijst a:focus-visible{ box-shadow:inset 0 0 0 2px var(--blue); }
.taalkeuze-lijst a[aria-current]{ color:var(--ink); font-weight:600; }
.taalkeuze-lijst a[aria-current]::after{ content:'✓'; margin-left:auto; color:var(--blue); }
.taalkeuze-m .taalkeuze-knop{ min-height:44px; min-width:44px; padding:.3rem .5rem; border-color:var(--paper-200); justify-content:center; }
@media (min-width:1024px){ .taalkeuze-m{ display:none; } }

.taal-suggestie{ position:fixed; z-index:96; top:78px; left:12px; right:12px; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem;
  padding:.8rem 1rem; background:var(--ink); color:#fff; border-radius:10px; box-shadow:0 20px 50px -20px rgba(0,0,0,.55);
  font:400 14px/1.4 'IBM Plex Sans',system-ui,sans-serif; }
.taal-suggestie-tekst{ flex:1 1 200px; margin:0; }
.taal-suggestie-ja{ display:inline-flex; align-items:center; min-height:40px; padding:.5rem .95rem; border-radius:999px; background:var(--yellow);
  color:#000; font-weight:600; text-decoration:none; }
.taal-suggestie-ja:focus-visible, .taal-suggestie-nee:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.taal-suggestie-nee{ min-height:40px; padding:.45rem .85rem; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:transparent; color:#fff; cursor:pointer; }
@media (min-width:640px){ .taal-suggestie{ top:auto; right:auto; bottom:24px; left:24px; max-width:440px; } }
@media print{ .taalkeuze, .taal-suggestie{ display:none !important; } }