/*
  Stijlkit van de paginaset in de stijl van variant G (ontwerpronde 08/10/2026).
  Het eerste deel is de inline CSS van homepage-g, ongewijzigd en in dezelfde volgorde, zodat de
  homepage van deze set er exact uitziet als G. Het tweede deel (onderaan) voegt de klassen toe
  die een binnenpagina nodig heeft. Uitleg en regels: LEESMIJ.md naast dit bestand.
  Laden met <link rel="stylesheet" href="stijl.css"> (het bouwscript zet het pad en de versiestempel).
*/

/* Lettertypes, sinds 11/10/2026 zelf gehost in fonts/ naast dit bestand (de woff2-bestanden van
   Google Fonts, OFL-licentie, zelfde snedes als voorheen). Daarvoor stond een stylesheet van
   fonts.googleapis.com in de kop van elke pagina, en die blokkeerde de eerste weergave op mobiel
   met ruim 0,8 s (Lighthouse 11/10/2026). De paden zijn relatief aan stijl.css, dus ze kloppen in de
   webroot, in /nieuw/ en in /_nieuw/. Hanken Grotesk en Newsreader zijn variabele fonts: een bestand
   dekt de gewichten 300 tot 500 en de optische maten. De latin-ext-bestanden laadt de browser alleen
   als een pagina een teken bevat dat buiten latin valt. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --plaster:#EFEAE3;
  --ink:#16130E;
  --ink-2:#211D17;
  --taupe:#B6A89F;
  --bronze:#8A6B3D;
  --lijn:rgba(239,234,227,.16);
  --lijn-sterk:rgba(239,234,227,.38);
  --disp:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --mx:clamp(16px,4.5vw,88px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--ink);color:var(--plaster);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--plaster);color:var(--ink)}
:focus-visible{outline:2px solid var(--plaster);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Serif-kapitalen: de kop, de sectiekoppen en de bijschriften bij het werk. */
.kap{font-family:var(--disp);font-weight:400;letter-spacing:-.01em}

/* Onderlijnde tekstlink, de enige vorm van oproep op deze pagina. */
.tl{display:inline-flex;align-items:center;min-height:44px;font-size:15px;letter-spacing:.04em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:var(--taupe);transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
.tl:hover{text-decoration-color:var(--plaster)}

/* ===== KOP ===== */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--mx);border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease)}
header.stuck{background:rgba(22,19,14,.97);border-color:var(--lijn)}
.merk{font-family:var(--disp);font-size:26px;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.hoofdnav{display:flex;align-items:center;gap:clamp(16px,1.6vw,22px)}
.hoofdnav ul{list-style:none;display:flex;gap:clamp(14px,1.5vw,20px)}
.hoofdnav a{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;color:var(--plaster);opacity:.88;transition:opacity .3s var(--ease)}
.hoofdnav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.taal,.lang{display:flex;gap:2px;padding-left:clamp(14px,1.6vw,24px);border-left:1px solid var(--lijn)}
.taal a,.lang a{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:44px;color:var(--taupe)}
.taal a[aria-current="true"],.lang a.on{color:var(--plaster)}
.taal a:hover,.lang a:hover{color:var(--plaster)}
.menuknop{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:var(--plaster);cursor:pointer}
.menuknop svg{width:24px;height:24px}
/* Zeven menu-items, drie talen en twee iconen passen pas vanaf 1380 px op een regel (Engels
   1400, Frans 1500, gemeten op 10/10/2026 met white-space:nowrap); daaronder de menuknop, zodat
   een item nooit over twee regels breekt. Zelfde grenzen voor .direct-knoppen.mobiel verderop. */
@media (max-width:1379px){
  .hoofdnav{display:none}
  .menuknop{display:inline-flex}
}
@media (max-width:1399px){
  html:lang(en) .hoofdnav{display:none}
  html:lang(en) .menuknop{display:inline-flex}
}
@media (max-width:1499px){
  html:lang(fr) .hoofdnav{display:none}
  html:lang(fr) .menuknop{display:inline-flex}
}

/* Paneel op de telefoon: volledig scherm op ink, eigen kleine JS. */
.paneel{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;padding:14px var(--mx) calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.paneel[hidden]{display:none}
.paneel.open{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
.paneel-kop{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--lijn)}
.paneel nav ul{list-style:none;margin-top:12px}
.paneel nav a{display:flex;align-items:center;min-height:56px;font-family:var(--disp);font-size:17px;text-transform:uppercase;letter-spacing:.16em;text-decoration:none;border-bottom:1px solid var(--lijn)}
.paneel .taal,.paneel .lang{border-left:0;padding-left:0;margin-top:20px;gap:8px}
.paneel .taal a,.paneel .lang a{justify-content:flex-start;min-width:44px}

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;min-height:100vh;display:grid;place-items:center;text-align:center;overflow:hidden}
@supports (min-height:100svh){.hero{min-height:100svh}}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%}
.hero picture img{object-fit:cover;object-position:center 60%}
/* Het stilstaande beeld blijft het LCP-element; de video ligt er absoluut overheen en wordt pas
   zichtbaar zodra hij speelt. De sluier (::after) ligt over beeld en video samen. */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:0;transition:opacity .8s var(--ease)}
