/* Kids Day, richting FOTO: fotogedragen, donker, rood als enige accent.
   Eigen stylesheet, los van stijl.css. Een lettertype voor alles: Hanken Grotesk
   (variabel, eigen host, past in font-src 'self'). Koppen zwaar en strak, tekst licht. */

@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --veld:#191A1C;
  --vlak:#25272B;
  --vlak-op:#303338;
  --wit:#EDEDEA;
  --zacht:#C8CBC7;
  --stil:#9EA19E;
  --rood:#9E4038;
  --rood-licht:#CE7268;
  --zand:#D6CDBF;
  --lijn:rgba(237,237,234,.14);
  --lijn-rood:rgba(158,64,56,.45);
  --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --marge:clamp(20px,6vw,88px);
  --rond:8px;
  --max:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--veld);color:var(--zacht);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p,figure{margin:0}
[hidden]{display:none!important}
h1,h2,h3{margin:0;color:var(--wit);font-weight:600;letter-spacing:-.018em;line-height:1.06}
h2{font-size:clamp(27px,3.4vw,44px);line-height:1.1}
h3{font-size:clamp(19px,1.8vw,23px);line-height:1.2;letter-spacing:-.012em}
.schil{width:min(100% - 2*var(--marge),var(--max));margin-inline:auto}
.skip{position:absolute;left:-999px;top:12px;z-index:100;background:var(--rood);color:#fff;padding:10px 14px;font-weight:700;text-decoration:none}
.skip:focus{left:12px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--rood-licht);outline-offset:4px}

/* Onthullen (zelfde maat als de site: 18px, 700ms, 70ms per stap) */
.js [data-onthul]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) var(--wacht,0ms),transform .7s var(--ease) var(--wacht,0ms)}
.js [data-onthul].is-binnen{opacity:1;transform:none}
/* Foto's schuiven niet, ze zoomen rustig uit (1.2s, binnen de regel) */
.js .opening-foto,.js .wie-foto{transform:none;transition:opacity 1s var(--ease)}
.js .opening-foto img,.js .wie-foto img{transform:scale(1.03);transition:transform 1.6s var(--ease)}
.js .opening-foto.is-binnen img,.js .wie-foto.is-binnen img{transform:none}

/* Kopstrook */
.kop{position:sticky;top:0;z-index:20;background:rgba(25,26,28,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.kop-binnen{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.kop-merk{display:flex;align-items:center;gap:12px;color:var(--wit);text-decoration:none;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.kop-rechts{display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--stil)}
.kop-rechts b{color:var(--zacht);font-weight:600}
@media (max-width:640px){.kop-rechts span{display:none}}

/* Opening: tekst links, het portret rechts en heel in beeld */
.opening{position:relative;padding:clamp(92px,13vh,146px) 0 clamp(36px,5vh,64px);margin-top:-60px;
  background:radial-gradient(120% 90% at 78% 18%,rgba(196,102,92,.10) 0%,rgba(25,26,28,0) 60%)}
.opening-raster{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.86fr);
  gap:clamp(28px,4.5vw,72px);align-items:center}
.opening-tekst{display:grid;gap:16px;align-content:center}
/* Het beeld wordt niet uitgesneden: hoogte volgt de breedte, dus de foto staat er heel op.
   De lijst eromheen houdt het rustig, de zoom bij het onthullen wordt erdoor afgesneden. */
.opening-foto{position:relative;overflow:hidden;border:1px solid var(--lijn);border-radius:var(--rond);
  background:var(--vlak)}
.opening-foto img{width:100%;height:auto;filter:grayscale(1) contrast(1.03) brightness(.99)}
.kicker{display:flex;align-items:center;gap:14px;color:var(--rood-licht);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:clamp(11px,1vw,13px)}
.kicker::before{content:"";width:28px;height:1px;background:var(--rood-licht);flex:none}
h1{font-size:clamp(46px,7.2vw,96px);line-height:.98;letter-spacing:-.032em;font-weight:500}
.subregel{max-width:600px;color:var(--wit);font-size:clamp(19px,1.8vw,25px);font-weight:400;
  line-height:1.35;letter-spacing:-.005em}
.intro{max-width:560px;font-size:clamp(16px,1.15vw,17px)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;
  border-radius:var(--rond);background:var(--rood);color:#fff;text-decoration:none;font-weight:600;
  letter-spacing:.005em;font-size:16px;transition:transform .35s var(--ease),background .35s var(--ease)}
.knop:hover{transform:translateY(-1px);background:var(--rood-licht)}
.acties-noot{font-size:14px;color:var(--stil);max-width:300px;line-height:1.5}
.aftel{margin:10px 0 0;padding-left:20px;border-left:1px solid var(--lijn-rood)}
.aftel b{display:block;font-weight:500;font-size:clamp(40px,5.4vw,76px);line-height:.95;color:var(--wit);letter-spacing:-.03em}
.aftel span{display:block;margin-top:6px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:var(--zand)}
.aftel em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:var(--stil)}
@media (max-width:900px){
  /* Op de telefoon eerst het portret, daarna de tekst. Ook hier heel in beeld. */
  .opening{padding-top:clamp(76px,11vh,110px)}
  .opening-raster{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  .opening-foto{order:-1;max-width:440px;width:100%}
}

/* Feitenstrook */
.feiten{background:var(--veld);border-bottom:1px solid var(--lijn)}
.feiten-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:clamp(22px,2.8vw,34px) 0}
.feit{display:grid;gap:6px;padding:18px 0 0;border-top:1px solid var(--lijn)}
.feit-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--zand);font-weight:600}
.feit strong{color:var(--wit);font-weight:600;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.01em;line-height:1.25}
.feit-sub{font-size:14px;color:var(--stil)}
.feit--accent{padding:18px;border-radius:var(--rond);background:rgba(196,102,92,.07);border-top-color:var(--lijn-rood)}
@media (max-width:900px){.feiten-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.feiten-raster{grid-template-columns:1fr;gap:12px}.feit{padding-top:14px}}

