/* Nijenhuis Raambekleding — bezoekerskant. Eigen fonts, geen externe bronnen. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfair-600.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfair-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}

:root{
  --crème:#F9F6F1;--warm-wit:#FFFFFF;--donker:#1C1C1C;--goud:#B8956A;--goud-licht:#D4A97A;--goud-tekst:#8A6A43;
  --taupe:#8C7B6B;--tekst:#5E5246;--lijn:#E8E0D6;--max-breedte:1200px;--radius:4px;--overgang:.3s ease;
  --serif:'Playfair Display',Georgia,serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--crème);color:var(--donker);font-family:var(--sans);font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em;color:var(--tekst)}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;color:var(--donker);margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem);font-weight:600}
:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.skip-link{position:absolute;left:16px;top:-60px;z-index:300;background:var(--donker);color:#fff;padding:10px 16px;border-radius:var(--radius)}
.skip-link:focus{top:12px}
.container{max-width:var(--max-breedte);margin:0 auto;padding:0 24px}
.container.smal{max-width:820px}
.eyebrow{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--goud-tekst);margin-bottom:12px}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.7;max-width:58ch}
.klein{font-size:.85rem;color:var(--taupe)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;padding:0 24px;display:flex;align-items:center;background:var(--crème);border-bottom:1px solid transparent;transition:border-color var(--overgang),box-shadow var(--overgang)}
.site-header.gescrold{border-bottom-color:var(--lijn);box-shadow:0 2px 20px rgba(0,0,0,.06)}
.header-inner{max-width:var(--max-breedte);width:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}
.site-logo img{height:48px;width:auto}
.hoofd-nav{display:flex;align-items:center;gap:36px}
.nav-lijst{list-style:none;display:flex;gap:28px}
.nav-lijst a{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;position:relative;transition:color var(--overgang)}
.nav-lijst a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--goud);transition:width var(--overgang)}
.nav-lijst a:hover{color:var(--goud-tekst)}
.nav-lijst a:hover::after{width:100%}
.nav-cta{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--goud);padding:11px 22px;border-radius:var(--radius);transition:background var(--overgang)}
.nav-cta:hover{background:var(--goud-tekst)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--donker);transition:transform var(--overgang),opacity var(--overgang)}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .hoofd-nav{display:none;position:fixed;inset:72px 0 0 0;background:var(--crème);flex-direction:column;justify-content:center;gap:36px;z-index:99;overflow-y:auto}
  .hoofd-nav.open{display:flex}
  .nav-lijst{flex-direction:column;text-align:center;gap:26px}
  .nav-lijst a{font-size:1rem}
  .nav-cta{font-size:.85rem;padding:14px 28px}
}
main{padding-top:72px;display:block}

/* Knoppen */
.knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.knop{display:inline-block;font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.05em;padding:15px 30px;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;text-align:center;transition:background var(--overgang),border-color var(--overgang),color var(--overgang),transform var(--overgang)}
.knop:hover{transform:translateY(-2px)}
.knop-goud{background:var(--goud);color:#fff;border-color:var(--goud)}
.knop-goud:hover{background:var(--goud-tekst);border-color:var(--goud-tekst)}
.knop-licht{background:transparent;color:var(--donker);border-color:var(--lijn)}
.knop-licht:hover{border-color:var(--goud);color:var(--goud-tekst)}
.knop:disabled{opacity:.6;cursor:wait;transform:none}

/* Hero */
.hero{background:var(--crème);overflow:hidden}
.hero-inner{max-width:var(--max-breedte);margin:0 auto;padding:64px 24px 72px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero-inner>*{min-width:0}
.hero-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.hero-vlak{aspect-ratio:4/5;border-radius:var(--radius);background:radial-gradient(circle at 70% 25%,rgba(212,169,122,.45),transparent 60%),radial-gradient(circle at 25% 80%,rgba(184,149,106,.35),transparent 55%),var(--lijn)}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:32px;padding:32px 24px 48px}
  .hero-foto img,.hero-vlak{aspect-ratio:4/3}
  .hero-vlak{display:none}
}