.hero-vid.speelt{opacity:1}
@media (max-width:900px){.hero-vid{display:none}}
@media (prefers-reduced-motion:reduce){.hero-vid{display:none}}
.hero::after{content:"";position:absolute;inset:0;background:rgba(16,13,9,.52)}
.hero-tekst{position:relative;z-index:1;padding:120px var(--mx) 96px;max-width:980px}
.hero h1{font-size:clamp(38px,5.6vw,76px);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.hero p{margin:26px auto 0;max-width:none;font-weight:300;font-size:clamp(12px,1.05vw,14px);line-height:1.9;text-transform:uppercase;letter-spacing:.28em;color:var(--plaster)}
.hero .tl{margin-top:22px;font-weight:300;font-size:clamp(11px,.95vw,13px);text-transform:uppercase;letter-spacing:.28em}

/* ===== SECTIES ===== */
section{padding:clamp(88px,11vw,168px) var(--mx)}
.sectiekop{font-size:clamp(26px,2.8vw,40px);line-height:1.2;letter-spacing:-.01em}

/* Positie */
.positie{text-align:center}
.positie p{max-width:58ch;margin:0 auto;font-family:var(--disp);font-size:clamp(19px,1.9vw,24px);line-height:1.62}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 36px;margin-top:28px}

/* Drie projecten: groot beeld en een smalle tekstkolom, telkens anders gezet. */
.projecten .sectiekop{text-align:center;margin-bottom:clamp(56px,7vw,104px)}
.proj{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:end}
.proj + .proj{margin-top:clamp(96px,12vw,184px)}
.proj figure{min-width:0;overflow:hidden;background:var(--ink-2)}
.proj img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) saturate(.88)}
.ptekst{min-width:0;padding-bottom:4px}
.proj h3{font-family:var(--disp);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.18;letter-spacing:.005em;text-wrap:balance}
.proj .plaats{margin-top:12px;font-size:12px;letter-spacing:.18em;color:var(--taupe)}
.proj .ptekst p:not(.plaats){margin-top:22px;max-width:40ch}
.proj .tl{margin-top:14px}
.p1 figure{grid-column:1 / 9;aspect-ratio:3/2} .p1 .ptekst{grid-column:9 / 13;padding-left:clamp(0px,1vw,16px)}
.p2 .ptekst{grid-column:2 / 6;grid-row:1;align-self:center} .p2 figure{grid-column:6 / 13;grid-row:1;aspect-ratio:3/2}
.p3 figure{grid-column:2 / 8;aspect-ratio:4/3} .p3 .ptekst{grid-column:9 / 13;align-self:start;padding-top:clamp(0px,4vw,64px)}
@media (max-width:899px){
  .proj{grid-template-columns:1fr;row-gap:26px}
  .proj figure,.proj .ptekst,.p2 figure,.p2 .ptekst{grid-column:1;grid-row:auto;align-self:auto;padding:0}
  .p2 figure{order:-1}
  .p3 figure{aspect-ratio:3/2}
}
@media (max-width:599px){.proj figure{aspect-ratio:4/5}}

