/* De kleuren komen uit de brochure zelf, uit de gerenderde pagina's gemeten.
   Het papier is warm roze-crème in plaats van bijna-neutraal, en de inkt is
   een diep warm bordeaux in plaats van bijna-zwart. Dat verschil maakt de
   hele pagina zachter zonder dat er iets aan leesbaarheid verloren gaat:
   titel 12,5:1 op het papier, lopende tekst 7,5:1, rooskleurige tekst 6,2:1.
   Alle drie ruim boven de 4,5:1 die nodig is. */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --rose:#D26978; --rose-fill:#B44C5F; --rose-ink:#9E3B4C; --soft:#F7E3E2;
  --bg:#FDF6F2; --card:#FFFFFF; --card2:#F9EDE9;
  --ink:#46262C; --body:#6B464C; --muted:#8A6B70;
  --line:rgba(70,38,44,.11); --line-strong:rgba(70,38,44,.18);
  /* Warm bijna-zwart in plaats van puur zwart, zodat het donkere deel bij het merk blijft. */
  --nacht:#2E1A1E; --nacht-2:#3C2229; --krijt:#FDF6F2;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--body);
  font-size:17px;line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
/* Lilita One heeft maar een gewicht en is van zichzelf zwaar, dus gewicht 400
   en geen negatieve letterafstand: die maakt deze letter dicht. */
h1,h2{font-family:'Lilita One','Bricolage Grotesque',system-ui,sans-serif;font-weight:400;
  letter-spacing:.004em;color:var(--ink);text-wrap:balance;text-transform:uppercase;}
h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;line-height:1.25;}
p,li{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
em.sier{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;}
*:focus-visible{outline:2px solid var(--rose);outline-offset:3px;}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px;}

/* Glas, warm getint.
   slop-check-ok: backdrop-blur staat alleen op de plakkende navigatiebalk. Die zweeft
   echt boven scrollende inhoud, wat de uitzondering is die anti-patterns 1.6 toestaat.
   Overal elders staat een effen vlak, want daar is doorschijnendheid versiering. */
