/* ============================================================
   Junglemaatjes · huisstijl
   Afgeleid van de digitale schoolbrochure (scholen.opkindermaat.be)

   Kleuren met tekst erop zijn gecontroleerd op WCAG AA (4.5:1 voor
   normale tekst). De decoratieve varianten zijn de oorspronkelijke
   merkkleuren; de -tekst varianten zijn een tint donkerder.
   ============================================================ */

:root{
  /* kleur: vlakken */
  --inkt:#16324A;
  --room:#FBF7EE;
  --wit:#FFFFFF;
  --papier:#FDFBF6;
  --munt:#EFF5F2;
  --wel:#EAF4F1;
  --lijn:#E7E3D8;

  /* kleur: merk, decoratief */
  --geel:#F5C242;
  --rood:#D8442F;
  --blauw:#3B7EA1;
  --zee:#3F9A8A;

  /* kleur: tekst, contrastgecontroleerd */
  --steen:#5B6975;        /* 5.6:1 op wit  */
  --zee-tekst:#31786C;    /* 5.2:1 op wit  */
  --rood-tekst:#C73925;   /* 5.2:1 op wit  */
  --blauw-tekst:#367393;  /* 5.2:1 op wit  */

  /* diepte */
  /* De site werkt zonder schaduw: vlakken staan op hun eigen kleur en lijn. */
  --schaduw-1:none;
  --schaduw-2:none;

  /* vorm */
  --r-l:22px;
  --r-m:16px;
  --r-s:10px;

  /* type */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  /* beweging */
  --duur-snel:150ms;
  --duur-normaal:260ms;
  --duur-traag:420ms;
  --duur-reveal:720ms;
  --ease-uit:cubic-bezier(.16,1,.3,1);
  --ease-veer:cubic-bezier(.34,1.56,.64,1);

  /* ruimte */
  --gutter:clamp(20px,5vw,72px);
  --max:1180px;
  /* algemene maat van de randversiering */
  --rand-maat:clamp(104px,13vw,210px);
  --kop:68px;
  --kop-marge:clamp(10px,1.4vw,18px); /* lucht rond de zwevende balk */
  --raak:44px; /* minimale grootte van een aanraakdoel */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kop) + var(--kop-marge) + 20px)}
body{
  background:var(--wit);
  color:var(--inkt);
  font-family:var(--body);
  font-size:clamp(16px,1vw,17.5px);
  line-height:1.6;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
img{max-width:100%}
::selection{background:var(--geel);color:var(--inkt)}
a{color:inherit}
main:focus{outline:none}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding:clamp(58px,8vw,116px) 0}

/* ---------- focus: overal zichtbaar ---------- */
:focus-visible{
  outline:3px solid var(--blauw-tekst);
  outline-offset:3px;
  border-radius:4px;
}
.donker :focus-visible,.slot :focus-visible,.site-voet :focus-visible{outline-color:var(--geel)}

/* ---------- naar de inhoud springen ---------- */
.overslaan{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--inkt);color:#fff;text-decoration:none;
  padding:12px 20px;border-radius:var(--r-s);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:top var(--duur-normaal) var(--ease-uit);
}
.overslaan:focus,.overslaan:focus-visible{top:8px}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.95}
h1{font-size:clamp(40px,7vw,88px)}
h2{font-size:clamp(30px,4.6vw,56px);line-height:1}
h3{font-size:clamp(20px,2.1vw,26px);line-height:1.12;letter-spacing:-.02em;font-weight:600}

.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zee-tekst);
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:rgba(22,50,74,.18);max-width:120px}
.lead{font-size:clamp(18px,1.9vw,23px);line-height:1.45;letter-spacing:-.01em}
.klein{font-size:15px;line-height:1.55;color:var(--steen)}
.kopklein{margin-top:18px;max-width:42ch}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
strong{font-weight:600}
section p + p{margin-top:16px}
.smal{max-width:70ch}
.markeer{
  background-image:linear-gradient(var(--geel),var(--geel));
  background-repeat:no-repeat;background-size:100% .34em;background-position:0 .44em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .05em;margin:0 -.05em;
}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--raak);
  background:var(--geel);color:var(--inkt);
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:13px 26px;text-decoration:none;border-radius:100px;border:1px solid transparent;
  transition:transform var(--duur-normaal) var(--ease-uit),
             background var(--duur-snel) ease;
}
.knop:hover{transform:translateY(-2px);background:#FFD066}
.knop:active{transform:translateY(0) scale(.975);transition-duration:var(--duur-snel)}
.knop.leeg{background:transparent;border-color:rgba(22,50,74,.25)}
.knop.leeg:hover{background:var(--room);border-color:var(--inkt)}
.knop.donker{background:var(--inkt);color:#fff}
.knop.donker:hover{background:#1E4463}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}

/* ============================================================
   KOP: navigatie
   ============================================================ */
.site-kop{
  position:sticky;top:0;z-index:60;
  padding:var(--kop-marge) var(--gutter) 0;
  /* de balk zweeft over de inhoud: de hero begint er weer bovenaan */
  margin-bottom:calc(-1 * (var(--kop) + var(--kop-marge)));
  background:none;border:0;
}
.site-kop .wrap{
  position:relative;
  max-width:var(--max);margin:0 auto;
  padding-left:clamp(14px,1.4vw,20px);padding-right:clamp(8px,1vw,12px);
  height:var(--kop);display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);
}
/* De pil zit op een pseudo-element, niet op .wrap zelf, zodat .wrap geen
   containing block wordt van het uitklapmenu eronder. Vol wit, geen glas en
   geen doorschijnendheid: over de tekening moet de balk rustig blijven. */
.site-kop .wrap::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--wit);
  border:1px solid var(--lijn);
  border-radius:100px;
}
.merk{display:flex;align-items:center;flex:none;text-decoration:none}
.merk img{width:clamp(120px,11vw,146px);height:auto;display:block}

