/* Daphne Boer Fotografie · variant A "Licht en rustig, foto eerst"
   Koppen Libre Caslon Display, tekst Hanken Grotesk (beide lokaal, OFL). */
@font-face{font-family:"Libre Caslon Display";src:url("fonts/libre-caslon-display-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --bg:#faf9f7;          /* gebroken wit, neutraal */
  --vlak:#f1f0ee;        /* tweede vlak */
  --inkt:#1e1f20;
  --inkt-2:#48494a;
  --stil:#5c5d5e;
  --lijn:#dddcda;
  --lijn-sterk:#c4c3c1;
  --accent:#5b7085;      /* grijsblauw uit het logo */
  --accent-donker:#485a6c;
  --op-accent:#ffffff;
  --link:#4f6377;
  --focus:#5b7085;
  --serif:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breed:1240px;
  --rand:clamp(1.25rem,4vw,2.5rem);
  --sectie:clamp(4.5rem,10vw,8.5rem);
  --kop-h:9.5rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161718;
    --vlak:#1e1f20;
    --inkt:#ecebea;
    --inkt-2:#c9c8c7;
    --stil:#a8a7a6;
    --lijn:#323334;
    --lijn-sterk:#4a4b4c;
    --accent:#5b7085;
    --accent-donker:#485a6c;
    --op-accent:#ffffff;
    --link:#a9bccf;
    --focus:#a9bccf;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kop-h) + 1rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--inkt);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-weight:400;font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h2{font-family:var(--serif);font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.08;letter-spacing:-.01em}
h3{font-family:var(--serif);font-size:1.5rem;line-height:1.3}
p{margin:0;text-wrap:pretty}
p+p{margin-top:1em}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--inkt)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--op-accent)}
figure{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;margin-top:0;margin-bottom:0;padding:0}

.ic{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.skip{position:absolute;left:1rem;top:-4rem;z-index:20;background:var(--inkt);color:var(--bg);padding:.6rem 1rem;border-radius:4px}
.skip:focus{top:1rem}
.skip:hover{color:var(--bg)}
.visueel-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.concept{margin:0;padding:.5rem var(--rand);background:var(--vlak);color:var(--inkt-2);font-size:.8125rem;line-height:1.4;text-align:center;border-bottom:1px solid var(--lijn)}

/* Knoppen en links */
.knop{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.75rem 1.4rem;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--op-accent);font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1.3;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.knop:hover{background:var(--accent-donker);border-color:var(--accent-donker);color:var(--op-accent)}
.knop-klein{min-height:2.75rem;padding:.55rem 1.1rem;font-size:.9375rem}
.knop-rand{background:transparent;color:var(--inkt);border-color:var(--lijn-sterk)}
.knop-rand:hover{background:transparent;color:var(--inkt);border-color:var(--inkt)}
.tekstlink{color:var(--inkt);font-weight:500;text-decoration:underline;text-decoration-color:var(--lijn-sterk);text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-decoration-color .2s ease}
.tekstlink:hover{color:var(--inkt);text-decoration-color:var(--accent)}

/* Kop */
.kop{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--lijn)}
.kop-binnen{max-width:var(--breed);margin:0 auto;padding:0 var(--rand);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 1.5rem}
.kop-logo{display:block;flex:none;padding:.25rem 0}
.kop-logo img{width:auto;height:5.5rem}
.menu-knop{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem .9rem;border:1px solid var(--lijn-sterk);border-radius:999px;background:transparent;color:var(--inkt);font:500 .9375rem/1 var(--sans);cursor:pointer}
.menu-label{line-height:1}
.menu-knop .ic-dicht{display:none}
.menu-knop[aria-expanded="true"] .ic-open{display:none}
.menu-knop[aria-expanded="true"] .ic-dicht{display:block}
.menu{display:none}
.menu ul{list-style:none;margin:0;padding:0}
.menu a:not(.knop){color:var(--inkt);text-decoration:none}
.menu a:not(.knop):hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.35em}
.menu.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--lijn);padding:.5rem var(--rand) 1.5rem}
.menu.open li a{display:block;padding:.85rem 0;border-bottom:1px solid var(--lijn);font-size:1.125rem}
.menu.open .knop{margin-top:1.25rem}
@media (min-width:960px){
  .menu-knop{display:none}
  .menu,.menu.open{display:flex;position:static;align-items:center;gap:2rem;padding:0;border:0;background:none}
  .menu ul,.menu.open ul{display:flex;gap:1.6rem}
  .menu.open li a,.menu li a{display:inline-block;padding:.6rem 0;border:0;font-size:.9688rem}
  .menu.open .knop{margin-top:0}
  :root{--kop-h:7.5rem}
  .kop-logo img{height:7rem}
}