/* Meer werk: mozaiek in verschillende maten, niets is een gelijke tegel. */
.werk{padding-top:0}
.werk .sectiekop{text-align:center;margin-bottom:clamp(48px,6vw,88px)}
.mozaiek{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:clamp(56px,7vw,104px);align-items:end}
.mozaiek figure{min-width:0}
.mozaiek .beeld{overflow:hidden;background:var(--ink-2)}
.mozaiek img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) saturate(.88)}
.mozaiek figcaption{margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.mozaiek figcaption .t{font-family:var(--disp);font-size:17px;letter-spacing:0;line-height:1.4}
.mozaiek figcaption .p{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--taupe)}
.g1{grid-column:1 / 9} .g1 .beeld{aspect-ratio:16/10}
.g2{grid-column:9 / 13} .g2 .beeld{aspect-ratio:4/5}
.g3{grid-column:2 / 6} .g3 .beeld{aspect-ratio:4/5}
.g4{grid-column:7 / 13;align-self:center} .g4 .beeld{aspect-ratio:16/9}
.g5{grid-column:1 / 5} .g5 .beeld{aspect-ratio:4/5}
.g6{grid-column:7 / 11;align-self:start} .g6 .beeld{aspect-ratio:4/5}
.g7{grid-column:2 / 9} .g7 .beeld{aspect-ratio:3/2}
.g8{grid-column:9 / 13;align-self:start} .g8 .beeld{aspect-ratio:1/1}
.g9{grid-column:1 / 9} .g9 .beeld{aspect-ratio:16/9}
.g10{grid-column:9 / 13} .g10 .beeld{aspect-ratio:3/4}
.g11{grid-column:2 / 7} .g11 .beeld{aspect-ratio:4/3}
.g12{grid-column:8 / 13;align-self:center} .g12 .beeld{aspect-ratio:16/10}
.g13{grid-column:3 / 11} .g13 .beeld{aspect-ratio:3/2}
.werk-slot{margin-top:clamp(64px,8vw,120px);text-align:center}
.werk-slot p{color:var(--taupe);font-size:16px}
/* Tablet: brede beelden over de volle breedte, de rest per twee. */
@media (max-width:899px){
  .mozaiek figure{align-self:auto}
  .mozaiek .t-breed{grid-column:1 / 13}
  .mozaiek .t-breed .beeld{aspect-ratio:3/2}
  .mozaiek .t-a{grid-column:1 / 7}
  .mozaiek .t-a .beeld{aspect-ratio:4/5}
  .mozaiek .t-b{grid-column:7 / 13;align-self:end}
  .mozaiek .t-b .beeld{aspect-ratio:1/1}
}
/* Telefoon: een kolom met verspringende marges; vanaf het tiende beeld achter "Meer werk tonen". */
@media (max-width:599px){
  .mozaiek{row-gap:48px}
  .mozaiek figure,.mozaiek .t-a,.mozaiek .t-b{grid-column:1 / 13;align-self:auto}
  .mozaiek .t-a{margin-right:14%}
  .mozaiek .t-b{margin-left:14%}
  .mozaiek .t-a .beeld,.mozaiek .t-b .beeld{aspect-ratio:4/5}
  .mozaiek.kort .extra{display:none}
}
.meer-rij{text-align:center;margin-top:40px}
.meer-rij:has(.meer[hidden]){display:none}
@media (min-width:600px){.meer-rij{display:none}}

/* Disciplines */
.disc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,104px);align-items:center;border-top:1px solid var(--lijn)}
.disc figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.disc figcaption{margin-top:12px;font-size:13px;color:var(--taupe)}
.disc .sectiekop{margin-bottom:28px}
.disc ul{list-style:none;border-top:1px solid var(--lijn-sterk)}
.disc li{border-bottom:1px solid var(--lijn-sterk)}
.disc li a{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;padding:24px 0;text-decoration:none;min-height:44px}
.disc .dt{font-family:var(--disp);font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.disc .ds{grid-column:1;color:var(--taupe);font-size:16px}
.disc .pijl{grid-row:1 / 3;grid-column:2;width:28px;height:28px;color:var(--taupe);transition:transform .35s var(--ease),color .35s var(--ease)}
.disc li a:hover .pijl{transform:translateX(4px);color:var(--plaster)}
.disc li a:hover .dt{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
@media (max-width:899px){.disc{grid-template-columns:1fr}}

/* Maatwerk */
.maat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:center;padding-top:0}
.maat img{width:100%;aspect-ratio:5/4;object-fit:cover}
.maat .sectiekop{margin-bottom:22px}
.maat p{max-width:40ch}
@media (max-width:899px){.maat{grid-template-columns:1fr}}

/* Inkoop, met het zijdelingse label */
.inkoop{border-top:1px solid var(--lijn)}
.inkoop-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,88px);max-width:1080px;margin:0 auto}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.label.staand{writing-mode:vertical-rl;transform:rotate(180deg);align-self:start;padding-top:6px}
.inkoop h2{font-size:clamp(22px,2.6vw,36px);line-height:1.3;letter-spacing:.12em;max-width:22ch}
.inkoop p{margin-top:28px;max-width:62ch;font-size:18px}
.inkoop .tl{margin-top:20px}
@media (max-width:699px){
  .inkoop-in{grid-template-columns:1fr;gap:20px}
  .label.staand{writing-mode:horizontal-tb;transform:none;padding-top:0}
}