.hoofdnav{margin-left:auto;display:flex;align-items:center;gap:clamp(0px,.5vw,6px)}
.hoofdnav a{
  position:relative;display:inline-flex;align-items:center;
  min-height:var(--raak);padding:0 clamp(8px,.8vw,12px);
  text-decoration:none;font-size:15.5px;font-weight:500;color:var(--inkt);
  border-radius:100px;white-space:nowrap;
  transition:color var(--duur-snel) ease,background var(--duur-snel) ease;
}
.hoofdnav a::after{
  content:"";position:absolute;left:clamp(8px,.8vw,12px);right:clamp(8px,.8vw,12px);bottom:9px;height:2px;
  background:var(--zee-tekst);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--duur-normaal) var(--ease-uit);
}
.hoofdnav a:hover{color:var(--zee-tekst)}
.hoofdnav a:hover::after{transform:scaleX(1)}
.hoofdnav a[aria-current="page"]{color:var(--zee-tekst)}
.hoofdnav a[aria-current="page"]::after{transform:scaleX(1)}

.kop-rechts{display:flex;align-items:center;gap:8px;flex:none;margin-left:4px}
.taal{display:flex;gap:0;align-items:center;margin-left:2px}
.taal a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:var(--raak);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steen);text-decoration:none;border-radius:100px;
  transition:background var(--duur-snel) ease,color var(--duur-snel) ease;
}
.taal a:hover{background:var(--room);color:var(--inkt)}
.taal a[aria-current="true"]{background:var(--inkt);color:#fff}

.menuknop{
  display:none;margin-left:auto;background:var(--inkt);color:#fff;border:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  min-height:var(--raak);padding:0 18px;border-radius:100px;
}
@media(max-width:1199px){
  .hoofdnav{
    position:fixed;top:calc(var(--kop-marge) * 2 + var(--kop));
    left:var(--gutter);right:var(--gutter);bottom:auto;
    background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-l);
    flex-direction:column;align-items:stretch;
    gap:0;padding:6px 22px 22px;margin-left:0;
    max-height:calc(100vh - var(--kop) - var(--kop-marge) * 3 - 12px);overflow-y:auto;
  }
  .hoofdnav[hidden]{display:none}
  .hoofdnav a{padding:16px 0;border-bottom:1px solid var(--lijn);border-radius:0;font-size:18px;min-height:56px}
  .hoofdnav a::after{display:none}
  .menuknop{display:block}
  .kop-rechts .knop{display:none}
  .hoofdnav .nav-knop{margin-top:18px;border-bottom:none;justify-content:center}
  .hoofdnav .taal{
    margin:14px 0 0;padding-top:14px;border-top:1px solid var(--lijn);
    gap:6px;justify-content:flex-start;
  }
  .hoofdnav .taal a{border:1px solid var(--lijn);font-size:12px}
}
@media(min-width:1200px){
  .hoofdnav[hidden]{display:flex}
  .hoofdnav .nav-knop{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--room);padding-top:calc(var(--kop-marge) + var(--kop) + clamp(34px,4.6vw,66px));padding-bottom:clamp(44px,6vw,78px);position:relative;overflow:hidden}
.hero h1{max-width:17ch;font-size:clamp(38px,6vw,78px)}
.hero .lead{max-width:54ch;color:var(--steen)}
.hero-raster{display:grid;grid-template-columns:1fr;gap:28px;align-items:end;margin-top:clamp(22px,3vw,34px)}
@media(min-width:900px){
  .hero-raster{grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,68px)}
}
.hero-figuur{
  width:clamp(250px,36vw,460px);height:auto;display:block;justify-self:end;align-self:end;
  margin-bottom:calc(clamp(44px,6vw,78px) * -1);
}
@media(max-width:899px){.hero-figuur{width:clamp(220px,64vw,360px);margin:0 auto;margin-bottom:calc(clamp(44px,6vw,78px) * -1)}}
@media(min-width:900px){
  .hero.compact .hero-raster{align-items:start}
  .hero.compact .hero-figuur{width:clamp(200px,28vw,370px);align-self:start}
}
.hero.compact{padding-bottom:clamp(38px,5vw,64px)}
.hero.compact h1{font-size:clamp(34px,5.6vw,68px);max-width:19ch}

/* Pad en context op één regel: links waar je bent, rechts waar de pagina over
   gaat, met de haarlijn van de eyebrow ertussen. */
.hero-meta{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:clamp(20px,2.6vw,28px);
}
.hero-meta .pad{display:flex;align-items:center;gap:10px;color:var(--steen)}
.hero-meta .pad a{text-decoration:none;color:var(--steen);transition:color var(--duur-snel) ease}
.hero-meta .pad a:hover{color:var(--inkt);text-decoration:underline}
.hero-meta .pad .scheiding{color:rgba(22,50,74,.3)}
.hero-meta .pad .nu{color:var(--zee-tekst)}
.hero-meta .streep{flex:1 1 40px;min-width:24px;height:1px;background:rgba(22,50,74,.18)}
.hero-meta .context{color:var(--steen);flex:0 1 auto}
@media(max-width:700px){
  .hero-meta{gap:8px 14px}
  .hero-meta .streep{display:none}
  .hero-meta .pad{flex-basis:100%}
}

/* ============================================================
   DEUREN: drie doelgroepen
   ============================================================ */