/* Secties */
.sectie{padding:clamp(56px,8vw,96px) 0}
.sectie-wit{background:var(--warm-wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.sectie-kop{text-align:center;max-width:640px;margin:0 auto 48px}
.pagina-kop{padding-bottom:24px}
.pagina-kop+.sectie{padding-top:24px}
.broodkruimels{padding-top:20px;font-size:.8rem;color:var(--taupe)}
.broodkruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.broodkruimels li+li::before{content:'›';margin-right:6px;color:var(--goud)}
.broodkruimels a:hover{color:var(--goud-tekst)}
.broodkruimels+.hero .hero-inner{padding-top:32px}

/* Rooster en kaarten */
.rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:24px}
.rooster>*{min-width:0}
.kaart{background:var(--warm-wit);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--overgang),transform var(--overgang)}
.kaart:hover{border-color:var(--goud);transform:translateY(-3px)}
.kaart-foto{display:block;overflow:hidden}
.kaart-foto img,.foto-leeg{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.foto-leeg{display:block;background:linear-gradient(135deg,var(--lijn),var(--crème))}
.kaart:hover .kaart-foto img{transform:scale(1.04)}
.kaart-tekst{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.kaart-titel{font-size:1.25rem;font-weight:600;margin:0 0 8px}
.kaart-titel a:hover{color:var(--goud-tekst)}
.kaart-tekst p{font-size:.95rem;margin-bottom:8px}
.kaart-datum{margin-top:auto;margin-bottom:0;font-size:.8rem!important;color:var(--taupe)}
.chip{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--goud-tekst);background:var(--crème);border:1px solid var(--lijn);border-radius:999px;padding:4px 12px;margin-bottom:12px}
a.chip:hover{border-color:var(--goud)}
.chips{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:8px;vertical-align:middle}
.chips .chip{margin:0}

/* Stappen */
.stappen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stappen>*{min-width:0}
.stap{background:var(--crème);border:1px solid var(--lijn);border-radius:var(--radius);padding:32px}
.stap-nummer{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:700;color:var(--goud);line-height:1;margin-bottom:16px}
.stap p{margin:0}
@media (max-width:900px){.stappen{grid-template-columns:1fr}}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.reviews>*{min-width:0}
.review-kaart{margin:0;background:var(--crème);border:1px solid var(--lijn);border-radius:var(--radius);padding:28px}
.review-kaart blockquote{margin:12px 0 16px;font-family:var(--serif);font-size:1.05rem;line-height:1.6;color:var(--donker)}
.review-kaart figcaption{font-size:.85rem;font-weight:600;color:var(--taupe)}
.review-kaart time{font-weight:400;margin-left:6px}
.sterren{color:var(--goud);letter-spacing:2px}
.sterren span{color:var(--lijn)}
.reviews-stand{margin-top:8px}

/* Inhoud */
.punten{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 32px;margin-bottom:40px}
.punten li{position:relative;padding-left:30px;color:var(--donker)}
.punten li::before{content:'';position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--goud);border-bottom:2px solid var(--goud);transform:rotate(-45deg)}
.artikel{max-width:72ch;font-size:1.05rem}
.artikel h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:2.2rem}
.artikel h3{margin-top:1.8rem}
.artikel ul,.artikel ol{margin:0 0 1.2em 1.3em;color:var(--tekst)}
.artikel li{margin-bottom:.4em}
.artikel a{color:var(--goud-tekst);text-decoration:underline;text-underline-offset:3px}
.artikel img{width:100%;border-radius:var(--radius)}
.artikel figure{margin:2rem 0}
.artikel figcaption,.fotos figcaption{font-size:.85rem;color:var(--taupe);margin-top:8px}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:40px 0}
.fotos figure{margin:0;min-width:0}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.bericht{padding-top:32px;padding-bottom:24px}
.bericht-kop{margin-bottom:32px}
.bericht-meta{font-size:.9rem;color:var(--taupe)}
.hoofdfoto{margin:0 0 40px}
.hoofdfoto img{width:100%;border-radius:var(--radius)}
.bericht .artikel{margin:0 auto}
.linklijst{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.linklijst a{display:inline-block;padding:8px 16px;border:1px solid var(--lijn);border-radius:999px;background:var(--warm-wit);font-size:.9rem}
.linklijst a:hover{border-color:var(--goud)}

/* Video */
.video{position:relative;aspect-ratio:16/9;margin:40px 0;border-radius:var(--radius);overflow:hidden;background:radial-gradient(circle at 30% 30%,#3a3128,var(--donker))}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-knop{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:none;border:0;color:#fff;font:600 .85rem var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.video-play{width:72px;height:72px;border-radius:50%;background:var(--goud);position:relative;transition:transform var(--overgang)}
.video-play::after{content:'';position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.video-knop:hover .video-play{transform:scale(1.08)}

/* FAQ */
.faq h2{margin-bottom:24px}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:var(--serif);font-size:1.15rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.5rem;font-weight:400;color:var(--goud)}
.faq details[open] summary::after{content:'–'}
.faq-antwoord{padding:0 0 20px}

/* CTA */
.cta{background:var(--donker);color:#fff;text-align:center;padding:clamp(64px,9vw,104px) 0}
.cta .eyebrow{color:var(--goud)}
.cta h2{color:#fff;max-width:640px;margin:0 auto 16px}
.cta p{color:rgba(255,255,255,.72);max-width:560px;margin:0 auto}
.cta .knoppen{justify-content:center}
.cta .knop-licht{color:#fff;border-color:rgba(255,255,255,.3)}
.cta .knop-licht:hover{border-color:#fff;color:#fff}

/* Blog */
.filterbalk{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.filterbalk a{padding:8px 18px;border:1px solid var(--lijn);border-radius:999px;font-size:.85rem;font-weight:500;background:var(--warm-wit)}
.filterbalk a:hover{border-color:var(--goud)}
.filterbalk a[aria-current]{background:var(--donker);border-color:var(--donker);color:#fff}
.paginering{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:48px}
.paginering a,.paginering span{min-width:44px;padding:10px 14px;text-align:center;border:1px solid var(--lijn);border-radius:var(--radius);font-size:.9rem;background:var(--warm-wit)}
.paginering a:hover{border-color:var(--goud)}
.paginering span[aria-current]{background:var(--goud);border-color:var(--goud);color:#fff}

/* Formulier en contact */
.twee-kolom{display:grid;grid-template-columns:3fr 2fr;gap:48px;align-items:start;margin-bottom:40px}
.twee-kolom>*{min-width:0}
@media (max-width:900px){.twee-kolom{grid-template-columns:1fr}}
.formulier{background:var(--warm-wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:clamp(20px,4vw,36px)}
.formulier p{margin-bottom:18px}
.formulier label{display:block;font-size:.85rem;font-weight:600;color:var(--donker);margin-bottom:6px}
.formulier input:not([type=radio]),.formulier textarea{width:100%;font:inherit;font-size:1rem;color:var(--donker);background:var(--crème);border:1px solid var(--lijn);border-radius:var(--radius);padding:12px 14px;transition:border-color var(--overgang)}
.formulier input:focus,.formulier textarea:focus{outline:2px solid var(--goud);outline-offset:2px;border-color:var(--goud);background:#fff}
.formulier fieldset{border:0;padding:0;margin:0 0 18px}
.formulier legend{font-size:.85rem;font-weight:600;margin-bottom:8px}
.formulier fieldset label{display:inline-flex;align-items:center;gap:8px;font-weight:400;margin-right:20px}
.formulier input[type=radio]{accent-color:var(--goud);width:18px;height:18px}
.formulier .knop{width:100%}
.melding:empty{display:none}
.melding{padding:12px 14px;border-radius:var(--radius);font-size:.95rem}
.melding.fout{background:#FBEAEA;color:#9B2C2C}
.melding.ok{background:#E9F5EC;color:#22663A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contactblok{background:var(--crème);border:1px solid var(--lijn);border-radius:var(--radius);padding:28px}
.contactblok h2{font-size:1.4rem}
.contactblok a{color:var(--goud-tekst);font-weight:600}

/* Footer */
.site-footer{background:var(--donker);color:rgba(255,255,255,.72);padding:72px 24px 0;font-size:.92rem}
.footer-inner{max-width:var(--max-breedte);margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-inner>*{min-width:0}
.site-footer p{color:rgba(255,255,255,.65)}
.footer-merk{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:#fff!important}
.footer-kop{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--goud)!important}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.site-footer a{transition:color var(--overgang)}
.site-footer a:hover{color:var(--goud)}
.footer-social{display:flex;gap:18px}
.footer-onder{max-width:var(--max-breedte);margin:auto;padding:22px 0;font-size:.8rem;color:rgba(255,255,255,.45)!important}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.footer-inner{grid-template-columns:1fr;gap:32px}}

/* Toestemmingsbalk (Meta-pixel) */
.toestemming{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--warm-wit);border-top:1px solid var(--lijn);box-shadow:0 -6px 30px rgba(28,28,28,.1);padding:20px 24px;transform:translateY(100%);transition:transform .35s ease}
.toestemming.zichtbaar{transform:translateY(0)}
.toestemming-inner{max-width:var(--max-breedte);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.toestemming-tekst{max-width:62ch}
.toestemming-tekst strong{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:4px}
.toestemming-tekst p{font-size:.86rem;line-height:1.6;margin:0}
.toestemming-tekst a{color:var(--goud-tekst);text-decoration:underline}
.toestemming-knoppen{display:flex;gap:12px;flex:none}
@media (max-width:720px){
  .toestemming-inner{flex-direction:column;align-items:stretch;gap:16px}
  .toestemming-knoppen{flex-direction:column-reverse}
  .toestemming .knop{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
/* Telefoon: smallere zijmarge. Staat bewust als laatste zodat hij alle eerdere padding-regels overschrijft. */
@media (max-width:480px){.container,.hero-inner{padding-left:16px;padding-right:16px}.site-header,.site-footer{padding-left:16px;padding-right:16px}}
.pagina-afgeschermd{min-height:100vh;display:flex;align-items:center}.pagina-afgeschermd main{width:100%;min-width:0}.afgeschermd h1{text-wrap:balance;overflow-wrap:anywhere}.afgeschermd .container{text-align:center;padding-top:48px;padding-bottom:48px}.afgeschermd h1{margin:12px 0 16px}.afgeschermd .contact-regel{margin-top:28px;font-size:1.1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}.afgeschermd .contact-regel a{white-space:nowrap;overflow-wrap:anywhere}@media (max-width:480px){.afgeschermd .contact-regel{flex-direction:column;gap:8px}.afgeschermd .punt{display:none}.afgeschermd .contact-regel a{white-space:normal}}.afgeschermd .contact-regel a{color:var(--goud-tekst);text-decoration:none;font-weight:500}.afgeschermd .punt{margin:0 12px;color:var(--taupe)}
.site-logo img{height:44px;width:auto}.afgeschermd-logo{display:block;margin:0 auto 8px;max-width:264px;height:auto}
.footer-merk img{height:52px;width:auto;display:block}
.waarom{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.waarom>*{min-width:0}.waarom-kolom{background:var(--crème);border:1px solid var(--lijn);border-radius:var(--radius);padding:32px}.waarom-kolom h3{font-size:1.25rem;margin:0 0 12px}.waarom-tekst p{margin:0 0 12px}.waarom-tekst p:last-child{margin:0}.waarom-tekst a{color:var(--goud-tekst)}@media (max-width:900px){.waarom{grid-template-columns:1fr}}
.stappen-4{grid-template-columns:repeat(4,1fr)}@media (max-width:1000px){.stappen-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.stappen-4{grid-template-columns:1fr}}.pagina-kop+.sectie-wit{padding-top:clamp(40px,6vw,72px)}
.stap{padding:40px 32px}.stap-icoon{display:block;color:var(--goud);margin-bottom:20px}.stap .stap-nummer{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--goud-tekst);margin-bottom:10px}.stap h3{margin:0 0 12px}.artikel-midden{text-align:center;max-width:640px;margin:0 auto}.artikel-midden h2{text-wrap:balance}.knoppen-midden{display:flex;justify-content:center;margin-top:32px}.stappen{gap:28px}

/* === Atelier: rustiger, ruimer, foto's van rand tot rand. Staat als laatste en overschrijft eerdere regels. === */
:root{--sectie:clamp(72px,10vw,128px)}
h1,h2,h3{font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.05}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1}
.lead{color:var(--tekst)}
.site-header{height:88px;padding:0 32px}
main{padding-top:88px}
.site-logo img{height:46px}
.nav-lijst{gap:32px}
.nav-lijst a{font-size:.72rem;letter-spacing:.2em;font-weight:500}
.nav-cta{background:transparent;color:var(--donker);border:1px solid var(--donker);border-radius:0;padding:12px 22px;letter-spacing:.2em;font-weight:500}
.nav-cta:hover{background:var(--donker);color:#fff}
@media (max-width:900px){.site-header{height:72px}main{padding-top:72px}.hoofd-nav{inset:72px 0 0 0}}
.sectie{padding:var(--sectie) 0}
.sectie-wit{border:0}
.sectie-kop{margin-bottom:clamp(40px,5vw,64px)}
.sectie-kop.links{text-align:left;max-width:none;margin-left:0;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sectie-kop.links h2{margin:0}
.sectie-kop.links>div{flex:1 1 auto}.sectie-kop.links .eyebrow{margin-bottom:8px}
.sectie-kop.links .pijl-link{margin-bottom:6px}
/* knoppen: slanker, kapitalen, geen afronding */
.knop{border-radius:0;font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:16px 30px}
.knop:hover{transform:none}
.knop-licht{border-color:var(--donker);color:var(--donker)}
.knop-licht:hover{background:var(--donker);color:#fff;border-color:var(--donker)}
.pijl-link{display:inline-block;font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--donker);padding-bottom:4px;border-bottom:1px solid var(--goud);transition:color var(--overgang),border-color var(--overgang)}
.pijl-link::after{content:' →'}
.pijl-link:hover{color:var(--goud-tekst);border-color:var(--goud-tekst)}
/* hero van rand tot rand */
.hero-vol{background:var(--crème)}
.hero-beeld img{width:100%;height:clamp(360px,62vh,720px);object-fit:cover;border-radius:0}
.hero-paneel{position:relative;z-index:1;max-width:var(--max-breedte);margin:clamp(-48px,-6vw,-96px) auto 0;padding:0 24px}
.hero-paneel .container{background:var(--crème);padding:clamp(32px,5vw,64px) clamp(24px,5vw,64px) clamp(28px,4vw,48px) 0;max-width:820px;margin:0}
.hero-paneel .lead{max-width:52ch}
.hero-paneel .knoppen{margin-top:32px}
.hero-tekstueel .hero-paneel{margin-top:0}
.hero-tekstueel .hero-paneel .container{padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(24px,4vw,56px);position:relative}
.hero-tekstueel .hero-paneel .container::before{content:'';display:block;width:56px;height:1px;background:var(--goud);margin-bottom:32px}
.broodkruimels+.hero .hero-paneel .container{padding-top:32px}
.broodkruimels+.hero.hero-vol{margin-top:16px}
@media (max-width:900px){.hero-paneel{margin-top:0;padding:0}.hero-paneel .container{padding:28px 24px 8px;max-width:none}.hero-beeld img{height:clamp(240px,48vh,420px)}}
/* statement */
.statement{padding:clamp(56px,8vw,112px) 0 clamp(24px,4vw,56px);text-align:center}
.statement .eyebrow{margin-bottom:20px}
.statement-tekst{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.3;color:var(--donker);margin:0;text-wrap:balance}
/* afwisselende rijen (producten) */
.rijen{display:flex;flex-direction:column;gap:clamp(48px,7vw,96px)}
.rij{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.rij>*{min-width:0}
.rij-om .rij-foto{order:2}
.rij-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.rij-tekst .eyebrow{color:var(--goud)}
.rij-tekst h3{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:14px}
.rij-tekst p{max-width:46ch;margin-bottom:22px}
.rij-tekst h3 a:hover{color:var(--goud-tekst)}
@media (max-width:900px){.rij{grid-template-columns:1fr;gap:20px}.rij-om .rij-foto{order:0}}
/* stappen compact (home): geen dozen, dunne lijn erboven */
.stappen{gap:clamp(28px,4vw,56px)}
.stap{background:transparent;border:0;border-top:1px solid var(--goud);border-radius:0;padding:28px 0 0}
.stap-icoon{display:none}
.stap .stap-nummer{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--goud);margin-bottom:14px}
.stap h3{font-size:1.3rem}
.stap p{font-size:.95rem}
/* tijdlijn (werkwijzepagina) */
.tijdlijn{list-style:none;display:flex;flex-direction:column;gap:clamp(56px,8vw,120px)}
.tijdlijn-stap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.tijdlijn-stap>*{min-width:0}
.tijdlijn-om .tijdlijn-foto{order:-1}
.tijdlijn-nummer{display:block;font-family:var(--serif);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--goud);margin-bottom:18px}
.tijdlijn-tekst h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:14px}
.tijdlijn-tekst p{max-width:46ch;font-size:1.05rem}
.tijdlijn-foto{margin:0}
.tijdlijn-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
@media (max-width:900px){.tijdlijn-stap{grid-template-columns:1fr;gap:20px}.tijdlijn-om .tijdlijn-foto{order:0}}
/* citaat (reviews) */
.citaat{margin:0 auto 48px;max-width:860px;text-align:center}
.citaat blockquote{margin:20px 0 18px;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.4;color:var(--donker)}
.citaat blockquote::before{content:'“';color:var(--goud)}.citaat blockquote::after{content:'”';color:var(--goud)}
.citaat figcaption{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.review-kaart{background:transparent;border:0;border-top:1px solid var(--lijn);border-radius:0;padding:24px 0 0}
/* mozaïek (projecten en blog): geen dozen, eerste groot */
.mozaiek{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px) clamp(24px,3vw,40px)}
.mozaiek>*{min-width:0}
.mozaiek .kaart:first-child{grid-column:1/-1}
.mozaiek .kaart:first-child .kaart-foto img{aspect-ratio:16/9}
.kaart{background:transparent;border:0;border-radius:0;transition:none}
.kaart:hover{transform:none;border:0}
.kaart-foto img,.foto-leeg{border-radius:0;aspect-ratio:4/3}
.kaart:hover .kaart-foto img{transform:none}
.kaart-tekst{padding:18px 0 0}
.kaart-tekst .eyebrow{margin-bottom:8px;font-size:.68rem}
.kaart-titel{font-size:1.35rem}
.mozaiek .kaart:first-child .kaart-titel{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.kaart-tekst p{font-size:.95rem}
.kaart-datum{font-size:.75rem!important;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){.mozaiek{grid-template-columns:1fr}}
/* waarom-blok (home onderaan) zonder dozen */
.waarom{gap:clamp(32px,5vw,64px)}
.waarom-kolom{background:transparent;border:0;border-top:1px solid var(--goud);border-radius:0;padding:24px 0 0}
.waarom-kolom h3{font-size:1.3rem}
/* artikelen en over ons */
.artikel{font-size:1.08rem;line-height:1.8}
.artikel-kolommen{max-width:none;columns:2;column-gap:64px}
.artikel-kolommen h2{break-after:avoid;margin-top:1.6rem;font-size:1.6rem}
.artikel-kolommen h2:first-child{margin-top:0}
.artikel-kolommen p{break-inside:avoid}
@media (max-width:900px){.artikel-kolommen{columns:1}}
.fotoband img{width:100%;height:clamp(300px,55vh,640px);object-fit:cover;border-radius:0}
.fotoband+.sectie{padding-top:clamp(48px,6vw,80px)}
.fotos img,.artikel img,.hoofdfoto img,.rij-foto img{border-radius:0}
.pagina-kop{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(16px,3vw,32px)}
.pagina-kop h1{max-width:18ch}
.pagina-kop .lead{margin-top:8px}
.bericht-kop h1{max-width:20ch}
.bericht{padding-top:48px}
.hoofdfoto{margin:0 0 56px}
/* blog filter: tekstlinks */
.filterbalk{gap:28px;margin-top:28px}
.filterbalk a{padding:0 0 6px;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.filterbalk a:hover{border-color:var(--goud)}
.filterbalk a[aria-current]{background:transparent;color:var(--donker);border-bottom-color:var(--donker)}
.paginering a,.paginering span{border-radius:0;background:transparent}
.paginering span[aria-current]{background:var(--donker);border-color:var(--donker)}
/* formulier */
.formulier{border:0;border-radius:0;background:var(--warm-wit);padding:clamp(24px,4vw,44px)}
.formulier input:not([type=radio]),.formulier textarea{border-radius:0;background:var(--crème)}
.contactblok{border:0;border-radius:0;border-top:1px solid var(--goud);background:transparent;padding:24px 0 0}
.contactblok h2{font-size:1.2rem}
.twee-kolom{gap:clamp(40px,6vw,96px)}
/* cta */
.cta{padding:clamp(80px,11vw,140px) 0}
.cta h2{font-weight:600}
/* chips */
.chip{border-radius:0;background:transparent;border:1px solid var(--lijn)}
.faq summary{font-weight:600}
/* footer */
.site-footer{padding-top:88px}
@media (max-width:640px){.sectie-kop.links{display:block}.sectie-kop.links .pijl-link{margin-top:18px}}

/* zakelijk: sectoren en band */
.sectoren{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:clamp(24px,3vw,40px)}
.sectoren>*{min-width:0}
.sector{border-top:1px solid var(--goud);padding-top:24px}
.sector h3{font-size:1.3rem;margin:0 0 10px}
.sector p{font-size:.95rem;margin:0}
@media (max-width:1000px){.sectoren{grid-template-columns:repeat(2,1fr)}}
.sectoren .sector:nth-child(5):last-child{grid-column:auto}
@media (max-width:600px){.sectoren{grid-template-columns:1fr}}
.rij-tekst h2.kaart-titel{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:14px}
.rij-tekst h2 a:hover{color:var(--goud-tekst)}
.pagina-zakelijk .hero-paneel .container{max-width:900px}

/* hero-paneel: meer lucht rond het kleine kopje boven de titel (ook met kruimelpad erboven) */
.hero-paneel .container,.broodkruimels+.hero .hero-paneel .container{padding-top:clamp(48px,6vw,88px)}
.hero-vol .hero-paneel .container::before{content:'';display:block;width:56px;height:1px;background:var(--goud);margin-bottom:28px}
.hero-paneel .eyebrow{font-size:.8rem;margin-bottom:22px}
.hero-paneel h1{margin-bottom:.6em}
@media (max-width:900px){.hero-paneel .container,.broodkruimels+.hero .hero-paneel .container{padding-top:40px}.hero-vol .hero-paneel .container::before{margin-bottom:22px}}
/* werkwijze-tijdlijn: pictogram in plaats van foto */
.tijdlijn-icoon{display:grid;place-items:center;aspect-ratio:3/2;background:var(--warm-wit);border:1px solid var(--lijn)}
.tijdlijn-icoon .stap-icoon{display:block;width:clamp(96px,12vw,160px);height:auto;color:var(--goud);stroke-width:1}
.tijdlijn-om .tijdlijn-icoon{order:-1}
@media (max-width:900px){.tijdlijn-icoon{aspect-ratio:auto;background:transparent;border:0;place-items:start;order:-1}.tijdlijn-om .tijdlijn-icoon{order:-1}.tijdlijn-icoon .stap-icoon{width:64px}.tijdlijn-stap{gap:12px}}

/* whatsapp: rustige tekstlink in de huisstijl, met klein pictogram */
.whatsapp-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.wa-icoon{flex:none;opacity:.85}
.contact-whatsapp{margin:-6px 0 18px}
.footer-whatsapp .wa-icoon,.afgeschermd .wa-icoon{width:15px;height:15px}
/* menu op tabletbreedte: compacter zodat niets afbreekt */
.nav-lijst a{white-space:nowrap}
@media (max-width:1120px) and (min-width:901px){.hoofd-nav{gap:22px}.nav-lijst{gap:18px}.nav-lijst a{letter-spacing:.12em}.nav-cta{padding:11px 16px;letter-spacing:.12em}}
/* fotoband: liggend bovenkant in beeld; staand heel tonen */
.fotoband img{object-position:center 25%}
.fotoband-staand .container{display:flex;justify-content:center}
.fotoband-staand img{width:min(560px,100%);height:auto;max-height:none;object-fit:unset}