/* Traject: vier stappen in de stijl van de disciplinelijst, zonder nummers of pijlen. */
.traject{border-top:1px solid var(--lijn)}
.traject-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);max-width:1180px;margin:0 auto;align-items:start}
.traject ol{list-style:none;border-top:1px solid var(--lijn-sterk)}
.traject li{padding:24px 0;border-bottom:1px solid var(--lijn-sterk)}
.traject .dt{display:block;font-family:var(--disp);font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.traject .ds{display:block;margin-top:6px;color:var(--taupe);font-size:16px;max-width:52ch}
@media (max-width:899px){.traject-in{grid-template-columns:1fr}}

/* Atelier en uitnodiging */
.atelier{border-top:1px solid var(--lijn);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.atelier .sectiekop{margin-bottom:22px}
.atelier-intro p{max-width:38ch}
.direct{margin-top:32px;font-size:15px;color:var(--taupe);line-height:1.8}
.direct .tl{font-size:15px;color:var(--plaster);margin-top:6px}
.uitnodiging{min-width:0}

/* Twee routes: rustige radiokeuzes met een haarlijn, geen kaarten. */
.routes{grid-column:1 / -1;border:0;min-width:0;border-top:1px solid var(--lijn-sterk)}
.route{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 18px;padding:20px 0;min-height:44px;border-bottom:1px solid var(--lijn-sterk);cursor:pointer}
.route input{position:absolute;opacity:0;width:1px;height:1px}
.route .bol{grid-row:1 / 3;width:20px;height:20px;margin-top:4px;border:1px solid var(--lijn-sterk);border-radius:50%;transition:border-color .3s var(--ease)}
.route .rt{font-family:var(--disp);font-size:clamp(19px,1.7vw,22px);line-height:1.3}
.route .rs{grid-column:2;color:var(--taupe);font-size:15px;line-height:1.55}
.route:hover .bol{border-color:var(--plaster)}
.route input:checked + .bol{border-color:var(--plaster);background:radial-gradient(circle,var(--plaster) 0 4px,transparent 5px)}
.route input:focus-visible + .bol{outline:2px solid var(--plaster);outline-offset:4px}
.zelf{margin-top:44px;padding-top:24px;border-top:1px solid var(--lijn);font-size:15px;color:var(--taupe);max-width:60ch}
.zelf .tl{color:var(--plaster);margin-top:4px}
@media (max-width:899px){.atelier{grid-template-columns:1fr}}

#leadform{display:grid;grid-template-columns:1fr 1fr;gap:28px 28px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1 / -1}
.field > label:not(.file){font-size:13px;letter-spacing:.08em;color:var(--plaster);line-height:1.2}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--lijn-sterk);color:var(--plaster);font:inherit;font-size:17px;padding:10px 0;min-height:44px;border-radius:0;transition:border-color .3s var(--ease)}
.field textarea{min-height:112px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(182,168,159,.75)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--plaster)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--plaster);outline-offset:4px}
#plan{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 18px;border:1px dashed var(--lijn-sterk);cursor:pointer;transition:border-color .3s var(--ease)}
.file:hover,.file.sleep{border-color:var(--plaster)}
#plan:focus-visible + .file{outline:2px solid var(--plaster);outline-offset:4px}
.file .tekst{font-size:15px}
.file .kies{font-size:13px;letter-spacing:.08em;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.bestanden{list-style:none;display:flex;flex-direction:column;gap:6px}
.bestanden:empty{display:none}
.bestanden li{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0}
.bestanden .vink{color:var(--taupe);font-size:9px}
.bestanden .naam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bestanden .maat{color:var(--taupe)}
.bestanden button{background:none;border:0;color:var(--plaster);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:0 4px}
.bestanden .tel{color:var(--taupe)}
.form-err{display:none;grid-column:1 / -1;font-size:15px;padding:14px 16px;border-left:2px solid var(--plaster);background:var(--ink-2)}
.form-err.show{display:block}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.form-foot small{font-size:13px;color:var(--taupe);max-width:40ch;line-height:1.55}
.form-foot small a{color:var(--plaster)}
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;background:transparent;color:var(--plaster);border:1px solid var(--plaster);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.knop:hover{background:var(--plaster);color:var(--ink)}
.knop:disabled{opacity:.5;cursor:progress}
.form-ok{display:none;grid-column:1 / -1}
.form-ok.show{display:block}
.form-ok h3{font-family:var(--disp);font-weight:400;font-size:26px;line-height:1.3;margin-bottom:10px}
@media (max-width:599px){
  #leadform{grid-template-columns:1fr}
  .file{flex-direction:column;align-items:flex-start;gap:6px}
  .knop{width:100%}
}

/* ===== VOET ===== */
footer{border-top:1px solid var(--lijn);padding:56px var(--mx) calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 48px;font-size:14px;color:var(--taupe);line-height:1.8}
footer .fm{font-family:var(--disp);font-size:22px;color:var(--plaster);letter-spacing:.02em}
footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px}
footer ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--plaster)}
footer ul a:hover{text-decoration:underline;text-underline-offset:5px}

/* ======================================================================
   BINNENPAGINA'S
   Alles hieronder is nieuw ten opzichte van G en raakt de homepage niet:
   geen enkele van deze klassen komt op de homepage voor.
   ====================================================================== */