.glas{background:rgba(253,246,242,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(253,246,242,.14);}
.glas.licht{background:rgba(33,26,28,.04);border-color:var(--line);backdrop-filter:blur(8px);}

/* ---------- navigatie ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 16px;}
.navin{display:flex;align-items:center;gap:18px;border-radius:999px;padding:8px 8px 8px 18px;
  transition:background .3s var(--ease),border-color .3s var(--ease);}
.navmerk{display:flex;align-items:center;gap:9px;}
.navmerk img{width:34px;height:34px;border-radius:9px;}
.navmerk span{font-family:'Lilita One',sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:16px;color:var(--krijt);transition:color .3s var(--ease);}
.navlinks{display:none;align-items:center;gap:22px;}
@media (min-width:880px){ .navlinks{display:flex;} }
.navlinks a{font-size:13.5px;font-weight:500;color:rgba(253,246,242,.72);transition:color .2s var(--ease);}
.navlinks a:hover{color:var(--krijt);}
/* De knop in de balk draagt dezelfde actie als het formulier in het hero,
   dus hij mag er ook zo uitzien. Gevuld, op donker en op licht. */
.navknop{border-radius:999px;padding:9px 17px;font-size:13.5px;font-weight:600;
  background:var(--rose-fill);color:#fff;transition:background .2s var(--ease);}
.navknop:hover{background:var(--rose-ink);}
/* Op een telefoon zit de knop in het paneel, want in de balk is geen plaats. */
@media (max-width:879px){ .navknop{display:none;} }

/* De tuimelknop: twee streepjes die kruisen zodra het paneel openstaat. */
.navtuimel{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;border:0;background:none;cursor:pointer;
  border-radius:999px;}
@media (min-width:880px){ .navtuimel{display:none;} }
.navtuimel span{display:block;height:2px;border-radius:2px;background:var(--krijt);
  transition:transform .25s var(--ease),background .3s var(--ease);}
body.voorbijhero .navtuimel span{background:var(--ink);}

/* Het paneel. Voluit over de pagina, want half doorschijnend leest niet. */
.navpaneel{position:fixed;inset:0;z-index:55;background:var(--nacht);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:92px 24px 34px;}
.navpaneel[hidden]{display:none;}
@media (min-width:880px){ .navpaneel{display:none;} }
.navpaneelin{display:flex;flex-direction:column;}
.navpaneelin a{font-family:'Lilita One',sans-serif;font-weight:400;
  letter-spacing:.01em;font-size:clamp(25px,7vw,32px);line-height:1.15;
  color:var(--krijt);padding:16px 0;border-bottom:1px solid rgba(253,246,242,.13);}
.navpaneelin a:last-child{border-bottom:0;}
.navpaneelknop{width:100%;justify-content:center;}

/* Zolang het paneel open is blijft de balk donker, ook als je al ver
   naar beneden was toen je hem opende. */
body.menu-op{overflow:hidden;}
body.menu-op .navin{background:none;border-color:transparent;backdrop-filter:none;}
body.menu-op .navmerk span{color:var(--krijt);}
body.menu-op .navtuimel span{background:var(--krijt);}
body.menu-op .navtuimel span:first-child{transform:translateY(3.5px) rotate(45deg);}
body.menu-op .navtuimel span:last-child{transform:translateY(-3.5px) rotate(-45deg);}

@media (prefers-reduced-motion:no-preference){
  .navpaneelin a,.navpaneelknop{opacity:0;transform:translateY(14px);
    transition:opacity .34s var(--ease),transform .34s var(--ease);}
  body.menu-op .navpaneelin a,body.menu-op .navpaneelknop{opacity:1;transform:none;}
  .navpaneelin a:nth-child(2){transition-delay:40ms;}
  .navpaneelin a:nth-child(3){transition-delay:80ms;}
  .navpaneelin a:nth-child(4){transition-delay:120ms;}
  .navpaneelin a:nth-child(5){transition-delay:160ms;}
  .navpaneelknop{transition-delay:200ms;}
}
/* Voorbij het hero wordt de balk licht, want daar staat hij op papier. */
body.voorbijhero .navmerk span{color:var(--ink);}
body.voorbijhero .navlinks a{color:var(--muted);}
body.voorbijhero .navlinks a:hover{color:var(--ink);}

/* Op een telefoon blijft de brochure altijd binnen duimbereik zodra het hero
   uit beeld is. Een vaste balk onderaan, niets meer dan een knop. */
.plakcta{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px
  calc(10px + env(safe-area-inset-bottom));background:var(--nacht);
  border-top:1px solid rgba(253,246,242,.14);display:none;}
.plakcta a{display:flex;align-items:center;justify-content:center;width:100%;}
@media (max-width:879px){
  body.voorbijhero:not(.menu-op) .plakcta{display:block;}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;overflow:hidden;
  background:var(--nacht);padding:120px 22px 58px;}
.heroachter{position:absolute;inset:0;opacity:.5;
  background:url('/assets/fotos/zaal-optrekken.webp') center 30%/cover no-repeat;}
.herofloers{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(46,26,30,.62) 0%, rgba(46,26,30,.40) 45%, rgba(46,26,30,.95) 100%);}
.heroin{position:relative;z-index:2;width:100%;max-width:1000px;}
.heroin h1{font-size:clamp(38px,7.4vw,72px);line-height:1.02;color:var(--krijt);}
/* De tweede helft van de kop in de cursieve serif, zoals het statement in de
   referentie: de belofte krijgt een andere stem dan de aankondiging. */
.heroin h1 em.sier{display:block;text-transform:none;color:#F1C6CC;font-size:.9em;line-height:1.08;margin-top:.08em;}
.herolead{font-size:clamp(15px,2.2vw,18px);font-weight:400;line-height:1.62;
  color:rgba(253,246,242,.8);max-width:52ch;margin:22px auto 0;}
.heroknoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;}
.knop.groot{padding:16px 30px;font-size:15.5px;}
.knop.stildonker{background:transparent;color:var(--krijt);
  border:1px solid rgba(253,246,242,.38);}
.knop.stildonker:hover{background:rgba(253,246,242,.12);}
.heroonder{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;margin-top:40px;}
.heroonder a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:999px;color:rgba(253,246,242,.8);border:1px solid rgba(253,246,242,.18);
  transition:color .2s var(--ease),background .2s var(--ease);}
.heroonder a:hover{color:var(--krijt);background:rgba(253,246,242,.10);}