.deuren{
  list-style:none;display:grid;grid-template-columns:1fr;gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;
  margin-top:clamp(34px,4vw,52px);box-shadow:var(--schaduw-1);
}
@media(min-width:840px){.deuren{grid-template-columns:repeat(3,1fr)}}
.deuren > li{background:var(--wit);display:flex}
.deur{
  flex:1;padding:clamp(26px,3vw,38px);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:background var(--duur-normaal) ease;
}
.deur:hover{background:var(--papier)}
.deur .deurfiguur{height:118px;display:flex;align-items:flex-end;margin-bottom:20px}
.deur .deurfiguur img{
  height:100%;width:auto;
  transition:transform var(--duur-traag) var(--ease-uit);
}
.deur:hover .deurfiguur img{transform:translateY(-6px) scale(1.04)}
.deur .voor{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rood-tekst);display:block;margin-bottom:10px;
}
.deur p{font-size:15.5px;line-height:1.5;color:var(--steen);margin-top:12px}
.deur ul{list-style:none;margin-top:18px}
.deur li{
  padding:9px 0 9px 20px;position:relative;border-top:1px solid var(--lijn);
  font-size:15px;line-height:1.45;
}
.deur li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;border-radius:50%;background:var(--zee)}
.deur .ga{
  margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:16px;color:var(--blauw-tekst);
}
.deur .ga .pijl{transition:transform var(--duur-normaal) var(--ease-uit)}
.deur:hover .ga{color:var(--inkt)}
.deur:hover .ga .pijl{transform:translateX(5px)}

/* ============================================================
   SPLIT en vlakken
   ============================================================ */
.split{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px)}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
}
.sticky-kop{position:sticky;top:calc(var(--kop) + var(--kop-marge) + 28px)}
@media(max-width:899px){.sticky-kop{position:static}}
.asidefiguur{
  width:clamp(150px,18vw,230px);height:auto;margin-top:28px;display:block;
}
@media(max-width:899px){.asidefiguur{margin-left:auto;margin-right:auto}}

.getint{background:var(--room)}
.munt-vlak{background:var(--munt)}
.donker{background:var(--inkt);color:#fff}
.donker h2,.donker h3{color:#fff}
.donker p{color:rgba(255,255,255,.88)}
.donker .klein{color:rgba(255,255,255,.72)}
.donker .eyebrow{color:var(--geel)}
.donker .eyebrow::after{background:rgba(255,255,255,.25)}

.citaat{
  border-left:4px solid var(--rood);border-radius:0 var(--r-m) var(--r-m) 0;
  background:rgba(216,68,47,.05);padding:20px 24px;margin:30px 0;
  font-size:clamp(18px,2vw,24px);line-height:1.4;font-style:italic;letter-spacing:-.015em;
}
.citaat cite{
  display:block;font-style:normal;margin-top:13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steen);
}

/* ---------- karakterband ---------- */
.karakters{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r-l);overflow:hidden;margin-top:clamp(34px,4vw,52px);
}
.karakter{background:var(--c);padding:26px 10px;text-align:center}
.karakter .kopje{position:relative;width:100%;max-width:120px;height:118px;margin:0 auto}
.karakter .kopje img{
  position:absolute;left:50%;top:50%;
  transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,0px)));
  width:var(--s,88px);height:auto;display:block;
}
.karakter .naam{
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;
  display:block;margin-top:12px;color:var(--naam);
}
.karakter .rol{display:block;margin-top:5px;font-size:13.5px;line-height:1.4;color:var(--naam);padding:0 4px}
@media(max-width:560px){.karakters{grid-template-columns:repeat(2,1fr)}}

/* ---------- karakterkaarten ---------- */
.karakterkaarten{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,22px);margin-top:clamp(34px,4vw,52px)}
@media(min-width:760px){.karakterkaarten{grid-template-columns:repeat(2,1fr)}}
.kkaart{
  border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;background:var(--wit);
  display:grid;grid-template-columns:132px 1fr;box-shadow:var(--schaduw-1);
}
.kkaart .vlak{background:var(--c);display:flex;align-items:center;justify-content:center;padding:14px}
.kkaart .vlak img{width:100%;max-width:104px;height:auto}
.kkaart .tekst{padding:clamp(20px,2.4vw,28px)}
.kkaart .tekst h3{margin-bottom:8px}
.kkaart .tekst .thema{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rood-tekst);display:block;margin-bottom:10px;
}
.kkaart .tekst p{font-size:15.5px;line-height:1.5;color:var(--steen)}
@media(max-width:500px){.kkaart{grid-template-columns:96px 1fr}}

/* ---------- cijfers ---------- */
.cijfers{
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);
  border-radius:var(--r-l);overflow:hidden;margin-top:clamp(30px,4vw,48px);
}
@media(min-width:820px){.cijfers{grid-template-columns:repeat(4,1fr)}}
.cijfer{background:var(--wit);padding:clamp(22px,3vw,32px)}
.cijfer .getal{
  font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,50px);
  letter-spacing:-.04em;line-height:1;color:var(--zee-tekst);display:block;
}
.cijfer .label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steen);margin-top:11px;display:block;line-height:1.5;
}
.donker .cijfers{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.donker .cijfer{background:var(--inkt)}
.donker .cijfer .getal{color:var(--geel)}
.donker .cijfer .label{color:rgba(255,255,255,.72)}

/* ---------- waardekaarten ---------- */
.waarde{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;
  margin-top:clamp(32px,4vw,50px);box-shadow:var(--schaduw-1);
}
@media(min-width:700px){.waarde{grid-template-columns:repeat(2,1fr)}}
.waarde.drie{grid-template-columns:1fr}
@media(min-width:860px){.waarde.drie{grid-template-columns:repeat(3,1fr)}}
.waarde-kaart{background:var(--papier);padding:clamp(26px,3vw,38px)}
.waarde-kaart .voor{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rood-tekst);display:block;margin-bottom:12px;
}
.waarde-kaart p{font-size:15.5px;line-height:1.5;color:var(--steen);margin-top:10px}
.waarde-kaart ul{list-style:none;margin-top:18px}
.waarde-kaart li{
  padding:10px 0 10px 21px;position:relative;border-top:1px solid var(--lijn);
  font-size:15.5px;line-height:1.45;
}
.waarde-kaart li:first-child{border-top:none}
.waarde-kaart li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%;background:var(--zee)}