/* Menu: de link van de pagina waar men is. */
.hoofdnav a[aria-current="page"],.paneel nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* Beeld dat links moet blijven staan als het smal wordt bijgesneden (kastenwand links in de foto). */
.proj img.snit-links,.paar img.snit-links,.pagina-hero img.snit-links{object-position:20% 50%}

/* Knop als link (de homepage gebruikt .knop enkel op een button). */
a.knop{text-decoration:none}

/* Paginahero: een beeld over de volle breedte, de paginatitel in serif-kapitalen en een zin.
   Lager dan de homepagehero, zodat de inhoud op het eerste scherm al aankondigt. */
.pagina-hero{position:relative;min-height:78vh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:0}
@supports (min-height:100svh){.pagina-hero{min-height:78svh}}
.pagina-hero picture,.pagina-hero picture img,.pagina-hero > img{position:absolute;inset:0;width:100%;height:100%}
.pagina-hero picture img,.pagina-hero > img{object-fit:cover;object-position:center 55%}
.pagina-hero::after{content:"";position:absolute;inset:0;background:rgba(16,13,9,.5)}
.pagina-hero-tekst{position:relative;z-index:1;padding:120px var(--mx) 80px;max-width:920px}
.pagina-hero h1{font-size:clamp(34px,4.6vw,64px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.pagina-hero p{margin:24px auto 0;max-width:40ch;font-size:clamp(16px,1.4vw,19px)}
@media (max-width:599px){.pagina-hero{min-height:72vh}@supports (min-height:100svh){.pagina-hero{min-height:72svh}}}

/* Tekstkolom: rustig en smal, voor de uitleg van de pagina. Op een section of een div,
   nooit op een span (.file .tekst in het formulier heet toevallig ook zo). */
section.tekst,div.tekst{max-width:calc(62ch + 2 * var(--mx));margin:0 auto}
div.tekst{padding-left:0;padding-right:0;max-width:62ch}
.tekst .sectiekop{margin-bottom:28px}
.tekst p{max-width:62ch}
.tekst p + p{margin-top:1.1em}
.tekst .aanloop{font-family:var(--disp);font-size:clamp(19px,1.9vw,24px);line-height:1.62}
.tekst .tl{margin-top:18px}

/* Beeld en tekst als paar; .om zet het beeld rechts. Op de telefoon staat het beeld altijd eerst. */
.paar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:center}
.paar + .paar{padding-top:0}
.paar figure{grid-column:1 / 8;grid-row:1;min-width:0;overflow:hidden;background:var(--ink-2)}
.paar figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.12) saturate(.88)}
.paar figcaption{margin-top:12px;font-size:13px;color:var(--taupe)}
.paar .paar-tekst{grid-column:9 / 13;grid-row:1;min-width:0}
.paar.om figure{grid-column:6 / 13}
.paar.om .paar-tekst{grid-column:1 / 5}
.paar h2{font-family:var(--disp);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.18;text-wrap:balance}
.paar h2.kap{font-size:clamp(20px,2.2vw,30px);line-height:1.3}
.paar p{margin-top:20px;max-width:40ch}
.paar .tl{margin-top:14px}
@media (max-width:899px){
  .paar{grid-template-columns:1fr;row-gap:26px}
  .paar figure,.paar .paar-tekst,.paar.om figure,.paar.om .paar-tekst{grid-column:1;grid-row:auto}
  .paar figure img{aspect-ratio:3/2}
}

/* Lijst met haarlijnen, zoals de disciplines. Een li met een a wordt een volledige klikregel
   met een pijl; een li zonder a is een rustige regel met titel (.dt) en uitleg (.ds). */