/* Secties */
.sectie{padding:clamp(40px,4.8vw,72px) 0}
.sectie--vlak{background:var(--vlak)}
.sectie--vlak .kaart,.sectie--vlak .deur{background:var(--vlak-op)}
.sectiekop{max-width:720px;display:grid;gap:14px;margin-bottom:clamp(18px,2.6vw,38px)}
.sectiekop-tekst{font-size:clamp(16px,1.2vw,18px)}
.label{display:flex;align-items:center;gap:12px;color:var(--zand);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.label::before{content:"";width:22px;height:1px;background:var(--lijn-rood);flex:none}
.noot{margin-top:18px;font-size:14px;color:var(--stil)}
.volgt{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:999px;border:1px solid var(--lijn-rood);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;color:var(--rood-licht)}
.tekstlink{color:var(--wit);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid var(--lijn-rood);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.tekstlink:hover{color:var(--rood-licht);border-color:var(--rood-licht)}

/* Waarom: portret links (plakt), tekst rechts */
.raster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4.5vw,80px);align-items:start}
.plak{position:sticky;top:84px}
.raster .sectiekop{margin-bottom:0}
.raster-zij{min-width:0}
.pijlers{display:grid}
.pijler{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:17px 0;border-top:1px solid var(--lijn)}
.pijler:last-of-type{border-bottom:1px solid var(--lijn)}
.pijler i{font-style:normal;font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:0;color:var(--stil)}
.pijler p{margin-top:8px;font-size:16px}
.deur{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(32px,5vw,72px);align-items:center;padding:clamp(24px,3vw,36px);border-radius:12px;border:1px solid var(--lijn);background:var(--vlak)}
.deur h3{font-size:22px}
.deur p{margin-top:10px;font-size:15.5px;max-width:640px}
.deur-zij{display:grid;gap:16px;align-content:center;justify-items:start}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:6px 13px;border-radius:999px;border:1px solid var(--lijn);font-weight:500;letter-spacing:0;font-size:12.5px;color:var(--zacht)}
@media (max-width:900px){
  .raster{grid-template-columns:1fr;gap:26px}
  .plak{position:static}
  .deur{grid-template-columns:1fr}
}

/* Programma: tijdlijn met rode lijn */
.tijdlijn{position:relative;max-width:880px}
.tijd-rij{position:relative;display:grid;grid-template-columns:96px 1fr;gap:24px;padding:15px 0}
.tijd-rij::before{content:"";position:absolute;left:107px;top:0;bottom:0;width:1px;background:var(--lijn)}
.tijd-rij:first-child::before{top:36px}
.tijd-rij:last-child::before{bottom:auto;height:36px}
.tijd-rij::after{content:"";position:absolute;left:103px;top:33px;width:9px;height:9px;border-radius:50%;background:var(--vlak);border:1px solid var(--stil)}
.tijd-rij--samen::after{background:var(--rood);border-color:var(--rood)}
.tijd-rij time{font-weight:500;font-size:clamp(22px,2vw,29px);line-height:1.15;letter-spacing:-.02em;color:var(--wit);padding-top:1px}
.tijd-inhoud{padding-left:24px}
.tijd-inhoud p{margin-top:8px;max-width:560px}
.tijd-inhoud .chips{margin-top:14px}
.tijd-rij--samen .chips li{background:rgba(196,102,92,.13);border-color:var(--lijn-rood);color:var(--wit)}
@media (max-width:640px){
  .tijd-rij{grid-template-columns:1fr;gap:8px;padding-left:22px}
  .tijd-rij::before{left:4px}
  .tijd-rij:first-child::before{top:8px}
  .tijd-rij:last-child::before{height:8px}
  .tijd-rij::after{left:-1px;top:30px}
  .tijd-inhoud{padding-left:0}
}