/* Hero */
.held{display:grid;grid-template-columns:1fr}
.held-foto{background:var(--bg)}
.held-foto img{width:100%;height:min(36svh,22rem);object-fit:cover;object-position:50% 18%}
.held-tekst{padding:1.75rem var(--rand) 3.5rem;max-width:40rem}
.held h1{display:flex;flex-direction:column;gap:1.1rem}
.held-zin{font-family:var(--serif);font-size:clamp(2.35rem,8.4vw,4.5rem);line-height:1.04;letter-spacing:-.015em;color:var(--inkt)}
.held-term{font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1.4;color:var(--inkt-2);letter-spacing:.01em}
.held-lead{margin-top:1.5rem;font-size:1.125rem;line-height:1.6;color:var(--inkt-2);max-width:34em}
.held-acties .tekstlink{display:inline-block;padding:.6rem 0}
.held-acties{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2rem}
.held-voet{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--lijn);font-size:.875rem;color:var(--stil)}
@media (min-width:960px){
  .held{grid-template-columns:minmax(0,45fr) minmax(0,55fr);min-height:calc(100svh - var(--kop-h) - 2.25rem);max-height:58rem}
  .held-foto{order:2;position:relative}
  .held-foto img{position:absolute;inset:clamp(1rem,2.2vw,2rem) var(--rand) clamp(1rem,2.2vw,2rem) 0;width:calc(100% - var(--rand));height:calc(100% - 2 * clamp(1rem,2.2vw,2rem));object-position:50% 25%}
  .held-tekst{order:1;align-self:center;justify-self:end;max-width:36rem;padding:4rem clamp(2rem,4vw,4.5rem) 4rem var(--rand)}
}
@media (min-width:1400px){
  .held-tekst{padding-left:0}
}

/* Secties */
.sectie{padding:var(--sectie) var(--rand)}
.sectie>*{max-width:var(--breed);margin-left:auto;margin-right:auto}
.sectie-vlak{background:var(--vlak)}
.sectie-kop{display:grid;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sectie-kop p{max-width:36em;color:var(--inkt-2);font-size:1.125rem}
@media (min-width:960px){
  .sectie-kop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:3rem}
}

/* Aanbod */
.aanbod{display:grid;gap:3rem 1.5rem;grid-template-columns:1fr}
.dienst img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--vlak)}
.dienst h3{margin-top:1.25rem}
.dienst p{margin-top:.5rem;color:var(--inkt-2);max-width:32em}
.dienst .dienst-prijs{margin-top:.75rem;color:var(--inkt);font-weight:500;font-variant-numeric:tabular-nums}
@media (min-width:640px){.aanbod{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.aanbod{grid-template-columns:repeat(3,minmax(0,1fr));gap:4rem 2rem}}

/* Tweeluik: foto + tekst */
.tweeluik{display:grid;gap:2.5rem;align-items:center}
.tweeluik-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tweeluik-tekst{max-width:36rem}
.tweeluik-tekst h2{margin-bottom:1.5rem}
.tweeluik-tekst>p{color:var(--inkt-2)}
@media (min-width:960px){
  .tweeluik{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(3rem,7vw,7rem)}
  .tweeluik-om .tweeluik-foto{order:2}
}
.kader{margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--lijn-sterk)}
.kader h3{font-size:1.375rem;margin-bottom:.6rem}
.kader p{color:var(--inkt-2);margin-bottom:1rem}