.lijst{list-style:none;border-top:1px solid var(--lijn-sterk);max-width:900px}
.lijst li{padding:24px 0;border-bottom:1px solid var(--lijn-sterk)}
.lijst .dt{display:block;font-family:var(--disp);font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.lijst .ds{display:block;margin-top:6px;color:var(--taupe);font-size:16px;max-width:52ch}
.lijst li > a{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;margin:-24px 0;padding:24px 0;text-decoration:none;min-height:44px}
.lijst li > a .ds{grid-column:1;margin-top:0}
.lijst .pijl{grid-row:1 / 3;grid-column:2;width:28px;height:28px;color:var(--taupe);transition:transform .35s var(--ease),color .35s var(--ease)}
.lijst li > a:hover .pijl{transform:translateX(4px);color:var(--plaster)}
.lijst li > a:hover .dt{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){.lijst li > a:hover .pijl{transform:none}}

/* Beeldenstrook: twee tot vier beelden naast elkaar, telkens een andere breedte en verhouding.
   Bijschriften zoals in het mozaiek (.t en .p). Op de telefoon onder elkaar, verspringend. */
.strook{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:clamp(40px,5vw,72px);align-items:end}
.strook figure{min-width:0}
.strook .beeld{overflow:hidden;background:var(--ink-2)}
.strook img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) saturate(.88)}
.strook figcaption{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.strook figcaption .t{font-family:var(--disp);font-size:17px;letter-spacing:0;line-height:1.4}
.strook figcaption .p{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--taupe)}
.strook figure:nth-child(1){grid-column:1 / 6} .strook figure:nth-child(1) .beeld{aspect-ratio:4/3}
.strook figure:nth-child(2){grid-column:6 / 9} .strook figure:nth-child(2) .beeld{aspect-ratio:3/4}
.strook figure:nth-child(3){grid-column:9 / 13;align-self:start} .strook figure:nth-child(3) .beeld{aspect-ratio:1/1}
.strook figure:nth-child(4){grid-column:3 / 11} .strook figure:nth-child(4) .beeld{aspect-ratio:16/9}
.strook figure:nth-child(2):last-child{grid-column:7 / 13} .strook figure:nth-child(2):last-child .beeld{aspect-ratio:4/5}
.strook figure:nth-child(1):nth-last-child(2){grid-column:1 / 7}
@media (max-width:599px){
  .strook{row-gap:44px}
  .strook figure,.strook figure:nth-child(n){grid-column:1 / 13;align-self:auto}
  .strook figure:nth-child(odd){margin-right:14%}
  .strook figure:nth-child(even){margin-left:14%}
  .strook figure:nth-child(n) .beeld{aspect-ratio:4/5}
}

/* Slot: een uitnodiging, gecentreerd, onder een haarlijn. Een knop of een tekstlink, nooit beide. */
.slot{border-top:1px solid var(--lijn);text-align:center}
.slot .sectiekop{margin-bottom:22px}
.slot p{max-width:46ch;margin:0 auto;color:var(--plaster)}
.slot .knop,.slot .tl{margin-top:32px}
@media (max-width:599px){.slot .knop{width:100%}}

/* 09/10/2026, keuze Kevin: de koppen in het lettertype en de zetting van de huidige site (Newsreader, gewone kast), niet in serif-kapitalen. De kleine labels, de kop en de knoppen blijven in Space Mono zoals op cervano.be nu. */

/* ======================================================================
   ARTIKEL: kennisbank, garantie en de juridische pagina's (bouw-nieuw.py schrijft die uit de
   huidige bron). Een smalle tekstkolom, de kop zoals de rest van de site, tabellen met haarlijnen.
   ====================================================================== */