/* Praktisch: drie kaarten */
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kaart{padding:clamp(22px,2.2vw,30px);border-radius:12px;background:var(--vlak);border:1px solid var(--lijn);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.kaart:hover{transform:translateY(-2px);border-color:var(--lijn-rood)}
.kaart .label{margin-bottom:14px}
.kaart h3{margin-bottom:14px}
.rijen{list-style:none;margin:0;padding:0;display:grid}
.rijen li{padding:10px 0;border-top:1px solid var(--lijn);font-size:15px}
@media (max-width:900px){.kaarten{grid-template-columns:1fr}}

/* Wie: foto over de volle breedte, tekst erover links */
.wie{position:relative;min-height:42vh;display:grid;align-items:center;padding:clamp(40px,4.4vw,62px) 0;overflow:hidden;background:var(--vlak)}
.wie-foto{position:absolute;top:0;right:0;bottom:0;width:46%;z-index:0;overflow:hidden}
.wie-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:grayscale(1) contrast(1.03)}
.wie-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--vlak) 0%,rgba(37,39,43,.82) 20%,rgba(37,39,43,.18) 62%,rgba(37,39,43,0) 100%)}
.wie .schil{position:relative;z-index:1}
.wie-tekst{max-width:620px;display:grid;gap:13px}
.wie-tekst h2{margin-bottom:4px}
.wie-tekst p{font-size:16px}
.wie-link{margin-top:8px}
@media (max-width:900px){
  .wie{padding-top:0}
  .wie-foto{position:relative;width:auto;height:38vh;min-height:240px;margin-bottom:clamp(24px,4vw,40px)}
  .wie-foto img{object-position:50% 14%}
  .wie-foto::after{background:linear-gradient(to top,var(--vlak) 0%,rgba(37,39,43,.55) 45%,rgba(37,39,43,0) 100%)}
}

/* Vragen */
.vragen-lijst{max-width:820px;border-top:1px solid var(--lijn)}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0;font-weight:600;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;color:var(--wit)}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";flex:none;color:var(--stil);font-weight:300;font-size:26px;line-height:1;transition:transform .35s var(--ease)}
.vraag[open] summary::after{transform:rotate(45deg)}
.vraag p{padding:0 0 22px;max-width:680px}

/* Slot */
.slot{border-top:1px solid var(--lijn);background:var(--vlak)}
.slot-raster{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,96px);align-items:center}
.slot-tekst{display:grid;gap:16px}
.slot-tekst h2{margin-bottom:4px}
.prijskaart{display:grid;gap:10px;padding:clamp(28px,3.5vw,44px);border-radius:12px;border:1px solid var(--lijn);background:var(--vlak-op)}
.prijs{font-weight:500;font-size:clamp(58px,6.2vw,100px);line-height:.95;letter-spacing:-.035em;color:var(--wit)}
.prijs span{font-size:.42em;vertical-align:top;margin-right:.1em;color:var(--stil);letter-spacing:0}
.prijs-sub{color:var(--zacht);font-size:15px}
.prijskaart-regel{margin-top:14px;padding-top:14px;border-top:1px solid var(--lijn);color:var(--wit);font-weight:600;letter-spacing:0;font-size:14.5px}
.prijskaart-sub{font-size:14px;color:var(--stil)}
@media (max-width:900px){.slot-raster{grid-template-columns:1fr}}

/* Voet */
.voet{padding:32px 0 96px;border-top:1px solid var(--lijn)}
.voet-raster{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;font-size:13px;color:var(--stil)}
.voet-merk{display:flex;align-items:center;gap:10px;color:var(--zacht)}
.voet-merk a{margin-left:4px;color:var(--wit);text-decoration:none;border-bottom:1px solid var(--lijn)}
.voet-links{display:flex;flex-wrap:wrap;gap:18px}
.voet-links a{color:var(--stil);text-decoration:none}
.voet-links a:hover{color:var(--wit)}

/* Plakstrook onderin */
.plakstrook{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px var(--marge);background:rgba(25,26,28,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--lijn);color:var(--zacht);font-size:14px;transform:translateY(100%);transition:transform .5s var(--ease)}
.plakstrook.is-zichtbaar{transform:none}
.plakstrook b{margin-right:10px;color:var(--wit);font-weight:600}
.plakstrook a{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:var(--rond);background:var(--rood);color:#fff;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.geen-js .plakstrook{display:none}
.geen-js .opening-foto img,.geen-js .wie-foto img{transform:none}
@media (max-width:640px){.plakstrook{padding:8px var(--marge)}.plak-datum{display:none}}
@media (max-width:430px){.plak-tekst{display:none}.plakstrook a{flex:1;justify-content:center}}

/* Rust voor wie dat instelt */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-onthul]{opacity:1;transform:none;transition:none}
  .js .opening-foto img,.js .wie-foto img{transform:none;transition:none}
  .knop,.kaart,.vraag summary::after,.plakstrook{transition:none}
}
@media (max-width:640px){body{font-size:16px}}

/* De plakstrook staat vast onderin en bedekte de laatste regels van de voet
   (110px op mobiel, 50 tot 60px op desktop). Deze ruimte houdt de voet vrij.
   Alleen met javascript, want zonder javascript is de plakstrook verborgen. */
html.js body{padding-bottom:82px}
@media (max-width:780px){html.js body{padding-bottom:126px}}