/* ---------- niet / wel ---------- */
.nietwel{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;margin-top:34px;
}
@media(min-width:760px){.nietwel{grid-template-columns:1fr 1fr}}
.nietwel > div{background:var(--papier);padding:clamp(24px,3vw,34px)}
.nietwel h3{font-size:17px;margin-bottom:14px}
.nietwel ul{list-style:none}
.nietwel li{padding:9px 0 9px 26px;position:relative;font-size:15.5px;line-height:1.45;border-top:1px solid var(--lijn)}
.nietwel li:first-child{border-top:none}
.niet li::before{content:"\00d7";position:absolute;left:0;top:8px;color:var(--rood-tekst);font-size:19px}
.wel{background:var(--wel) !important}
.wel li::before{content:"\2713";position:absolute;left:0;top:9px;color:var(--zee-tekst);font-size:15px;font-weight:700}

/* ---------- stappen ---------- */
.stappen{list-style:none;counter-reset:s;margin-top:34px;border-top:1px solid var(--lijn)}
.stap{
  counter-increment:s;border-bottom:1px solid var(--lijn);
  padding:24px 0;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
}
.stap::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--rood-tekst);padding-top:6px;
}
.stap h3{font-size:18px}
.stap p{margin-top:7px;font-size:15.5px;line-height:1.5;color:var(--steen);max-width:62ch}
@media(max-width:560px){.stap{grid-template-columns:1fr;gap:6px}}

/* ---------- leerlijn ---------- */
.leerlijn{list-style:none;position:relative;display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,34px);margin-top:clamp(36px,5vw,54px)}
@media(min-width:860px){
  .leerlijn{grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,30px)}
  .leerlijn::before{content:"";position:absolute;left:13%;right:13%;top:118px;border-top:2px dotted var(--lijn);z-index:0}
}
.fase{position:relative;z-index:1;text-align:center}
.podium{position:relative;height:186px;margin:0 auto 22px;display:flex;align-items:flex-end;justify-content:center}
.podium::before{content:"";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:118px;height:118px;border-radius:50%;background:var(--c)}
.podium img{position:relative;z-index:1;height:var(--h,150px);width:auto;display:block;transform:translateX(var(--x,0px))}
.fase h3{font-size:18px;margin-bottom:8px}
.fase p{font-size:15.5px;line-height:1.5;color:var(--steen);max-width:30ch;margin:0 auto}
.fase .fasenr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rood-tekst);display:block;margin-bottom:8px}
@media(max-width:560px){.podium{height:160px}.podium img{height:calc(var(--h,150px) * .85)}}

/* ---------- thema's ---------- */
.themas{
  list-style:none;display:grid;grid-template-columns:1fr;gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;
  margin-top:clamp(32px,4vw,50px);box-shadow:var(--schaduw-1);
}
@media(min-width:680px){.themas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.themas{grid-template-columns:repeat(3,1fr)}}
.thema{background:var(--wit);padding:clamp(24px,2.8vw,32px)}
.thema .nr{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blauw-tekst);display:block;margin-bottom:12px;
}
.thema h3{font-size:19px;font-weight:800;margin-bottom:9px}
.thema p{font-size:15px;line-height:1.5;color:var(--steen)}

/* ---------- reviews ---------- */
.reviews{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;
  margin-top:clamp(32px,4vw,50px);box-shadow:var(--schaduw-1);
}
@media(min-width:860px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--papier);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column}
.review .aanhaling{font-family:var(--display);font-weight:800;font-size:40px;line-height:.7;color:var(--geel);display:block;margin-bottom:14px}
.review p{font-size:15.5px;line-height:1.55}
.review .wie{
  margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--zee-tekst);
}
.review .avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--wit);background:var(--lijn)}
.review .wie small{display:block;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:14px;color:var(--steen);margin-top:4px}

/* ---------- pakketkaarten ---------- */
.kaarten{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--schaduw-1);margin-top:clamp(32px,4vw,50px);
}
@media(min-width:800px){.kaarten{grid-template-columns:1fr 1fr}}
.kaart{background:var(--wit);padding:clamp(26px,3.2vw,38px);display:flex;flex-direction:column}
.kaart.uitgelicht{background:var(--inkt);color:#fff}
.kaart.uitgelicht h3{color:#fff}
.kaart.uitgelicht li{border-color:rgba(255,255,255,.24)}
.kaart.uitgelicht .kaart-note{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.24)}
.badge{
  align-self:flex-start;border-radius:100px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;background:var(--geel);color:var(--inkt);
  padding:5px 11px;margin-bottom:16px;
}
.badge.zee{background:var(--zee-tekst);color:#fff}
.kaart ul{list-style:none;margin-top:18px}
.kaart li{padding:10px 0;border-top:1px solid var(--lijn);font-size:15.5px;line-height:1.45}
.kaart li:first-child{border-top:none}
.kaart li .kop{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--zee-tekst);margin-bottom:6px}
.kaart.uitgelicht li .kop{color:var(--geel)}
.kaart-note{margin-top:auto;padding-top:18px;border-top:1px solid var(--lijn);font-size:14px;line-height:1.5;color:var(--steen)}

/* ---------- fotoband ---------- */
.fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(26px,3vw,36px)}
@media(min-width:760px){.fotos{grid-template-columns:repeat(4,1fr)}}
.fotos img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-m);display:block;box-shadow:var(--schaduw-1);background:var(--papier)}
.fotos img:nth-child(4n+1){transform:rotate(-1deg)}
.fotos img:nth-child(4n+2){transform:rotate(.9deg) translateY(10px)}
.fotos img:nth-child(4n+3){transform:rotate(-.6deg) translateY(4px)}
.fotos img:nth-child(4n+4){transform:rotate(1.2deg)}
@media(max-width:560px){
  .fotos img:nth-child(4n+2),.fotos img:nth-child(4n+3){transform:none}
  .fotos img:nth-child(4n+1){transform:rotate(-.6deg)}
  .fotos img:nth-child(4n+4){transform:rotate(.6deg)}
}