/* De kop, de regel en de knoppen komen kort na elkaar tot rust. */
@media (prefers-reduced-motion:no-preference){
  .heroin h1,.herolead,.heroknoppen,.heroonder{opacity:0;transform:translateY(18px);
    animation:herokomst .7s var(--ease) forwards;}
  .herolead{animation-delay:.12s;}
  .heroknoppen{animation-delay:.24s;}
  .heroonder{animation-delay:.36s;}
  @keyframes herokomst{to{opacity:1;transform:none;}}
}

/* De aanvraagkaart: gezicht en formulier samen. Wie de brochure vraagt,
   ziet meteen wie ze gaat sturen. Sinds het hero een volle foto draagt
   staat deze kaart alleen nog in de brochuresectie. */
.vormkaart{background:var(--card);border-radius:20px;overflow:hidden;
  max-width:440px;justify-self:center;width:100%;}
.vormfoto{position:relative;aspect-ratio:1;overflow:hidden;}
.vormfoto img{width:100%;height:100%;object-fit:cover;object-position:center 8%;}
.vormfoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 10px;
  background:linear-gradient(180deg, rgba(23,19,20,0) 0%, rgba(23,19,20,.78) 100%);
  color:var(--krijt);font-size:13px;font-weight:600;}
.vormin{padding:18px 20px 20px;}
.vormkop{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.01em;color:var(--ink);}
.vormsub{font-size:13.5px;font-weight:400;line-height:1.55;color:var(--muted);margin-top:5px;}
.vormin label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);
  margin:14px 0 6px;}
.vormin input{width:100%;background:var(--bg);border:1px solid var(--line-strong);
  border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px;font-weight:500;
  color:var(--ink);outline:none;margin-bottom:0;}
.vormin input:focus{border-color:var(--rose-fill);}
.vormin input.veldfout{border-color:var(--rose-fill);}
.vormin .knop{width:100%;margin-top:16px;}
.vormmelding{font-size:13px;font-weight:600;color:var(--rose-ink);margin-top:10px;min-height:1.2em;}
.vormmicro{font-size:12.5px;font-weight:400;line-height:1.55;color:var(--muted);margin-top:11px;}
.vormmicro a{color:var(--rose-ink);font-weight:600;}
.vormklaar{padding:6px 2px;}
.vormklaar h3{font-size:18px;}
.vormklaar p{font-size:14px;font-weight:400;line-height:1.6;color:var(--body);margin-top:8px;}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--rose-fill);color:#fff;font-size:15px;font-weight:600;
  padding:14px 24px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;
  transition:background .18s var(--ease);}
.knop:hover{background:var(--rose-ink);}
.knop[disabled]{opacity:.65;cursor:default;}
.knop.stil{background:transparent;color:var(--ink);border:1px solid var(--line-strong);}
.knop.stil:hover{background:var(--card2);}

/* ---------- secties ---------- */
section{padding:84px 0;scroll-margin-top:76px;}
@media (min-width:820px){ section{padding:124px 0;} }
h2{font-size:clamp(30px,5vw,50px);line-height:1.02;max-width:19ch;}
h2 em.sier{text-transform:none;color:var(--rose-ink);}
.intro{font-size:17px;font-weight:400;line-height:1.72;color:var(--body);max-width:54ch;margin-top:18px;}
.vlak{background:var(--card2);}

/* Scroll-onthulling. Standaard staat alles zichtbaar: gaat er iets mis met de
   waarnemer of met JS, dan is de pagina gewoon leesbaar in plaats van leeg. */
.onthul{opacity:1;transform:none;}
.js-onthul .onthul{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js-onthul .onthul.zichtbaar{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js-onthul .onthul{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.001ms !important;}
}

/* ---------- brochure ---------- */
.brochuregrid{display:grid;grid-template-columns:1fr;gap:38px;align-items:start;margin-top:8px;}
@media (min-width:920px){ .brochuregrid{grid-template-columns:1.15fr .85fr;gap:60px;} }
.brochurelijst{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:0;
  background:var(--card);border-radius:20px;padding:8px 24px;}
.brochurelijst li{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line);
  font-size:15.5px;font-weight:400;line-height:1.65;color:var(--body);}
.brochurelijst li:first-child{border-top:0;}
.brochurelijst svg{flex:0 0 auto;margin-top:4px;color:var(--rose-ink);}
.brochurelijst b{font-weight:700;color:var(--ink);}
/* Dezelfde kaart als in het hero, maar op licht: schaduw zachter, geen foto. */
.vormkaart.oplicht{justify-self:start;max-width:420px;}
@media (max-width:919px){ .vormkaart.oplicht{justify-self:center;} }