.artikel{max-width:1200px;margin:0 auto;padding:clamp(120px,16vh,170px) var(--mx) clamp(60px,8vw,110px)}
.artikel section{padding:0}
.artikel-kop{max-width:760px}
.kruimel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);display:flex;gap:12px;flex-wrap:wrap}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline;text-underline-offset:5px}
.artikel-kop .label{display:block;margin-top:clamp(28px,4vw,48px)}
.artikel-kop h1{font-size:clamp(32px,4.2vw,58px);line-height:1.1;letter-spacing:-.015em;margin-top:14px;text-wrap:balance}
.artikel-kop .onder{margin-top:22px;max-width:60ch;font-family:var(--disp);font-size:clamp(19px,1.9vw,24px);line-height:1.5}
.artikel-kop .onder a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.artikel-hero{margin:clamp(40px,6vw,72px) 0 0;overflow:hidden;background:var(--ink-2)}
.artikel-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.12) saturate(.88)}
.inhoud{max-width:760px;margin-top:clamp(40px,6vw,72px)}
.inhoud .kort{display:block;border-top:1px solid var(--lijn-sterk);border-bottom:1px solid var(--lijn-sterk);padding:26px 0;margin-bottom:clamp(36px,5vw,56px)}
.inhoud .kort .label{display:block;margin-bottom:12px}
.inhoud .kort p{font-family:var(--disp);font-size:clamp(18px,1.7vw,21px);line-height:1.55}
.inhoud .aanloop{font-family:var(--disp);font-size:clamp(19px,1.9vw,24px);line-height:1.62}
.inhoud p + p,.inhoud ul + p,.inhoud ol + p,.inhoud p + ul,.inhoud p + ol,.inhoud .tabelhoes + p,.inhoud figure + p{margin-top:1.1em}
.inhoud > section,.inhoud > .kort + p{margin-top:0}
.inhoud section{margin-top:clamp(44px,6vw,72px)}
.inhoud section .label{display:block;margin-bottom:10px}
.inhoud h2{font-family:var(--disp);font-weight:400;font-size:clamp(25px,2.6vw,36px);line-height:1.2;letter-spacing:-.01em;margin-bottom:18px;text-wrap:balance}
.inhoud h3{font-family:var(--disp);font-weight:400;font-size:clamp(20px,1.9vw,24px);line-height:1.3;margin:1.4em 0 .5em}
.inhoud p,.inhoud li{max-width:62ch}
.inhoud ul,.inhoud ol{padding-left:1.2em;margin-top:1em}
.inhoud li + li{margin-top:.4em}
.inhoud li::marker{color:var(--taupe)}
.inhoud a:not(.tl):not(.knop){text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--taupe)}
.inhoud a:not(.tl):not(.knop):hover{text-decoration-color:var(--plaster)}
.inhoud strong{font-weight:500}
.inhoud figure{margin:clamp(28px,4vw,44px) 0;overflow:hidden}
.inhoud figure img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.12) saturate(.88);background:var(--ink-2)}
.inhoud figcaption{margin-top:12px;font-size:13px;color:var(--taupe);max-width:62ch}
.tabelhoes{overflow-x:auto;margin:clamp(24px,3vw,36px) 0;-webkit-overflow-scrolling:touch}
.inhoud table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:480px}
.inhoud caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);padding-bottom:12px}
.inhoud th{text-align:left;font-weight:400;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);padding:10px 18px 10px 0;border-bottom:1px solid var(--lijn-sterk);vertical-align:bottom}
.inhoud td{padding:12px 18px 12px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.inhoud tr > :last-child{padding-right:0}
.inhoud .voorbehoud{border-left:1px solid var(--lijn-sterk);padding:4px 0 4px 22px;color:var(--taupe);font-size:15px}
.inhoud .voorbehoud p + p{margin-top:.8em}
.inhoud .updated{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-bottom:clamp(28px,4vw,44px)}
.juridisch .inhoud h2{font-size:clamp(21px,2vw,27px);margin-top:clamp(36px,5vw,56px)}
.artikel-vraag{border-top:1px solid var(--lijn);margin-top:clamp(56px,8vw,96px);padding-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(36px,6vw,96px)}
.artikel-vraag .sectiekop{margin-bottom:18px}
.vraag-intro p{max-width:40ch}
.vraag-intro .direct{margin-top:28px;font-size:15px;color:var(--taupe);line-height:1.8}
@media (max-width:899px){.artikel-vraag{grid-template-columns:1fr}}
.verder{border-top:1px solid var(--lijn);margin-top:clamp(56px,8vw,96px);padding-top:clamp(48px,6vw,80px)}
.verder .sectiekop{margin-bottom:28px}
.artikel .slot{margin-top:clamp(56px,8vw,96px);padding-top:clamp(48px,6vw,80px)}
.hub-groep{margin-top:clamp(48px,7vw,88px)}
.hub-groep .sectiekop{margin-bottom:20px}
.hub .lijst{max-width:none}
.bijlagestand{margin-top:14px;font-size:14px;color:var(--taupe)}
.bijlagestand.mis{color:var(--plaster)}
.bijlagestand .tl{min-height:0;font-size:14px;background:none;border:0;cursor:pointer;color:var(--plaster);font-family:inherit;padding:0}

/* ======================================================================
   CONFIGURATOR STALEN DEUREN (09/10/2026, uit /stalen-deuren-op-maat-antwerpen/, zelfde css en js).
   Die stylesheet rekent op de lichte variabelen van pages.css; de band zet ze en draait de pagina
   daar om naar plaster met inkt. Alleen Nederlands (data-enkel-nl): valt weg in /en/ en /fr/.
   ====================================================================== */
.sd-band{--line:#d9d2c7;--paper:#F6F2EC;--oak-tekst:#6F6353;--ease-uit:cubic-bezier(.22,.61,.36,1);background:var(--plaster);color:var(--ink);padding:clamp(56px,7vw,96px) var(--mx) 48px;max-width:none;margin:0}
.sd-band .disp{font-family:var(--disp);font-weight:400;letter-spacing:-.01em}
.sd-band .lbl{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oak-tekst)}
.sd-band ::selection{background:var(--ink);color:var(--plaster)}
.sd-band :focus-visible{outline-color:var(--ink)}
.sd-band .label{color:var(--oak-tekst)}
.sd-band-kop{max-width:1540px;margin:0 auto clamp(28px,4vw,48px)}
.sd-band-kop .sectiekop{margin-top:14px;color:var(--ink)}
.sd-band-kop p{margin-top:16px;max-width:62ch;color:var(--ink-2)}
.sd-band .sd-tabs{top:0}
/* De secties van de configurator krijgen niet de sectiepadding van de site: zijn css rekent op 0. */
.sd-band section{padding:0}
.sd-band .sd-info{padding-top:clamp(40px,5vw,64px)}
.pagina-hero-tekst .knop{margin-top:32px}
.slot .zelf.stalen-regel{margin-top:14px}
body.sd-atelier-open .sd-band-kop{display:none}

/* Artikel, tweede ronde (09/10/2026): inleiding met inhoudsopgave ernaast, secties met een haarlijn,
   beelden over de volle breedte tussen de secties, tussenkoppen met een lijn. */
.artikel-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,88px);margin-top:clamp(40px,6vw,72px);align-items:start}
.intro-tekst{max-width:760px}
.artikel .kort{display:block;border-top:1px solid var(--lijn-sterk);border-bottom:1px solid var(--lijn-sterk);padding:26px 0;margin-bottom:clamp(28px,4vw,44px)}
.artikel .kort .label{display:block;margin-bottom:12px}
.artikel .kort p{font-family:var(--disp);font-size:clamp(18px,1.7vw,21px);line-height:1.55}
.artikel .aanloop{font-family:var(--disp);font-size:clamp(20px,2vw,26px);line-height:1.58}
.intro-tekst p + p{margin-top:1.1em}
.inhoudsopgave{border-top:1px solid var(--lijn-sterk);padding-top:18px;position:sticky;top:96px}
.inhoudsopgave .label{display:block;margin-bottom:10px}
.inhoudsopgave ul{list-style:none}
.inhoudsopgave li{border-bottom:1px solid var(--lijn)}
.inhoudsopgave a{display:block;padding:11px 0;font-size:15px;line-height:1.45;text-decoration:none;color:var(--plaster);opacity:.82}
.inhoudsopgave a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (max-width:899px){.artikel-intro{grid-template-columns:1fr;gap:28px}.inhoudsopgave{position:static}}
.artikel .inhoud{max-width:none;margin-top:clamp(48px,7vw,96px)}
.inhoud > :not(figure),.inhoud section > :not(figure){max-width:760px}
.inhoud section{border-top:1px solid var(--lijn);padding-top:clamp(28px,4vw,44px);margin-top:clamp(44px,6vw,72px)}
.inhoud section:first-child{border-top:0;padding-top:0;margin-top:0}
.inhoud section h2{scroll-margin-top:110px}
.inhoud figure.vol{margin:clamp(48px,7vw,96px) 0 0;max-width:none}
.inhoud figure.vol img{aspect-ratio:16/9}
.inhoud figure.vol figcaption{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;margin-top:14px;max-width:none}
.inhoud figure.vol .t{font-family:var(--disp);font-size:17px;color:var(--plaster)}
.inhoud figure.vol .p{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--taupe)}
.inhoud h3{border-top:1px solid var(--lijn);padding-top:16px;margin-top:30px}
.inhoud h2 + h3{border-top:0;padding-top:0;margin-top:0}
.inhoud ul li::marker{color:var(--bronze)}