/* Stappen */
.stappen{display:grid;border-top:1px solid var(--lijn)}
.stap{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.4rem 1rem;padding:1.75rem 0;border-bottom:1px solid var(--lijn)}
.stap-nr{grid-row:span 2;font-family:var(--serif);font-size:2.25rem;line-height:1;color:var(--link)}
.stap p{color:var(--inkt-2);max-width:36em}
@media (min-width:960px){
  .stap{grid-template-columns:6rem minmax(0,3fr) minmax(0,7fr);align-items:baseline;padding:2.25rem 0}
  .stap-nr{grid-row:auto;font-size:3rem}
}

/* Over mij */
.feiten{display:grid;gap:0;margin:2rem 0 0;border-top:1px solid var(--lijn-sterk)}
.feiten div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--lijn)}
.feiten dt{color:var(--stil);font-size:.9375rem}
.feiten dd{margin:0}

/* Tarieven */
.prijzen{border-top:1px solid var(--lijn-sterk)}
.prijs{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--lijn)}
.prijs-naam p{margin-top:.35rem;color:var(--inkt-2);max-width:40em}
.prijs-bedrag{flex:none;font-family:var(--serif);font-size:1.625rem;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.prijs-bedrag span{font-family:var(--sans);font-size:.875rem;color:var(--stil);margin-right:.25rem}
.inbegrepen{margin-top:1.75rem;color:var(--inkt-2)}
.inbegrepen p{max-width:44em}
.inbegrepen strong{color:var(--inkt);font-weight:600}
.muur{display:grid;gap:2rem;margin-top:clamp(3.5rem,7vw,6rem);align-items:start}
.muur-foto img{width:100%;aspect-ratio:5/4;object-fit:cover}
.muur-tekst h3{font-size:1.75rem;margin-bottom:.6rem}
.muur-tekst>p{color:var(--inkt-2);margin-bottom:1.5rem}
.prijzen-klein .prijs{padding:.85rem 0}
.prijs-regel{color:var(--inkt)}
.prijzen-klein .prijs-bedrag{font-family:var(--sans);font-size:1rem;font-weight:500;white-space:normal}
.prijzen-klein .prijs-bedrag span{font-size:.875rem;font-weight:400}
@media (max-width:480px){
  .prijs{flex-direction:column;gap:.5rem}
  .prijs-bedrag{text-align:left}
  .prijzen-klein .prijs{flex-direction:row;gap:1rem}
  .prijzen-klein .prijs-bedrag{text-align:right}
}
@media (min-width:960px){
  .muur{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(3rem,7vw,7rem)}
}

/* Vragen */
.vragen-raster{display:grid;gap:2.5rem}
.vragen-kop h2{margin-bottom:1rem}
.vragen-kop p{color:var(--inkt-2)}
.vragen{border-top:1px solid var(--lijn-sterk)}
.vragen details{border-bottom:1px solid var(--lijn)}
.vragen summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 0;cursor:pointer;list-style:none;font-size:1.125rem;font-weight:500;line-height:1.4}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary .ic{color:var(--link);transition:transform .2s ease}
.vragen details[open] summary .ic{transform:rotate(45deg)}
.vragen summary:hover{color:var(--link)}
.vragen details p{padding:0 2.5rem 1.5rem 0;color:var(--inkt-2);max-width:40em}
@media (min-width:960px){.vragen-raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem);align-items:start}}

/* Contact */
.contact-noot{margin-top:1.5rem;font-size:.9375rem;color:var(--stil)}

/* Voet */
.voet{padding:3.5rem var(--rand) 3rem;border-top:1px solid var(--lijn)}
.voet-binnen{max-width:var(--breed);margin:0 auto;display:grid;gap:1.75rem;align-items:center}
.voet-logo{width:10rem;height:auto}
.voet-tekst p{font-size:.9375rem;color:var(--inkt-2)}
.voet-tekst p+p{margin-top:.4rem}
.voet-tekst a{color:var(--inkt-2);display:inline-block;padding:.6rem 0}
.voet-tekst a:hover{color:var(--inkt)}
.voet .voet-klein{font-size:.8125rem;color:var(--stil)}
@media (min-width:760px){.voet-binnen{grid-template-columns:auto minmax(0,1fr);gap:3rem}}