/* ---------- herkenning ---------- */
/* Twee kolommen met korte regels, zoals "Herken je dit?" in de gids.
   Elke regel begint met het hartje uit het merk. */
.herkenlijst{list-style:none;margin-top:32px;background:var(--card);
  border-radius:20px;padding:30px 26px;display:grid;grid-template-columns:1fr;
  gap:2px 44px;}
@media (min-width:820px){ .herkenlijst{grid-template-columns:1fr 1fr;padding:36px 34px;} }
.herkenlijst li{display:flex;gap:13px;padding:14px 0;
  font-size:16.5px;font-weight:500;line-height:1.6;color:var(--body);}
.herkenlijst svg{flex:0 0 auto;margin-top:3px;color:var(--rose);}
/* Het zachtroze vlak uit de brochure, voor de zin die alles omdraait. */
.herkendraai{margin-top:26px;background:var(--soft);border-radius:20px;
  padding:26px 28px;font-size:17px;font-weight:400;line-height:1.7;color:var(--ink);
  max-width:62ch;}
.herkendraai b{font-weight:700;}
.herken .herolinkje{margin-top:24px;color:var(--rose-ink);}
.herken .herolinkje:hover{color:var(--ink);}

/* ---------- stappen ---------- */
/* De volgorde is de inhoud van deze sectie, dus de lijn loopt letterlijk van
   nummer naar nummer. Een haarlijn van 1px, per stap een segment tot aan het
   volgende nummer, zodat hij precies stopt waar de reeks stopt. Onder 1000px
   staat de reeks rechtop met de lijn langs de linkerkant. */
.stappen{display:grid;grid-template-columns:1fr;gap:34px;margin-top:44px;}
.stap{position:relative;padding-left:62px;}
.stap::before{content:"";position:absolute;background:var(--line-strong);
  left:18px;top:50px;bottom:-34px;width:1px;}
.stap:last-child::before{display:none;}
/* Het cijfer in de titelletter, groot en roze: de volgorde is hier de inhoud. */
.stapnr{position:absolute;left:0;top:-4px;
  font-family:'Lilita One',sans-serif;font-weight:400;font-size:40px;line-height:1;
  color:var(--rose);font-variant-numeric:tabular-nums;}
.stap h3{font-size:19px;margin:6px 0 8px;letter-spacing:-.01em;}
.stap p{font-size:15px;font-weight:400;line-height:1.66;color:var(--body);max-width:56ch;}

@media (min-width:1000px){
  .stappen{grid-template-columns:repeat(4,1fr);gap:0 32px;}
  .stap{padding-left:0;padding-top:66px;}
  /* De rail loopt onder de cijfers door, van kolom tot kolom, en stopt bij de laatste. */
  .stap::before{left:0;right:-32px;top:50px;bottom:auto;width:auto;height:1px;}
  .stap:last-child::before{display:block;right:0;}
  .stap h3{margin:0 0 7px;}
}
/* De lijn tekent zichzelf mee terwijl de sectie in beeld komt, stap voor stap.
   Dat versterkt de volgorde in plaats van hem te versieren. De vertraging loopt
   op met 70ms per stap en stopt na 210ms, dus de reeks staat er snel.
   Zonder .js-onthul (geen observer of liever geen beweging) staat de lijn er
   gewoon meteen. */
@media (prefers-reduced-motion:no-preference){
  .js-onthul .onthul .stap::before{transform:scaleY(0);transform-origin:top;
    transition:transform 420ms var(--ease);}
  .js-onthul .onthul.zichtbaar .stap::before{transform:scaleY(1);}
  .js-onthul .onthul .stap:nth-child(2)::before{transition-delay:70ms;}
  .js-onthul .onthul .stap:nth-child(3)::before{transition-delay:140ms;}
  .js-onthul .onthul .stap:nth-child(4)::before{transition-delay:210ms;}
}
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .js-onthul .onthul .stap::before{transform:scaleX(0);transform-origin:left;}
  .js-onthul .onthul.zichtbaar .stap::before{transform:scaleX(1);}
}

