/* Overstek Architecten — ontwerp (site.css). Kleuren en lettertypes staan bovenin als variabelen. */
:root{--wit:#FFFFFF;--inkt:#111111;--grijs:#7A7A7A;--lijn:#E4E4E4;--groen:#2E4635;--serif:'Instrument Serif',Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--wit);color:var(--inkt);font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--inkt);color:#fff}
.blad{max-width:1440px;margin:0 auto;padding:0 clamp(18px,3.4vw,52px)}

/* header: book running head */
header{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;padding:22px 0;font-size:.82rem;border-bottom:1px solid var(--inkt)}
header nav{display:flex;gap:22px}
header nav:last-of-type{justify-content:flex-end}
header nav a{text-decoration:none;color:var(--grijs)}
header nav a:hover{color:var(--inkt)}
.logo{font-family:var(--serif);font-size:1.6rem;text-decoration:none;letter-spacing:-.01em}
header nav a[aria-current]{color:var(--inkt);border-bottom:1px solid var(--inkt);padding-bottom:2px}
/* mobiel: beide navs worden het menu van js/menu.js; running head = logo links, knop rechts */
@media(max-width:900px){header{display:flex;justify-content:space-between;align-items:center;padding:14px 0}header nav{display:none}.mnav-btn{width:44px;height:44px;border-radius:0;border-width:1px}}

/* cover */
.cover{padding:clamp(40px,7vw,110px) 0 clamp(32px,4vw,56px)}
.cover h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,9.6vw,10.4rem);line-height:.9;letter-spacing:-.035em;margin:0}
.cover h1 em{font-style:italic;color:var(--grijs)}
.cover-voet{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(28px,4vw,56px);align-items:end}
.cover-voet p{grid-column:7/12;margin:0;font-size:1.05rem;line-height:1.65}
.cover-voet .links{grid-column:1/5;display:flex;gap:26px;font-size:.9rem}
.cover-voet .links a{text-decoration:none;border-bottom:1px solid var(--inkt);padding-bottom:3px}
.cover-voet .links a:hover{color:var(--groen);border-color:var(--groen)}
@media(max-width:820px){.cover-voet p,.cover-voet .links{grid-column:1/-1}}

/* plates: B&W photography, colour returns on hover */
.plaat{margin:0}
.plaat .beeld{overflow:hidden;background:#EDEDED}
.plaat img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .9s ease,transform 1.2s ease}
.plaat:hover img{filter:grayscale(0) contrast(1)}
.plaat figcaption{display:flex;justify-content:space-between;gap:20px;font-size:.78rem;color:var(--grijs);padding-top:12px}
.plaat figcaption b{font-weight:500;color:var(--inkt)}
.plaat-1 .beeld{aspect-ratio:21/9}
@media(max-width:700px){.plaat-1 .beeld{aspect-ratio:4/3}}

/* intro in two columns */
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:clamp(64px,9vw,140px) 0}
.intro .lbl{grid-column:1/4;font-size:.82rem;color:var(--grijs)}
.intro .tekst{grid-column:4/13;columns:2;column-gap:clamp(24px,3vw,48px);font-size:1.08rem;line-height:1.7}
.intro .tekst p{margin:0 0 1em}
.intro .tekst p:first-child::first-letter{font-family:var(--serif);float:left;font-size:4.6em;line-height:.8;padding:6px 10px 0 0}
@media(max-width:820px){.intro .lbl,.intro .tekst{grid-column:1/-1}.intro .tekst{columns:1}}

/* projects as spreads */
.werk-kop{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--inkt);padding-top:16px;margin-bottom:clamp(28px,4vw,56px)}
.werk-kop h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,4rem);margin:0;letter-spacing:-.02em}
.werk-kop span{font-size:.82rem;color:var(--grijs)}
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-bottom:clamp(64px,9vw,140px);align-items:end}
.spread .plaat{grid-column:1/9}
.spread .data{grid-column:10/13}
.spread.r .plaat{grid-column:5/13;grid-row:1}
.spread.r .data{grid-column:1/4;grid-row:1}
.spread.smal .plaat{grid-column:3/8}
.spread.smal .data{grid-column:9/12;align-self:center}
.spread .beeld{aspect-ratio:4/3}
.spread.smal .beeld{aspect-ratio:3/4}
.data .nr{font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--grijs);display:block;margin-bottom:18px}
.data h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.05;margin:0 0 20px;letter-spacing:-.015em}
.data dl{margin:0;font-size:.84rem;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;border-top:1px solid var(--lijn);padding-top:14px}
.data dt{color:var(--grijs)}
.data dd{margin:0}
@media(max-width:820px){.spread .plaat,.spread .data,.spread.r .plaat,.spread.r .data,.spread.smal .plaat,.spread.smal .data{grid-column:1/-1;grid-row:auto}}
.index-note{font-size:.84rem;color:var(--grijs);margin:-60px 0 0;padding-bottom:clamp(40px,6vw,80px)}@media(max-width:820px){.index-note{margin-top:0}}