/* ---------- vraag en antwoord ---------- */
.vraag{border-top:1px solid var(--lijn);margin-top:clamp(30px,4vw,44px)}
.vraag details{border-bottom:1px solid var(--lijn)}
.vraag summary{
  list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;line-height:1.3;
  min-height:var(--raak);
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:"";position:absolute;right:8px;top:27px;width:11px;height:11px;
  border-right:2px solid var(--blauw-tekst);border-bottom:2px solid var(--blauw-tekst);
  transform:rotate(45deg);transition:transform var(--duur-normaal) var(--ease-uit);
}
.vraag details[open] summary::after{transform:rotate(225deg);top:31px}
.vraag summary:hover{color:var(--blauw-tekst)}
.vraag .antwoord{padding:0 0 22px;font-size:15.5px;line-height:1.6;color:var(--steen);max-width:70ch}
.vraag .antwoord a{color:var(--blauw-tekst)}

/* ---------- downloadlijst ---------- */
.downloads{list-style:none;margin-top:clamp(30px,4vw,44px);border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;background:var(--wit)}
.downloads > li{border-bottom:1px solid var(--lijn)}
.downloads > li:last-child{border-bottom:none}
.downloadrij{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:16px 22px;min-height:var(--raak);
  text-decoration:none;color:inherit;transition:background var(--duur-snel) ease;
}
.downloadrij:hover{background:var(--papier)}
.downloadrij .naam{font-size:16px;font-weight:500}
.downloadrij .naam small{display:block;color:var(--steen);font-size:14px;line-height:1.45;margin-top:3px;font-weight:400}
.downloadrij .pijl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blauw-tekst);white-space:nowrap}

/* ---------- slot ---------- */
.slot{background:var(--zee-tekst);color:#fff;overflow:hidden}
.slot h2{color:#fff;max-width:18ch}
.slot p{color:rgba(255,255,255,.94);max-width:52ch;margin-top:18px;font-size:18px}
.slot .eyebrow{color:#FFF3D2}
.slot .eyebrow::after{background:rgba(255,255,255,.3)}
.slot .knop:hover{background:#fff}
.slot .knop.leeg{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.slot .knop.leeg:hover{background:rgba(255,255,255,.14);border-color:#fff}
.slot .contact{margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.94)}
.slot .contact a{color:#fff;border-bottom:1px solid rgba(255,255,255,.55);text-decoration:none}
.slot .contact a:hover{border-bottom-color:#fff}
.slotraster{display:grid;grid-template-columns:1fr;gap:24px;align-items:end}
@media(min-width:820px){.slotraster{grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,60px)}}
.slotfiguur{
  width:clamp(160px,20vw,280px);height:auto;display:block;justify-self:end;align-self:end;
  margin-bottom:calc(clamp(58px,8vw,116px) * -1);
}
@media(max-width:819px){.slotfiguur{width:clamp(140px,40vw,210px);justify-self:center}}

/* ---------- formulier ---------- */
.formulier{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-l);padding:clamp(24px,3vw,34px);box-shadow:var(--schaduw-1)}
.veld{margin-bottom:16px}
.veld.breed{grid-column:1/-1}
.veld label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zee-tekst);margin-bottom:7px}
.veld .verplicht{color:var(--rood-tekst)}
.veld input,.veld select,.veld textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--inkt);
  background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);
  padding:12px 14px;min-height:var(--raak);
  transition:border-color var(--duur-snel) ease;
}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:#CFD6C9}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--blauw-tekst);box-shadow:0 0 0 3px rgba(54,115,147,.18);
}
.veld textarea{min-height:130px;resize:vertical}
.velden2{display:grid;grid-template-columns:1fr;gap:0 16px}
@media(min-width:620px){.velden2{grid-template-columns:1fr 1fr}}
.formnote{font-size:13.5px;line-height:1.5;color:var(--steen);margin-top:14px}

/* ---------- contactgegevens ---------- */
.gegevens{list-style:none;margin-top:clamp(24px,3vw,32px);border-top:1px solid var(--lijn)}
.gegevens li{padding:15px 0;border-bottom:1px solid var(--lijn)}
.gegevens .label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--steen);display:block;margin-bottom:5px}
.gegevens a{color:var(--blauw-tekst);text-decoration:none;border-bottom:1px solid rgba(54,115,147,.35)}
.gegevens a:hover{border-bottom-color:var(--blauw-tekst)}

/* ============================================================
   VOET
   ============================================================ */