/* ---------- cyclus ---------- */
.cyclus{background:var(--nacht-2);color:var(--krijt);border-radius:18px;overflow:hidden;margin-top:38px;}
.cyclusband{display:flex;height:4px;}
.cyclusband i{flex:1;}
.cyclusin{padding:28px 24px;}
@media (min-width:720px){ .cyclusin{padding:36px 34px;} }
.cyclusin h3{font-size:22px;color:var(--krijt);letter-spacing:-.01em;}
.cyclusin p{font-size:16px;font-weight:400;line-height:1.7;color:rgba(253,246,242,.82);
  max-width:60ch;margin-top:11px;}
.fasen{display:grid;grid-template-columns:1fr;gap:13px;margin-top:24px;}
@media (min-width:720px){ .fasen{grid-template-columns:repeat(4,1fr);} }
.fase{border-top:2px solid;padding-top:12px;}
.fase b{display:block;font-size:14px;font-weight:600;color:var(--krijt);margin-bottom:5px;}
.fase span{font-size:13.5px;font-weight:400;line-height:1.6;color:rgba(253,246,242,.72);}

/* ---------- adempauze ---------- */
/* Een sectie met niets dan een zin, zodat de pagina ergens kan ademen.
   De zaalfoto mag hier zwaar afgedekt: het gaat om de woorden. */
.adem{background:var(--nacht);padding:110px 22px;text-align:center;}
.adem p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(26px,4.8vw,44px);line-height:1.22;color:var(--krijt);
  max-width:20ch;margin:0 auto;text-wrap:balance;}

/* ---------- over ---------- */
.overgrid2{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
@media (min-width:880px){ .overgrid2{grid-template-columns:.8fr 1.2fr;gap:60px;} }
.overgrid2 .beeld{max-width:360px;}
.overtekst p{font-size:17px;font-weight:400;line-height:1.75;color:var(--body);
  max-width:54ch;margin-top:17px;}

/* ---------- functies ---------- */
/* Functies als lijst, niet als kaarten met een icoontegel erboven.
   Witruimte en een haarlijn scheiden, geen container per item. */
.functies{margin-top:38px;display:grid;grid-template-columns:1fr;gap:0;}
@media (min-width:820px){ .functies{grid-template-columns:repeat(2,1fr);column-gap:56px;} }
.functies>div{padding:24px 0;border-top:1px solid var(--line);}
.functies dt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.01em;
  font-size:18.5px;color:var(--ink);margin-bottom:8px;}
.functies dd{font-size:15.5px;font-weight:400;line-height:1.7;color:var(--body);max-width:46ch;}

/* ---------- beeld ---------- */
/* Vierkant, altijd. De brochure zet haar foto's als blokken naast de tekst,
   en een vast vierkant houdt elke rij rustig, ook als de bronfoto's
   verschillende verhoudingen hebben. De uitsnede staat per foto apart,
   want anders verdwijnt er net een gezicht of een bord uit beeld. */
.beeld{border-radius:18px;background:var(--card2);overflow:hidden;aspect-ratio:1;}
.beeld img{width:100%;height:100%;object-fit:cover;object-position:center;}
.beeld img[src*="samira-portret"]{object-position:center 8%;}
.beeld img[src*="zaal-deadlift"]{object-position:center 34%;}
.beeld img[src*="zaal-rugtraining"]{object-position:center 40%;}
.beeld img[src*="maaltijd-kwark"]{object-position:center 42%;}
/* Twee kommen boven elkaar: vierkant midden erop snijdt allebei doormidden,
   dus we tonen de bovenste helemaal. */
.beeld img[src*="maaltijd-kip-zoete"]{object-position:center 6%;}
.strook{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:36px;}
@media (min-width:720px){ .strook{grid-template-columns:repeat(4,1fr);gap:15px;} }
.overgrid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;}
@media (min-width:880px){ .overgrid{grid-template-columns:.85fr 1.15fr;gap:52px;} }
.overgrid>.beeld{max-width:400px;}

/* ---------- vragen ---------- */
.vragen{max-width:780px;margin-top:28px;background:var(--card);
  border-radius:20px;padding:6px 26px;}
.vraag{border-top:1px solid var(--line);}
.vraag:first-child{border-top:0;}
.vraag summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--ink);}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary::after{content:"+";flex:0 0 auto;font-family:'Hanken Grotesk',sans-serif;
  font-size:20px;font-weight:500;color:var(--rose-ink);transition:transform .2s var(--ease);}