/* bureau: black page */
.zwart{background:var(--inkt);color:#EDEDED}
.bureau{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(72px,10vw,150px)}
.bureau blockquote{grid-column:1/9;margin:0;font-family:var(--serif);font-size:clamp(1.9rem,3.8vw,3.4rem);line-height:1.1;letter-spacing:-.015em}
.bureau blockquote em{color:#8C8C8C}
.bureau .maq{grid-column:9/13;grid-row:1/3;align-self:start}
.bureau .maq figcaption{color:#8C8C8C}
.bureau .maq .beeld{aspect-ratio:3/4;background:#222}
.bureau .tekst{grid-column:1/8;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);font-size:1rem;line-height:1.7;color:#BDBDBD;margin-top:clamp(32px,4vw,56px)}
.bureau .tekst p{margin:0}
.principes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,6vw,88px);border-top:1px solid #333;padding-top:22px}
.principes b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;color:#fff;margin-bottom:8px}
.principes span{font-size:.92rem;line-height:1.65;color:#A5A5A5}
@media(max-width:820px){.bureau blockquote,.bureau .maq,.bureau .tekst{grid-column:1/-1;grid-row:auto}.bureau .tekst,.principes{grid-template-columns:1fr}}

/* diensten: contents page */
.inhoud{padding:clamp(72px,10vw,140px) 0}
.inhoud h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,4rem);margin:0 0 clamp(28px,4vw,48px);letter-spacing:-.02em}
.regel{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;border-top:1px solid var(--inkt);padding:22px 0 30px}
.regel:last-child{border-bottom:1px solid var(--inkt)}
.regel h3{grid-column:1/6;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.4rem);margin:0;letter-spacing:-.015em}
.regel p{grid-column:7/12;margin:0;line-height:1.7;color:#444}
.regel span{grid-column:12/13;justify-self:end;font-family:var(--serif);font-size:1.3rem;color:var(--grijs)}
@media(max-width:820px){.regel h3,.regel p{grid-column:1/-1}.regel span{display:none}}

/* contact */
.slot{padding:0 0 clamp(64px,8vw,120px)}
.slot h2{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,9vw,9.6rem);line-height:.9;letter-spacing:-.035em;margin:0 0 36px}
.slot h2 em{color:var(--grijs)}
.slot a.link{font-size:1.1rem;text-decoration:none;border-bottom:1px solid var(--inkt);padding-bottom:4px}
.slot a.link:hover{color:var(--groen);border-color:var(--groen)}
footer{border-top:1px solid var(--inkt);padding:18px 0 34px;font-size:.78rem;color:var(--grijs);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer strong{color:var(--inkt);font-weight:500}
a:focus-visible{outline:2px solid var(--groen);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==========================================================================
   Subpagina's — zelfde boekmotieven: running head, platen, spreads, zwarte pagina, inhoudsopgave
   ========================================================================== */
.zwart .plaat figcaption{color:#8C8C8C}
.zwart .plaat figcaption b{color:#EDEDED}
.zwart a:focus-visible{outline-color:#EDEDED}
:where(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--groen);outline-offset:3px}

/* paginakop: titelpagina van een hoofdstuk */
.paginakop{padding:clamp(28px,4vw,48px) 0 clamp(32px,4vw,56px)}
.pk-kop{display:flex;justify-content:space-between;gap:20px;font-size:.78rem;color:var(--grijs);margin-bottom:clamp(36px,6vw,96px)}
.pk-kop b{font-weight:500;color:var(--inkt)}
.paginakop h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,8vw,8.4rem);line-height:.92;letter-spacing:-.035em;margin:0;max-width:14ch}
.paginakop h1 em{color:var(--grijs)}
.pk-voet{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(28px,4vw,56px);align-items:start}
.pk-voet p{grid-column:7/12;margin:0;font-size:1.05rem;line-height:1.65}
.pk-voet dl{grid-column:1/5;margin:0;font-size:.82rem;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;border-top:1px solid var(--lijn);padding-top:14px}
.pk-voet dt{color:var(--grijs)}
.pk-voet dd{margin:0}
@media(max-width:820px){.pk-voet p,.pk-voet dl{grid-column:1/-1}.pk-voet dl{order:2}}

.plaat-breed .beeld{aspect-ratio:21/9}
@media(max-width:700px){.plaat-breed .beeld{aspect-ratio:4/3}}
.sectie{padding-top:clamp(64px,9vw,140px);padding-bottom:clamp(64px,9vw,140px)}
.sectie-kop{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--inkt);padding-top:16px;margin-bottom:clamp(28px,4vw,56px)}
.sectie-kop h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,4rem);margin:0;letter-spacing:-.02em}
.sectie-kop span{font-size:.82rem;color:var(--grijs)}
.zwart .sectie-kop{border-color:#444}
.zwart .sectie-kop h2{color:#fff}
.link{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.link:hover{color:var(--groen)}
.zwart .link:hover{color:#fff}

/* projectregister: index als tabel */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.filter button{appearance:none;background:none;border:1px solid var(--inkt);color:var(--inkt);font:inherit;font-size:.82rem;min-height:44px;padding:0 16px;cursor:pointer}
.filter button:hover{border-color:var(--groen);color:var(--groen)}
.filter button[aria-pressed=true]{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.register{width:100%;border-collapse:collapse;font-size:.9rem}
.register th{text-align:left;font-weight:400;font-size:.76rem;color:var(--grijs);padding:0 16px 10px 0;border-bottom:1px solid var(--inkt)}
.register td{padding:16px 16px 16px 0;border-bottom:1px solid var(--lijn);vertical-align:baseline}
.register tr[hidden]{display:none}
.register .nr{font-family:var(--serif);font-size:1.5rem;color:var(--grijs);width:70px}
.register .pr{font-family:var(--serif);font-size:1.45rem;letter-spacing:-.01em}
.register .st{white-space:nowrap}
.register .st.loopt::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--groen);margin-right:8px;vertical-align:1px}
.register tbody tr:hover td{background:#F6F6F6}
.register-noot{font-size:.82rem;color:var(--grijs);margin:16px 0 0}
@media(max-width:720px){
  .register thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .register tr{display:grid;grid-template-columns:48px 1fr;border-bottom:1px solid var(--lijn);padding:14px 0}
  .register td{border:0;padding:0}
  .register .nr{grid-row:1/5;width:auto;font-size:1.3rem}
  .register .pr{font-size:1.3rem;margin-bottom:4px}
  .register .pg,.register .pl,.register .st{font-size:.82rem;color:#555}
  .register tbody tr:hover td{background:none}}

/* uitgelichte spread met toelichting */
.data .toel{font-size:.95rem;line-height:1.7;color:#444;margin:0 0 20px}
.spread .data .link{display:inline-block;margin-top:20px;font-size:.88rem}

/* diptiek: twee platen naast elkaar */
.diptiek{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:end;padding-bottom:clamp(64px,9vw,140px)}
.diptiek .plaat:first-child{grid-column:1/8}
.diptiek .plaat:first-child .beeld{aspect-ratio:3/2}
.diptiek .plaat:last-child{grid-column:8/13}
.diptiek .plaat:last-child .beeld{aspect-ratio:4/5}
@media(max-width:820px){.diptiek .plaat:first-child,.diptiek .plaat:last-child{grid-column:1/-1}}

/* zwarte pagina, variant voor subpagina's */
.zwart-blok{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(72px,10vw,150px)}
.zwart-blok blockquote{grid-column:1/9;margin:0;font-family:var(--serif);font-size:clamp(1.9rem,3.8vw,3.4rem);line-height:1.1;letter-spacing:-.015em}
.zwart-blok blockquote em{color:#8C8C8C}
.zwart-blok .plaat{grid-column:9/13;grid-row:1/3;align-self:start}
.zwart-blok .plaat .beeld{aspect-ratio:3/4;background:#222}
.zwart-blok .tekst{grid-column:1/8;font-size:1rem;line-height:1.7;color:#BDBDBD;margin-top:clamp(32px,4vw,56px)}
.zwart-blok .tekst p{margin:0 0 1em}
.principes.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.principes.vier{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.zwart-blok blockquote,.zwart-blok .plaat,.zwart-blok .tekst{grid-column:1/-1;grid-row:auto}.principes.vier{grid-template-columns:1fr}}

/* fasen met honorarium */
.fasen{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--inkt)}
.fase{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;border-top:1px solid var(--inkt);padding:22px 0 28px}
.fase .rn{grid-column:1/2;font-family:var(--serif);font-size:1.3rem;color:var(--grijs)}
.fase h3{grid-column:2/6;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0;letter-spacing:-.015em;line-height:1.1}
.fase h3 small{display:block;font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:.8rem;color:var(--grijs);letter-spacing:0;margin-top:8px}
.fase p{grid-column:6/10;margin:0;line-height:1.7;color:#444}
.fase .bedrag{grid-column:10/13;justify-self:end;text-align:right;font-family:var(--serif);font-size:1.5rem;line-height:1.2}
.fase .bedrag small{display:block;font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:.76rem;color:var(--grijs)}
.fasen-noot{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:22px;font-size:.84rem;color:var(--grijs);line-height:1.6}
.fasen-noot p{grid-column:6/13;margin:0}
@media(max-width:820px){.fase .rn,.fase h3,.fase p,.fase .bedrag,.fasen-noot p{grid-column:1/-1;justify-self:start;text-align:left}.fase .rn{margin-bottom:-12px}}

/* colofon: de mensen */
.colofon{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.persoon{border-top:1px solid var(--inkt);padding-top:18px}
.persoon .init{font-family:var(--serif);font-size:4.4rem;line-height:.9;color:var(--grijs);display:block;margin-bottom:22px}
.persoon h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.4vw,2.2rem);margin:0 0 4px;letter-spacing:-.015em}
.persoon .rol{font-size:.82rem;color:var(--grijs);margin:0 0 16px}
.persoon p{margin:0 0 1em;line-height:1.7;font-size:.95rem;color:#444}
.persoon dl{margin:0;font-size:.82rem;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;border-top:1px solid var(--lijn);padding-top:12px}
.persoon dt{color:var(--grijs)}
.persoon dd{margin:0}
@media(max-width:900px){.colofon{grid-template-columns:1fr}}

/* inhoudsopgave met links */
a.regel{text-decoration:none;color:inherit}
a.regel:hover h2,a.regel:hover h3,a.regel:hover span{color:var(--groen)}
.inhoud.kort{padding-top:0}
.regel h2{grid-column:1/6;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.4rem);margin:0;letter-spacing:-.015em;line-height:1.1}
.regel .txt{grid-column:7/12;line-height:1.7;color:#444}
.regel .txt p{margin:0 0 1em}.regel .txt p:last-child{margin:0}
.regel .txt ul{margin:0 0 1em;padding-left:1.1em}
@media(max-width:820px){.regel h2,.regel .txt{grid-column:1/-1}}

/* hoofdstuk per dienst */
.hoofdstuk{padding:clamp(64px,9vw,130px) 0 0;scroll-margin-top:20px}
.hs-kop{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;border-top:1px solid var(--inkt);padding-top:16px;margin-bottom:clamp(28px,4vw,56px);align-items:baseline}
.hs-kop .rn{grid-column:1/3;font-family:var(--serif);font-size:clamp(3rem,6vw,5.6rem);line-height:.9;color:var(--grijs)}
.hs-kop h2{grid-column:3/10;font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:.95;letter-spacing:-.025em;margin:0}
.hs-kop span{grid-column:10/13;justify-self:end;font-size:.82rem;color:var(--grijs);text-align:right}
.hs-body{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.hs-body .plaat{grid-column:1/8}
.hs-body .plaat .beeld{aspect-ratio:4/3}
.hs-body .hs-tekst{grid-column:9/13;font-size:1.02rem;line-height:1.7}
.hs-body .hs-tekst p{margin:0 0 1em}
.hoofdstuk.r .hs-body .plaat{grid-column:6/13;grid-row:1}
.hoofdstuk.r .hs-body .hs-tekst{grid-column:1/5;grid-row:1}
.hs-kolommen{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(40px,5vw,72px)}
.hs-kolommen>div{grid-column:span 4;border-top:1px solid var(--lijn);padding-top:14px;font-size:.92rem;line-height:1.65}
.hs-kolommen h3{font-size:.78rem;font-weight:400;color:var(--grijs);margin:0 0 12px}
.hs-kolommen ol,.hs-kolommen ul{margin:0;padding-left:1.2em}
.hs-kolommen li{margin-bottom:6px}
.hs-kolommen .prijs{font-family:var(--serif);font-size:2rem;line-height:1.1;margin:0 0 8px}
.hs-kolommen p{margin:0 0 .6em}
.vragen{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(36px,4vw,56px)}
.vragen h3{grid-column:1/4;font-size:.78rem;font-weight:400;color:var(--grijs);margin:0;padding-top:18px}
.vragen .lijst{grid-column:4/13;border-bottom:1px solid var(--lijn)}
details{border-top:1px solid var(--lijn)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:56px;padding:12px 0;font-family:var(--serif);font-size:1.35rem;line-height:1.2}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:1.2rem;color:var(--grijs);flex:none}
details[open] summary::after{content:"–"}
summary:hover{color:var(--groen)}
details p{margin:0 0 20px;max-width:62ch;line-height:1.7;color:#444}
@media(max-width:820px){.hs-kop .rn,.hs-kop h2,.hs-kop span,.hs-body .plaat,.hs-body .hs-tekst,.hoofdstuk.r .hs-body .plaat,.hoofdstuk.r .hs-body .hs-tekst,.vragen h3,.vragen .lijst{grid-column:1/-1;grid-row:auto;justify-self:start;text-align:left}.hs-kolommen>div{grid-column:1/-1}}

/* contact: formulier en gegevens */
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:clamp(24px,4vw,48px) 0 clamp(64px,9vw,140px);border-top:1px solid var(--inkt)}
.contact-grid form{grid-column:1/8}
.gegevens{grid-column:9/13}
.veld{margin:0 0 26px}
.veld label,.keuze legend{display:block;font-size:.78rem;color:var(--grijs);margin-bottom:6px}
.veld input,.veld select,.veld textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--inkt);background:none;border:0;border-bottom:1px solid var(--inkt);border-radius:0;padding:10px 0;min-height:46px}
.veld select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111'/%3E%3C/svg%3E") right 4px center no-repeat;padding-right:24px}
.veld textarea{min-height:140px;resize:vertical;line-height:1.6}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-bottom:2px solid var(--groen)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media(max-width:600px){.twee{grid-template-columns:1fr}}
.keuze{border:0;margin:0 0 30px;padding:0}
.keuze .opties{display:flex;flex-wrap:wrap;gap:8px}
.keuze label{position:relative;display:inline-flex}
.keuze input{position:absolute;opacity:0;width:1px;height:1px}
.keuze label span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--inkt);font-size:.88rem;cursor:pointer}
.keuze label:hover span{color:var(--groen);border-color:var(--groen)}
.keuze input:checked+span{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.keuze input:focus-visible+span{outline:2px solid var(--groen);outline-offset:3px}
.form-voet{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px}
.form-voet small{font-size:.8rem;color:var(--grijs);max-width:40ch;line-height:1.5}
.form-voet small a{color:var(--inkt)}
form[data-contact] button[type=submit]{appearance:none;border:0;background:var(--inkt);color:#fff;font:inherit;font-size:.95rem;min-height:52px;padding:0 28px;cursor:pointer}
form[data-contact] button[type=submit]:hover{background:var(--groen)}
.gegevens dl{margin:0;font-size:.95rem;line-height:1.6}
.gegevens dt{font-size:.78rem;color:var(--grijs);border-top:1px solid var(--lijn);padding-top:12px}
.gegevens dd{margin:0 0 20px}
.gegevens dd a{text-decoration:none;border-bottom:1px solid var(--inkt)}
.gegevens dd a:hover{color:var(--groen);border-color:var(--groen)}
.gegevens .groot{font-family:var(--serif);font-size:1.7rem;line-height:1.2}
@media(max-width:900px){.contact-grid form,.gegevens{grid-column:1/-1}.gegevens{order:-1}}

/* stappen: wat er na uw bericht gebeurt */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.stappen li{border-top:1px solid #444;padding-top:18px}
.stappen .nr{font-family:var(--serif);font-size:3.2rem;line-height:1;color:#8C8C8C;display:block;margin-bottom:18px}
.stappen b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;color:#fff;margin-bottom:8px}
.stappen span{font-size:.92rem;line-height:1.65;color:#A5A5A5}
@media(max-width:820px){.stappen{grid-template-columns:1fr}}

/* privacy */
.juridisch .regel h2{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.juridisch .regel .txt{font-size:.98rem}
footer a{color:var(--grijs)}
footer a:hover{color:var(--inkt)}
.form-titel{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.015em;margin:0 0 28px}
.regel .txt span{grid-column:auto;justify-self:auto;font:inherit;color:inherit;display:inline}