/* De voet loopt door in het groen van het slotblok erboven. Op dat groen
   haalt halfdoorzichtig wit de contrastnorm niet meer, dus de hierarchie
   komt hier uit echte kleuren in plaats van uit dekking. */
.site-voet{background:var(--zee-tekst);color:var(--room);padding:clamp(44px,6vw,72px) 0 30px}
.voet-raster{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
@media(min-width:760px){.voet-raster{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.voet-merk img{width:174px;height:auto;display:block;margin-bottom:20px}
.voet-merk p{font-size:15px;line-height:1.55;color:#EAF4F1;max-width:34ch}
.voet-kolom h2{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#FFF3D2;margin-bottom:14px;font-weight:500;line-height:1.4;
}
.voet-kolom ul{list-style:none}
.voet-kolom li{margin-bottom:4px}
.voet-kolom a{
  display:inline-block;padding:6px 0;color:var(--room);
  text-decoration:none;font-size:15px;transition:color var(--duur-snel) ease;
}
.voet-kolom a:hover{color:#fff;text-decoration:underline}
.voet-onder{
  margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#EAF4F1;
}
.voet-onder a{color:#EAF4F1;text-decoration:none}
.voet-onder a:hover{color:#fff;text-decoration:underline}

/* ============================================================
   AANRAAKDOELEN
   Op een aanraakscherm moet elk doel minstens 44 bij 44 pixels zijn.
   Op een muisaanwijzer laten we de compactere maten staan.
   ============================================================ */
@media(pointer:coarse){
  .voet-kolom a{min-height:var(--raak);display:inline-flex;align-items:center}
  .voet-kolom li{margin-bottom:0}
  .voet-onder a,.gegevens a,.slot .contact a,.hero-meta .pad a{display:inline-flex;align-items:center;min-height:var(--raak)}
  .vraag summary{padding-top:22px;padding-bottom:22px}
  .vraag summary::after{top:30px}
  .vraag details[open] summary::after{top:34px}
  .taal a{min-width:48px;min-height:48px}
}


/* ============================================================
   SPELFICHES
   ============================================================ */
.fichefilter{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(26px,3vw,34px);
}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  min-height:var(--raak);padding:0 18px;border-radius:100px;cursor:pointer;
  background:var(--wit);color:var(--steen);border:1px solid var(--lijn);
  transition:background var(--duur-snel) ease,color var(--duur-snel) ease,border-color var(--duur-snel) ease;
}
.chip:hover{border-color:var(--inkt);color:var(--inkt)}
.chip[aria-pressed="true"]{background:var(--inkt);color:#fff;border-color:var(--inkt)}

.fiches{
  list-style:none;display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);
  border-radius:var(--r-l);overflow:hidden;margin-top:clamp(24px,3vw,32px);
}
@media(min-width:620px){.fiches{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.fiches{grid-template-columns:repeat(3,1fr)}}
.fiches > li{background:var(--wit);display:flex}
.fichekaart{
  flex:1;display:flex;flex-direction:column;padding:clamp(22px,2.6vw,30px);
  text-decoration:none;color:inherit;transition:background var(--duur-normaal) ease;
}
.fichekaart:hover{background:var(--papier)}
.fichebeeld{
  position:relative;width:100px;height:100px;border-radius:50%;background:var(--c);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.fichebeeld img{
  /* de koppen hebben verschillende verhoudingen: begrens beide kanten */
  max-width:82px;max-height:78px;width:auto;height:auto;
  object-fit:contain;display:block;
  transition:transform var(--duur-traag) var(--ease-uit);
}
.fichekaart:hover .fichebeeld img{transform:scale(1.07)}
.pdfmerk{
  position:absolute;right:-6px;bottom:-2px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  background:var(--geel);color:var(--inkt);padding:4px 8px;border-radius:100px;
}
.fichemeta{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blauw-tekst);display:block;margin-bottom:9px;
}
.fichekaart h3{font-size:19px;font-weight:800;margin-bottom:8px}
.fichekaart p{font-size:15px;line-height:1.5;color:var(--steen)}
.fichesleeg{margin-top:26px;color:var(--steen);font-size:15.5px}

/* karakterkop in de hero van een fiche */
.fichekop{
  width:clamp(140px,20vw,210px);aspect-ratio:1/1;border-radius:50%;background:var(--c);
  display:flex;align-items:center;justify-content:center;justify-self:end;align-self:center;
}
.fichekop img{max-width:74%;max-height:70%;width:auto;height:auto;object-fit:contain;display:block}
@media(max-width:899px){.fichekop{justify-self:start}}

/* het lijf van een fiche leest als een recept */
.fichelijf{max-width:68ch}
.fichelijf p{font-size:clamp(16.5px,1.15vw,18px);line-height:1.65}
.fichelijf p + p{margin-top:16px}
.fichelijf h3{margin:clamp(30px,3.4vw,42px) 0 12px}
.fichelijf ul{list-style:none;margin:20px 0;border-top:1px solid var(--lijn)}
.fichelijf li{
  padding:12px 0 12px 24px;position:relative;border-bottom:1px solid var(--lijn);
  font-size:16.5px;line-height:1.5;
}
.fichelijf li::before{
  content:"";position:absolute;left:0;top:21px;
  width:8px;height:8px;border-radius:50%;background:var(--zee);
}
.visueel-kop{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ============================================================
   FORMULIEREN
   ============================================================ */
.formulier-houder{position:relative}
.formkop{margin-bottom:10px}
.formtekst{font-size:15.5px;line-height:1.55;color:var(--steen);margin-bottom:22px}

/* het honingpotje vangt bots op en blijft onzichtbaar voor mensen */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.veldfout{
  font-size:13.5px;line-height:1.45;color:var(--rood-tekst);margin-top:6px;
  display:flex;align-items:flex-start;gap:6px;
}
.veldfout[hidden]{display:none}
.veldfout::before{content:"\00d7";font-weight:700;line-height:1.3}
.veld[data-fout] input,.veld[data-fout] select,.veld[data-fout] textarea{
  border-color:var(--rood-tekst);background:rgba(216,68,47,.04);
}
.veld[data-fout] label{color:var(--rood-tekst)}
.formfout{
  margin-top:16px;padding:14px 18px;border-radius:var(--r-s);
  background:rgba(216,68,47,.07);border:1px solid rgba(199,57,37,.3);
  color:var(--rood-tekst);font-size:15px;line-height:1.5;
}
.formulier button[disabled]{opacity:.6;cursor:progress}

.formulier-gelukt{
  background:var(--wel);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:clamp(26px,3vw,36px);
}
.formulier-gelukt .vinkje{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--zee-tekst);color:#fff;font-size:20px;margin-bottom:18px;
}
.formulier-gelukt h3{margin-bottom:10px}
.formulier-gelukt p{font-size:15.5px;line-height:1.55;color:var(--steen)}
.formulier-gelukt .knop{margin-top:22px}

/* ---------- reveal met trapsgewijze vertraging ---------- */
/* ============================================================
   REVEAL met trapsgewijze vertraging
   ============================================================ */
.js .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--duur-reveal) var(--ease-uit),
             transform var(--duur-reveal) var(--ease-uit);
}
.js .reveal.in{opacity:1;transform:none}
.js .trap > :nth-child(2) .reveal,.js .trap > .reveal:nth-child(2){transition-delay:70ms}
.js .trap > :nth-child(3) .reveal,.js .trap > .reveal:nth-child(3){transition-delay:140ms}
.js .trap > :nth-child(4) .reveal,.js .trap > .reveal:nth-child(4){transition-delay:210ms}
.js .trap > :nth-child(5) .reveal,.js .trap > .reveal:nth-child(5){transition-delay:280ms}
.js .trap > :nth-child(6) .reveal,.js .trap > .reveal:nth-child(6){transition-delay:350ms}
.js .trap > :nth-child(n+7) .reveal,.js .trap > .reveal:nth-child(n+7){transition-delay:420ms}

/* ============================================================
   BEWEGING UIT
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .knop:hover,.deur:hover .deurfiguur img{transform:none}
}

/* ============================================================
   DE JUNGLE-OPENING (alleen op de homepage)
   ============================================================ */
.intro{position:relative;height:255svh}

.kijker{
  position:sticky;top:0;height:100svh;overflow:hidden;
  /* dezelfde lucht als bovenaan de plaat, zodat de band op een smal
     scherm naadloos in de achtergrond overloopt */
  background:linear-gradient(#86D8FB 0%,#93DDFD 100%);
}

/* Het doek vult het scherm altijd volledig: breder dan nodig, en gecentreerd,
   zodat er nooit een lege rand overblijft. --waterlijn is de hoogte waarop het
   logo achter het meer verdwijnt; het script leest die waarde uit. */
.doek{
  z-index:1;
  position:absolute;top:50%;left:50%;
  width:max(100%, calc(100svh * 1.5));
  aspect-ratio:1536 / 1024;
  transform:translate(-50%,-50%);
  --waterlijn:0.80;
}


/* Het doek staat in twee helften met het logo ertussen, zodat het logo achter
   de bomenrij kan wegzakken. Een transform maakt een eigen stapelcontext, dus
   een z-index op het logo alleen raakt nooit tussen de lagen van een doek. */
.doek.voor{z-index:3}

/* de achtergrondplaat, uitgelijnd op de horizon van de tekening */
.plaat-houder{position:absolute;inset:0;will-change:transform;transform-origin:50% 60%}
/* De plaat is verlengd zodat zijn horizon op 56,8% valt, gelijk met de
   tekening, en hij tot onder het doek doorloopt. */
.plaat{
  position:absolute;left:0;top:-4.3%;
  width:100%;height:auto;display:block;
}

.lg{
  position:absolute;left:var(--x);top:var(--y);width:var(--b);
  height:auto;display:block;will-change:transform;
  transform-origin:var(--o,50% 100%);
}
@media(max-width:899px){
  /* Een liggende tekening van 3:2 in een staand scherm wordt ofwel enorm,
     ofwel een smalle band met een zee lege lucht erboven. Daarom is er een
     tweede, staande opbouw van dezelfde losse lagen op een doek van 1024 bij
     1536. Dezelfde elementen, dezelfde z-volgorde, alleen een andere plek:
     die staat per laag klaar in --xs, --ys en --bs. */
  .doek{
    width:max(100%, calc(100svh * 0.6667));
    aspect-ratio:1024 / 1536;
    --waterlijn:0.47;
  }
  .lg{left:var(--xs);top:var(--ys);width:var(--bs)}
  /* de staande plaat is precies het doek, niet verlengd zoals de liggende */
  .plaat{top:0}
}


/* wolken drijven ook zonder te scrollen */
.wolk-houder{position:absolute;inset:0;will-change:transform}
.wolk{animation:drijf var(--t,64s) ease-in-out infinite alternate}
@keyframes drijf{from{transform:translate3d(-5%,0,0)}to{transform:translate3d(5%,0,0)}}

/* de maatjes ademen rustig */
.maatjes-houder{position:absolute;inset:0;will-change:transform}
.maatjes{animation:adem 6.5s ease-in-out infinite}
@keyframes adem{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-.7%,0) scale(1.012)}
}

/* Het logo hangt in een eigen doek, tussen de twee helften van de tekening.
   Daardoor staat het in de maten van de tekening en niet in die van het
   scherm: op elk formaat houdt het dezelfde verhouding tot de waterval, de
   bomenrij en de maatjes. Met schermmaten klopte dat maar op één formaat en
   viel de J op een breed scherm achter de waterval. */
.doek.logo-laag{z-index:2}
.merk-groot{
  position:absolute;left:50%;top:30%;
  width:61.1%;height:auto;
  transform:translateX(-50%);
  will-change:transform;
}
@media(max-width:899px){
  /* op het staande doek hangt het logo hoog in de lucht, boven de vulkaan */
  .merk-groot{top:9%;width:62%}
}

.hint{
  position:absolute;left:50%;bottom:clamp(16px,3vh,30px);z-index:40;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt);display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:.75;will-change:opacity;
}
.hint .streepje{
  width:1px;height:24px;background:var(--inkt);transform-origin:top;
  animation:zak 1.9s var(--ease-uit) infinite;
}
@keyframes zak{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* De balk komt pas als de jungle bijna uit beeld is. Alleen op pagina's met
   een opening: elders blijft hij gewoon meescrollen zoals altijd. */
.heeft-jungle .site-kop{
  position:fixed;top:0;left:0;right:0;z-index:60;margin-bottom:0;
  opacity:0;transform:translateY(-16px);pointer-events:none;
  transition:opacity .45s var(--ease-uit),transform .45s var(--ease-uit);
}
.heeft-jungle .site-kop.zichtbaar{opacity:1;transform:none;pointer-events:auto}
/* zonder script blijft de balk gewoon staan, anders is de site onbruikbaar */
html:not(.js) .heeft-jungle .site-kop{position:sticky;opacity:1;transform:none;pointer-events:auto}

/* De sectie onder de intro schuift over de vastgeplakte jungle heen.
   De negatieve marge is precies een schermhoogte: de hero bereikt de
   bovenrand op hetzelfde moment dat de kijker loslaat. */
.na-hero{
  position:relative;z-index:50;margin-top:-100svh;min-height:100svh;
  background:var(--wit);
  /* Grote ronding bovenaan, zodat de sectie als een blad over de jungle
     schuift. overflow:hidden is nodig: de hero eronder heeft zelf een
     achtergrond en zou anders met vierkante hoeken over de ronding heen
     schilderen. */
  border-radius:clamp(28px,4.5vw,72px) clamp(28px,4.5vw,72px) 0 0;
  overflow:hidden;
}

/* ============================================================
   RANDVERSIERING
   ------------------------------------------------------------
   Jungle die links en rechts komt binnenzweven, over de secties
   heen. Ze hangen een kwart buiten beeld, dus ongeveer 75 procent
   staat in beeld. Ze staan boven de inhoud maar vangen geen muis
   of touch, en zijn puur decoratief.

   Twee knoppen: --rand-maat is de algemene grootte, --s per plant
   is haar maat ten opzichte daarvan.
   ============================================================ */
/* overflow-x:clip knipt alleen horizontaal, dus een plant mag nog altijd
   over de sectiegrens naar boven of onder zweven. Met overflow:hidden zou
   dat wegvallen, en zou een sticky kind hier ook niet meer plakken. */
.heeft-rand{position:relative;overflow-x:clip}
.heeft-rand > .wrap{position:relative;z-index:1}

.rand{
  position:absolute;top:var(--y);
  width:calc(var(--s) * var(--rand-maat));height:auto;
  /* De sectie is wel position:relative maar zonder z-index, dus zonder eigen
     stapelcontext. Daardoor zweeft een plant ook over de sectie eronder. */
  z-index:5;pointer-events:none;user-select:none;
}
/* --zweef zet het script bij het scrollen; zonder script blijft hij 0 */
/* --u is hoeveel van zichzelf een plant buiten beeld hangt. Standaard een
   kwart, dus driekwart staat in beeld. De grote bomen hangen verder naar
   buiten: op dubbele maat zouden ze anders een kwart van de tekstkolom
   afdekken, en daar staat tekst. */
.rand-links{left:0;transform:translate(calc(-1 * var(--u,25%)),var(--zweef,0px)) rotate(var(--d)) scaleX(var(--sp,1))}
.rand-rechts{right:0;transform:translate(var(--u,25%),var(--zweef,0px)) rotate(var(--d)) scaleX(var(--sp,1))}
/* dezelfde plant gespiegeld leest als een andere plant */
.rand-spiegel{--sp:-1}

@media(max-width:899px){
  /* Op een telefoon is de marge naast de tekst nog maar 20 pixels breed, dus
     daar past geen plant naast. Drie dingen tegelijk: ze worden kleiner, de
     grote bomen worden afgetopt op factor 1,4, en ze hangen ruim de helft
     buiten beeld. Ze blijven wel boven de inhoud zweven, net als op een
     breed scherm: daaronder verdwijnt het effect. */
  .rand{
    --rand-maat:clamp(70px,22vw,140px);
    /* het maatverschil tussen de kleinste en de grootste wordt hier
       samengeknepen: een kikker van factor 0,42 zou anders een sliver
       van zestien pixels worden, een boom van 2,5 een derde van het scherm */
    width:calc(clamp(0.75, var(--s), 1.4) * var(--rand-maat));
  }
  .rand-links{transform:translate(-56%,var(--zweef,0px)) rotate(var(--d)) scaleX(var(--sp,1))}
  .rand-rechts{transform:translate(56%,var(--zweef,0px)) rotate(var(--d)) scaleX(var(--sp,1))}
}

@media(prefers-reduced-motion:reduce){
  .rand{--zweef:0px !important}
}