.vraag[open] summary::after{transform:rotate(45deg);}
.vraag p{font-size:16px;font-weight:400;line-height:1.72;color:var(--body);
  max-width:60ch;padding:0 0 22px;}
.vraag a{color:var(--rose-ink);font-weight:600;}

/* ---------- slotvraag ---------- */
.slot{background:var(--nacht);color:var(--krijt);text-align:center;}
/* Een h2 heeft een maximale breedte, dus in een gecentreerde sectie moet hij
   zelf ook in het midden staan, anders hangt hij links van zijn eigen intro. */
.slot h2{color:var(--krijt);margin-left:auto;margin-right:auto;}
.slot .intro{color:rgba(253,246,242,.75);margin-left:auto;margin-right:auto;}
.slotvorm{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:30px auto 0;}
@media (min-width:720px){ .slotvorm{flex-direction:row;align-items:flex-start;} }
.slotvorm .veld{flex:1;text-align:left;}
.slotvorm label{display:block;font-size:12.5px;font-weight:600;color:rgba(253,246,242,.66);margin-bottom:6px;}
.slotvorm input{width:100%;background:rgba(253,246,242,.09);border:1px solid rgba(253,246,242,.32);
  border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px;font-weight:500;
  color:var(--krijt);outline:none;margin-bottom:0;}
.slotvorm input:focus{border-color:var(--rose);}
.slotvorm input.veldfout{border-color:var(--rose);}
.slotvorm .knop{margin-top:0;}
@media (min-width:720px){ .slotvorm .knop{margin-top:24px;} }
.slot .vormmelding{color:var(--rose);}
.slot .vormmicro{color:rgba(253,246,242,.6);}
.slot .vormklaar{max-width:52ch;margin:26px auto 0;}
.slot .vormklaar h3{color:var(--krijt);}
.slot .vormklaar p{color:rgba(253,246,242,.78);}

/* Een veld dat mensen nooit zien en dus nooit invullen. Een script wel. */
input.hpveld{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;
  margin:0;padding:0;border:0;opacity:0;pointer-events:none;}

/* Na een gelukte aanvraag verdwijnen de velden en blijft de bevestiging staan.
   De melding gaat naar onzichtbaar, want die bestond al voor de tekst erin
   kwam en wordt daardoor wel voorgelezen; het kader zelf zou stil blijven. */
.bvorm.klaar .vormkop,.bvorm.klaar .vormsub,.bvorm.klaar label,.bvorm.klaar input,
.bvorm.klaar button,.bvorm.klaar .vormmicro,.bvorm.klaar .veld,
#formulier.klaar label,#formulier.klaar input,#formulier.klaar textarea,#formulier.klaar button{display:none;}
.srmelding{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- contact ---------- */
.contactgrid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start;margin-top:36px;}
@media (min-width:860px){ .contactgrid{grid-template-columns:.95fr 1.05fr;gap:46px;} }
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px;}
input,textarea{width:100%;background:var(--card);border:1px solid var(--line-strong);border-radius:10px;
  padding:12px 14px;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:18px;}
textarea{font-weight:400;line-height:1.6;resize:vertical;min-height:120px;}
.melding{font-size:13.5px;font-weight:600;color:var(--rose-ink);margin-bottom:14px;min-height:1.2em;}
input.fout,textarea.fout{border-color:var(--rose-fill);}

/* ---------- voet ---------- */
footer{background:var(--nacht);color:rgba(253,246,242,.7);padding:52px 0 34px;
  overflow:hidden;}
/* De naam nog een keer, reusachtig en bijna onzichtbaar, als afsluiting. */
.voetwater{font-family:'Lilita One',sans-serif;font-weight:400;text-align:center;
  font-size:clamp(44px,11vw,140px);line-height:1;color:rgba(253,246,242,.055);
  white-space:nowrap;margin-top:44px;pointer-events:none;user-select:none;}
.voetgrid{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:760px){ .voetgrid{grid-template-columns:1.4fr 1fr 1fr;gap:40px;} }
.voetgrid h4{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(253,246,242,.45);margin-bottom:13px;}
.voetgrid a{display:block;font-size:14px;font-weight:500;color:rgba(253,246,242,.78);
  padding:5px 0;transition:color .2s var(--ease);}