/* Toevoegingen na critique */
.dienst .tekstlink{display:inline-block;margin-top:.6rem;padding:.25rem 0}
.held-lead .tekstlink{font-weight:500}
.kader .knop{margin-top:.25rem}
.muur-lijst{border-top:1px solid var(--lijn-sterk)}
.muur-lijst summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;cursor:pointer;list-style:none;font-weight:500}
.muur-lijst summary::-webkit-details-marker{display:none}
.muur-lijst summary .ic{color:var(--link);transition:transform .2s ease}
.muur-lijst[open] summary .ic{transform:rotate(45deg)}
.muur-lijst .prijzen{border-top:1px solid var(--lijn)}
@media (max-width:959px){
  .no-js .menu-knop{display:none}
  .no-js .menu{display:block;padding:.5rem 0 1rem}
  .no-js .menu ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
  .no-js .kop-binnen{flex-wrap:wrap}
}
@media (max-width:480px){.concept{font-size:.75rem;padding-top:.4rem;padding-bottom:.4rem}}

/* Next level (30-10) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.kop-snel{order:3;flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:0 0 .75rem}
.kop-snel .knop{justify-content:center;width:100%;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;gap:.4rem}
.kop-snel .ic{width:1.05rem;height:1.05rem}
@media (min-width:960px){.kop-snel{display:none}}

.sectie-google{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3.5rem,7vw,5.5rem);border-bottom:1px solid var(--lijn)}
.google-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.75rem 2rem;margin-bottom:2rem}
.google-kop h2{font-size:clamp(1.75rem,3vw,2.375rem)}
.google-bron{color:var(--inkt-2);font-size:.9375rem}
.reviews{display:grid;gap:2.5rem clamp(2rem,5vw,4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.review figure{margin:0;padding-top:1.25rem;border-top:1px solid var(--lijn-sterk)}
.sterren{display:inline-flex;gap:.2rem;color:var(--link)}
.sterren svg{width:1rem;height:1rem;fill:currentColor}
.review blockquote{margin:1rem 0 0}
.review blockquote p{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.35;color:var(--inkt)}
.review figcaption{margin-top:1rem;font-size:.875rem;color:var(--stil)}
.review-naam{color:var(--inkt);font-weight:500}

.concept-label{display:inline-block;margin-top:1rem;padding:.2rem .65rem;border:1px dashed var(--stil);border-radius:999px;font-size:.8125rem;line-height:1.4;font-weight:500;color:var(--stil)}
.sectie-kop .concept-label{margin:.5rem 0 0}

.voorbereiding{margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--lijn-sterk)}
.voorbereiding h3{font-size:1.375rem;margin-bottom:.5rem}
.voorbereiding p{color:var(--inkt-2)}
.voorbereiding-stappen{margin:1rem 0 0;padding-left:1.2rem;display:grid;gap:.3rem;color:var(--inkt)}
.voorbereiding-stappen li::marker{color:var(--link)}

.cadeau{display:grid;gap:2rem}
.cadeau-tekst h2{margin-bottom:1.25rem}
.cadeau-tekst>p:not(.concept-label){color:var(--inkt-2);max-width:32em}
.cadeau-keuze .knop{margin-top:1.75rem}
@media (min-width:960px){.cadeau{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(3rem,7vw,7rem);align-items:start}}

.sectie-blog{border-top:1px solid var(--lijn)}
.artikelen{border-top:1px solid var(--lijn-sterk)}
.artikel{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--lijn)}
.artikel-titel{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.3;color:var(--inkt-2)}
.artikel-status{flex:none;font-size:.8125rem;color:var(--stil)}

.routes{margin-top:2rem;border-top:1px solid var(--lijn-sterk)}
.route{padding:1.5rem 0;border-bottom:1px solid var(--lijn)}
.route h3{font-size:1.375rem}
.route p{margin:.4rem 0 1rem;color:var(--inkt-2)}
.route-knoppen{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:959px){#plannen .tweeluik-foto{order:2}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}