/* Stalen deuren zonder prijs (keuze Kevin 10/10/2026): de configurator tekent en stelt samen, de prijs
   volgt na de aanvraag. Klasse zonder-prijs op de band weghalen zodra de prijzen mogen. */
.sd-band.zonder-prijs #sd-live-label,.sd-band.zonder-prijs #sd-live-prijs,.sd-band.zonder-prijs #sd-prijsverschil,
.sd-band.zonder-prijs #sd-live-status,.sd-band.zonder-prijs #sd-maatwerk-status,.sd-band.zonder-prijs .sd-meerprijs,
.sd-band.zonder-prijs #sd-regels,.sd-band.zonder-prijs .sd-totaal,.sd-band.zonder-prijs #sd-btw,.sd-band.zonder-prijs #sd-nu,
.sd-band.zonder-prijs #sd-voorlopig,.sd-band.zonder-prijs #sd-opmeting-bedrag,.sd-balk{display:none!important}
.sd-band.zonder-prijs .sd-zonder-prijs{margin:10px 0 18px;max-width:40ch;color:var(--plaster);font-size:15px;line-height:1.6}

/* Bellen en WhatsApp in de kop (vraag Kevin 10/10/2026): iconen in de balk, tekst in het paneel. */
.direct-knoppen{display:flex;gap:2px;padding-left:clamp(10px,1.2vw,18px);border-left:1px solid var(--lijn)}
.direct-knoppen a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--plaster);opacity:.85}
.direct-knoppen a:hover{opacity:1}
.direct-knoppen svg{width:20px;height:20px}
.direct-knoppen.mobiel{display:none;border-left:0;padding-left:0}
.kop-rechts{display:flex;align-items:center;gap:4px}
@media (max-width:1379px){.direct-knoppen.mobiel{display:flex}}
@media (max-width:1399px){html:lang(en) .direct-knoppen.mobiel{display:flex}}
@media (max-width:1499px){html:lang(fr) .direct-knoppen.mobiel{display:flex}}
.paneel-direct{display:flex;flex-direction:column;gap:2px;margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn)}
.paneel-direct a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;color:var(--plaster)}