.voetgrid a:hover{color:var(--krijt);}
.voetmerk{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.voetmerk img{width:32px;height:32px;border-radius:9px;}
.voetmerk span{font-family:'Lilita One',sans-serif;font-weight:400;font-size:17px;
  letter-spacing:.01em;color:var(--krijt);}
.voetslot{margin-top:38px;padding-top:22px;border-top:1px solid rgba(253,246,242,.12);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:12.5px;font-weight:400;color:rgba(253,246,242,.5);}
/* Ruimte voor de plakkende knop, zodat de voet niet half verborgen eindigt. */
@media (max-width:879px){ footer{padding-bottom:96px;} }


/* ======================================================================
   Meerdere pagina's: de schil, het kruimelpad, de paginakop, en de blokken
   uit de referentie (statement, kaarten met foto, tweeluik, artikel).
   ====================================================================== */

.overslaan{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);
  color:var(--krijt);padding:10px 14px;border-radius:10px;font-weight:600;}
.overslaan:focus{left:12px;}

/* Pagina's zonder donker hero: de balk staat meteen in zijn lichte stand,
   dus ook voor het script geladen is. */
body.pagina .navmerk span{color:var(--ink);}
body.pagina .navlinks a{color:var(--muted);}
body.pagina .navlinks a:hover{color:var(--ink);}
body.pagina .navtuimel span{background:var(--ink);}
.navlinks a[aria-current]{color:var(--krijt);font-weight:600;}
body.pagina .navlinks a[aria-current],body.voorbijhero .navlinks a[aria-current]{color:var(--ink);}
body.zonderplak .plakcta{display:none !important;}

/* Kruimelpad, tussen de balk en de paginakop. */
.kruimels{padding:100px 0 0;font-size:13.5px;color:var(--muted);}
.kruimels .wrap{display:flex;flex-wrap:wrap;gap:6px 9px;align-items:center;}
.kruimels a{color:var(--rose-ink);font-weight:600;}
.kruimels a:hover{color:var(--ink);}
.kruimels i{font-style:normal;color:var(--line-strong);}
.kruimels [aria-current]{color:var(--body);}

/* Paginakop: geen sectie, dus geen sectiehoogte; de kop en een intro. */
.paginakop{padding:22px 0 6px;}
.paginakop .wrap{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;}
@media (min-width:900px){
  .paginakop.metfoto .wrap{grid-template-columns:1.2fr .8fr;gap:56px;}
  .paginakop.metfoto .beeld{max-width:380px;justify-self:end;}
}
.paginakop h1{font-size:clamp(33px,5.6vw,56px);line-height:1.02;max-width:20ch;}
.paginakop h1 em.sier{display:block;text-transform:none;color:var(--rose-ink);font-size:.92em;line-height:1.1;margin-top:.1em;}
.paginakop .intro{font-size:clamp(17px,2.1vw,19.5px);max-width:56ch;margin-top:18px;}
.knoppenrij{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}

/* Statement, naar het About-blok van de referentie: een zin, groot, in het
   midden, met het accent in de cursieve serif. */
.statement{padding:112px 0 64px;text-align:center;}
.statement p{font-family:'Lilita One',sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--ink);font-size:clamp(30px,5.6vw,64px);line-height:1.04;max-width:21ch;
  margin:0 auto;text-wrap:balance;}
.statement p em.sier{text-transform:none;color:var(--rose-ink);font-size:1.06em;}

/* Twee kaarten met een vierkante foto erboven, naar de Services-kaarten. */
.kaarten2{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px;}
@media (min-width:760px){ .kaarten2{grid-template-columns:1fr 1fr;gap:24px;} }
.kaart{display:block;background:var(--card);border-radius:20px;overflow:hidden;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.kaart:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(70,38,44,.35);}
.kaart .beeld{border-radius:0;position:relative;}
.kaart .beeld img{transition:transform .7s var(--ease);}
.kaart:hover .beeld img{transform:scale(1.04);}
/* Het ronde pijltje rechtsboven op de foto, zoals op de kaarten in de referentie. */
.kaart .beeld::after{content:"";position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:999px;
  background:rgba(253,246,242,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346262C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .3s var(--ease),background-color .3s var(--ease);}
.kaart:hover .beeld::after{transform:translate(2px,-2px);background-color:#fff;}
.kaartin{padding:24px 26px 28px;}
.kaart h3{font-size:22px;letter-spacing:-.015em;}
.kaart p{font-size:15.5px;line-height:1.65;color:var(--body);margin-top:8px;max-width:44ch;}
.kaart .herolinkje{color:var(--rose-ink);margin-top:14px;}
.kaart:hover .herolinkje{color:var(--ink);}
.herolinkje svg.rechts{transform:rotate(-90deg);}

/* Twee tekstblokken naast een foto, met een haarlijn ertussen. */
.tweeluik{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;margin-top:36px;}
@media (min-width:880px){ .tweeluik{grid-template-columns:.9fr 1.1fr;gap:60px;} .tweeluik .beeld{max-width:440px;} }
.tweeluik .blok+.blok{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);}
.tweeluik h3{font-size:19px;margin-bottom:8px;}
@media (prefers-reduced-motion:no-preference){
  .js-onthul .onthul .tweeluik .beeld,.js-onthul .onthul .tweeluik>div:last-child{
    transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:.12s;}
  .js-onthul .onthul:not(.zichtbaar) .tweeluik .beeld{opacity:0;transform:translateX(-24px);}
  .js-onthul .onthul:not(.zichtbaar) .tweeluik>div:last-child{opacity:0;transform:translateX(24px);}
}
.tweeluik p{font-size:16px;line-height:1.7;color:var(--body);max-width:52ch;}

/* Kennis: het overzicht van artikelen. */
.kennisgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px;}
@media (min-width:700px){ .kennisgrid{grid-template-columns:1fr 1fr;gap:24px;} }
@media (min-width:1000px){ .kennisgrid{grid-template-columns:1fr 1fr 1fr;} }
.kennisgrid .kaart h3{font-size:20px;}
.kennisgrid .kaart time{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px;}

/* Artikel: een leesbreedte, rust, en de kaders uit de gids. */
.artikel{max-width:68ch;}
.artikel .lead{font-size:19px;line-height:1.7;color:var(--body);}
.artikel h2{font-size:clamp(24px,3.6vw,32px);margin:52px 0 14px;max-width:none;}
.artikel h3{font-size:19px;margin:32px 0 10px;}
.artikel p{margin-top:14px;}
.artikel ul,.artikel ol{margin:14px 0 0 22px;}
.artikel li{margin-top:8px;}
.artikel a{color:var(--rose-ink);font-weight:600;}
.kader{background:var(--card);border-radius:20px;padding:24px 26px;margin-top:28px;}
.kader.roze{background:var(--soft);}
.kader h3{margin:0 0 8px;font-size:17px;}
.kader p{margin-top:8px;font-size:16px;}
.cijfer{font-family:'Lilita One',sans-serif;font-size:clamp(34px,5vw,48px);color:var(--rose-ink);
  line-height:1;margin-bottom:6px;}
.artikelmeta{font-size:14px;color:var(--muted);margin-top:14px;}
.artikelbeeld{margin:36px 0 0;max-width:520px;}
.verder{margin-top:60px;padding-top:30px;border-top:1px solid var(--line);}
.verder h2{font-size:22px;margin:0 0 16px;}

/* Contactpagina */
.contactinfo{display:grid;gap:14px;margin-top:8px;}
.contactinfo a{color:var(--rose-ink);font-weight:600;}
.contactinfo p{font-size:15.5px;line-height:1.65;color:var(--body);}

/* Vervangers voor wat eerst als style-attribuut stond: de CSP laat die niet toe. */
.breed{width:100%;}
.kleinetekst{font-size:14.5px;font-weight:400;line-height:1.65;color:var(--muted);margin-top:14px;}
.kleinetekst a,.tekstlink{color:var(--rose-ink);font-weight:600;}
.voettekst{font-size:14px;font-weight:400;line-height:1.65;color:rgba(253,246,242,.62);max-width:36ch;margin-top:6px;}
.voetslot a{color:rgba(253,246,242,.7);}
.slot .vormmicro a{color:var(--rose);}
.f1{--f:#A8414F;} .f2{--f:#E5A6AE;} .f3{--f:#D06878;} .f4{--f:#BC9095;}
.cyclusband i{background:var(--f);}
.fase{border-color:var(--f);}
.faqteaser{margin-top:28px;}

/* Na een paginakop hoeft de eerste sectie niet de volle sectiehoogte erboven. */
.paginakop + section{padding-top:44px;}
@media (min-width:820px){ .paginakop + section{padding-top:56px;} }