/* groen.tdgdigital.com — "Dit zou een grasveld worden." Alegreya + Alegreya Sans, papier / veen / bladgroen uit het logo. */
@font-face{font-family:"Display";src:url(/fonts/display.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Display";src:url(/fonts/display-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst-800.woff2) format("woff2");font-weight:800;font-display:swap}
@property --gvb-op{syntax:"<number>";inherits:true;initial-value:0}
:root{
  --grond:#f3efe3;--grond2:#e8e2cf;--inkt:#16261b;--inkt2:#3d4a40;--blad:#86c545;--mos:#2f6a2c;--veen:#16261b;--veen2:#1f3426;
  --water:#3d8fd1;--creme:#f3efe3;--rand:rgba(22,38,27,.16);
  --g:clamp(1.1rem,4.2vw,3.75rem);--kop-h:4.5rem;--max:90rem;
  --accent:var(--mos)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--kop-h)}
/* Brede schermen (Joost 2026-10-10): het 1440-ontwerp schaalt vanaf 1440 px als geheel mee. */
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;font-variant-numeric:lining-nums;background:var(--grond);color:var(--inkt);font:400 1.125rem/1.62 "Tekst",system-ui,sans-serif;overflow-x:clip}
body.met-opening{overflow:hidden}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd{hyphens:auto;overflow-wrap:break-word;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:9 4 4}
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance;font-family:"Display",Georgia,serif;margin:0;line-height:1.02}
p{margin:0 0 1em}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere;white-space:nowrap}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--grond);padding:.5rem 1rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
.label{font:italic 600 1.2rem/1.2 "Display",serif;color:var(--mos);margin:0 0 1.1rem;display:flex;align-items:baseline;gap:.7rem}
.label::before{content:"";flex:0 0 2.2rem;height:.32rem;background:var(--blad);border-radius:.1rem;transform:translateY(-.22em)}
.groot{font-weight:800;font-size:clamp(2.5rem,5.8vw,5.6rem);letter-spacing:-.018em;line-height:.98;margin-bottom:1.6rem}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.7rem 1.5rem;border:0;border-radius:99rem;
  background:var(--blad);color:var(--inkt);font:800 1rem/1.2 "Tekst",sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.knop:hover{background:#9ad35a;transform:translateY(-1px)}
.knop-klein{min-height:2.75rem;padding:.5rem 1.15rem;font-size:.95rem}
.knop-tekst{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.4rem .2rem;background:none;border:0;color:inherit;font:500 1rem "Tekst";cursor:pointer;text-decoration:underline;text-underline-offset:.25em}

/* ---------- kop */
.kop{position:fixed;inset:0 0 auto;z-index:50;height:var(--kop-h);display:flex;align-items:center;gap:1.5rem;padding-inline:var(--g);
  transition:background .35s,box-shadow .35s,transform .35s}
.kop.vast,.body-project .kop{background:rgba(243,239,227,.94);box-shadow:0 1px 0 var(--rand)}
.kop-logo{flex:0 0 auto;display:block;width:clamp(9.5rem,13vw,12.5rem);color:var(--inkt);min-height:2.75rem;display:flex;align-items:center}
.kop-logo svg{width:100%;--blad:var(--mos)}
.kop-nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.kop-nav ul{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.kop-nav ul a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;padding:.2rem .7rem;font-weight:500;text-decoration:none;border-radius:99rem}
.kop-nav ul a:hover,.kop-nav ul a[aria-current]{background:rgba(22,38,27,.08)}
.menu-knop{display:none;margin-left:auto;flex-shrink:0;width:2.9rem;height:2.9rem;border:0;border-radius:50%;background:var(--inkt);cursor:pointer;position:relative}
.menu-knop span:not(.vh){position:absolute;left:.85rem;right:.85rem;height:2px;background:var(--grond);transition:transform .3s}
.menu-knop span:nth-child(1){top:1.15rem}.menu-knop span:nth-child(2){top:1.65rem}
.menu-open .menu-knop span:nth-child(1){transform:translateY(.25rem) rotate(45deg)}.menu-open .menu-knop span:nth-child(2){transform:translateY(-.25rem) rotate(-45deg)}
@media (max-width:1060px){
  .menu-knop{display:block}
  .kop-nav{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:flex-start;justify-content:center;gap:2rem;padding:calc(var(--kop-h) + 1rem) var(--g) 2rem;
    background:var(--veen);color:var(--creme);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .kop-nav ul{flex-direction:column;gap:.2rem}
  .kop-nav ul a{font:700 clamp(1.9rem,7vw,2.8rem)/1.1 "Display";padding:.25rem 0}
  .kop-nav ul a:hover,.kop-nav ul a[aria-current]{background:none;color:var(--blad)}
  .menu-open .kop-nav{opacity:1;visibility:visible}
  .menu-open .kop{background:transparent;box-shadow:none}
  .menu-open .kop-logo{color:var(--creme)}.menu-open .kop-logo svg{--blad:var(--blad)}
  .menu-open .menu-knop{background:var(--blad)}.menu-open .menu-knop span:not(.vh){background:var(--inkt)}
}

/* ---------- opening: het logo groeit uit de grondlijn, daarna komt de hero op uit diezelfde lijn */
.opening{position:fixed;inset:0;z-index:100;background:var(--veen);color:var(--creme);display:grid;place-items:center;
  clip-path:inset(0 0 calc(var(--gvb-op)*100%) 0);transition:--gvb-op 1.15s cubic-bezier(.65,0,.25,1)}
.op-logo{width:min(80vw,48rem);transition:opacity .5s,transform .7s cubic-bezier(.5,0,.3,1)}
.op-logo svg{width:100%}
.op-lijn{position:absolute;left:0;right:0;bottom:calc(var(--gvb-op)*100%);height:.45rem;background:var(--blad);opacity:0}
.op-sla{position:absolute;right:var(--g);bottom:1.4rem;min-height:2.75rem;padding:.4rem 1rem;border:1px solid rgba(243,239,227,.35);border-radius:99rem;
  background:transparent;color:var(--creme);font:500 .95rem "Tekst";cursor:pointer}
.opening.uit{--gvb-op:1}.opening.uit .op-logo{opacity:0;transform:translateY(-2.5rem) scale(.94)}.opening.uit .op-lijn{opacity:1}.opening.uit .op-sla{opacity:0}
.met-opening .op-logo .lg-lijn{transform-box:view-box;transform-origin:162px 220px;animation:gvb-lijn .7s cubic-bezier(.6,0,.2,1) both}
.met-opening .op-logo .lg-boom{transform-box:view-box;transform-origin:var(--ox) 208px;animation:gvb-boom .9s cubic-bezier(.3,1.45,.55,1) both;animation-delay:calc(.45s + var(--i)*.15s)}
.met-opening .op-logo .lg-huizen{animation:gvb-huis .7s ease-out .95s both}
.met-opening .op-logo .lg-tekst{animation:gvb-schrijf .8s cubic-bezier(.5,0,.3,1) 1.45s both}
.met-opening .op-logo .lg-vdb{animation:gvb-huis .6s ease-out 1.95s both}
@keyframes gvb-lijn{from{transform:scaleX(0)}}
@keyframes gvb-boom{from{transform:scale(.02,.02)}}
@keyframes gvb-huis{from{opacity:0;transform:translateY(14px)}}
@keyframes gvb-schrijf{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- hero */
.hero{position:relative;min-height:max(100svh,36rem);display:flex;flex-direction:column;color:var(--inkt);isolation:isolate}
.hero-beeld{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(90deg,#7597c2,#c8d7e8)}
.hero-beeld>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%}
/* meer lucht boven de daken voor de kop: beeld zakt, erboven loopt de eigen luchtkleur door */
@media (min-width:701px) and (orientation:landscape),(min-width:1101px){
  .hero-beeld>img,.hero-beeld>video{top:var(--lucht,16%);height:calc(100% - var(--lucht,16%));object-position:50% 70%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%)}}
.hero-film,.hero-lus,.hero-eind{opacity:0;transition:opacity .9s}
.hero-film.speelt{opacity:1}.hero.klaar .hero-eind{opacity:1}.hero-lus.speelt{opacity:1}
.hero-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(225,236,246,.55),rgba(225,236,246,0) 42%),
  linear-gradient(to top,var(--grond) 0,rgba(243,239,227,0) 14%)}
.hero-tekst{padding:calc(var(--kop-h) + clamp(1.5rem,6vh,4.5rem)) var(--g) 0;flex:1;display:flex;flex-direction:column}
.hero-boven{font:italic 600 1.15rem/1.3 "Display",serif;color:var(--mos);margin:0 0 .6rem}
.hero-boven a{text-decoration:none}
.hero h1{font-weight:850;font-size:clamp(3rem,7.3vw,7.8rem);letter-spacing:-.022em;line-height:.95;max-width:none}
.hero-zinnen{display:grid;margin-top:1.2rem;max-width:34rem}
.hz{grid-area:1/1;margin:0;font:italic 500 clamp(1.25rem,1.9vw,1.85rem)/1.3 "Display",serif;color:var(--inkt);opacity:0;transform:translateY(.6rem);transition:opacity .7s,transform .7s}
.hero[data-fase="0"] [data-hz="0"],.hero[data-fase="1"] [data-hz="1"],.hero[data-fase="2"] [data-hz="2"]{opacity:1;transform:none}
.hero[data-fase="0"] [data-hz="0"]{text-decoration:line-through transparent;text-decoration-thickness:.09em}
.hero.streep [data-hz="0"]{text-decoration-color:var(--mos);transition:text-decoration-color .4s}
.hero-onder{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-bottom:clamp(1.5rem,5vh,3rem);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero-plek{margin:0 0 0 auto;font:italic 600 1.05rem "Display"}
.hero-onder .knop-tekst{text-shadow:inherit}

/* ---------- het idee */
.idee{padding-block:clamp(5rem,13vh,10rem) clamp(4rem,9vh,7rem)}
.idee-lead{font-weight:500;font-size:clamp(1.55rem,2.75vw,2.75rem);line-height:1.22;letter-spacing:-.008em;max-width:32em;text-wrap:pretty}
.idee-slot{font:italic 850 clamp(3rem,8.6vw,8.6rem)/1 "Display",serif;color:var(--mos);margin:clamp(2rem,5vh,3.5rem) 0 clamp(3rem,7vh,5rem);letter-spacing:-.02em}
.idee-slot::after{content:"";display:block;width:min(62%,30rem);height:.42rem;background:var(--blad);margin-top:.9rem;border-radius:.1rem}
.idee-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem clamp(2rem,5vw,5rem);border-top:1px solid var(--rand);padding-top:2rem}
.idee-twee h3{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:700}
.idee-twee p{max-width:62ch;margin:0}

/* ---------- pijlers */
.pijlers{padding-top:clamp(3rem,7vh,5rem)}
.pijler{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5.5rem);align-items:center;padding:clamp(3rem,8vh,6rem) var(--g);max-width:var(--max);margin-inline:auto}
.pijler:nth-of-type(2){grid-template-columns:minmax(0,5fr) minmax(0,7fr);max-width:none;background:var(--blad);padding-inline:max(var(--g),calc((100% - var(--max))/2 + var(--g)))}
.pijler:nth-of-type(2) .pijler-beeld{order:2}
.pijler:nth-of-type(2) .pijler-kort{color:var(--inkt)}
.pijler:nth-of-type(2) .pijler-beeld img{border-bottom-color:var(--inkt)}
.pijler-beeld{margin:0;position:relative}
.pijler-beeld img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-bottom:.4rem solid var(--blad)}
.pijler-beeld figcaption{font-size:.85rem;color:var(--inkt2);margin-top:.9rem}
.pijler:nth-of-type(2) figcaption{color:var(--inkt)}
.pijler-kort{font:italic 600 1.25rem "Display";color:var(--mos);margin:0 0 .5rem}
.pijler h3{font-size:clamp(2rem,3.5vw,3.3rem);font-weight:800;letter-spacing:-.012em;margin-bottom:1.3rem}
.pijler-tekst p{max-width:58ch}
.momenten{list-style:none;padding:0;margin:1.8rem 0 1.2rem;display:grid;gap:.15rem}
.momenten li{font:600 clamp(1.25rem,1.8vw,1.6rem)/1.3 "Display";padding:.45rem 0 .45rem 2.1rem;position:relative;border-bottom:1px solid var(--rand)}
.momenten li::before{content:"";position:absolute;left:0;top:.95rem;width:1.2rem;height:.3rem;background:var(--blad);border-radius:.1rem}
.momenten-slot{font:italic 700 clamp(1.3rem,1.9vw,1.7rem) "Display";color:var(--mos)}
.js .momenten li{opacity:0;transform:translateX(-.8rem);transition:opacity .6s,transform .6s}
.js .pijler.in .momenten li{opacity:1;transform:none}
.js .pijler.in .momenten li:nth-child(2){transition-delay:.25s}.js .pijler.in .momenten li:nth-child(3){transition-delay:.5s}.js .pijler.in .momenten li:nth-child(4){transition-delay:.75s}

/* ---------- regen (signatuur) */
.regen-sectie{position:relative;background:var(--veen);color:var(--creme);padding-block:clamp(5rem,12vh,8.5rem);overflow:hidden;isolation:isolate}
.regen-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.16;transition:opacity 1.2s}
.regen-sectie::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,38,27,.4),rgba(22,38,27,.92) 70%)}
.regen-sectie.regent .regen-film{opacity:.3}
.regen-sectie .label{color:var(--blad)}
.regen-kop .groot{color:var(--creme)}
.regen-inleiding{font:500 clamp(1.2rem,1.75vw,1.6rem)/1.4 "Display";max-width:40em;margin-bottom:clamp(2.5rem,6vh,4rem);color:rgba(243,239,227,.88)}
.regen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.regen-bed{min-width:0}
.regen-plan{position:relative;margin:0;border-radius:.5rem;overflow:hidden;box-shadow:0 1.6rem 3.5rem rgba(0,0,0,.35);background:#c6d46d}
.regen-plan::before{content:"";display:block;padding-top:67.09%}
.regen-plan img,.regen-water,.regen-druppels{position:absolute;inset:0;width:100%;height:100%}
.regen-plan img{object-fit:cover}
.plan-p{transition:opacity .9s}
.regen[data-modus="grasveld"] .plan-p{opacity:0}
.regen-druppels{pointer-events:none}
.regen-water .rw-kreek{fill:none;stroke:#3d8fd1;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100;stroke-dashoffset:100}
.regen-water .rw-plas{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.regen-water .rw-stroom{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2.5;stroke-dasharray:3 9;opacity:0;transition:opacity .6s;animation:gvb-stroom .7s linear infinite}
.regen-water.stroomt .rw-stroom{opacity:1}
@keyframes gvb-stroom{to{stroke-dashoffset:-12}}
.regen-water .rw-kreek-gloed{fill:none;stroke:rgba(120,190,240,.45);stroke-width:24;stroke-linecap:round;opacity:0;transition:opacity .8s}
.regen-water.stroomt .rw-kreek-gloed{opacity:1}
.regen-water .rw-afvoer{fill:none;stroke:rgba(61,143,209,.62);stroke-width:26;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100}
.regen-water .rw-kolken rect{fill:#3a3d3a;stroke:#f3efe3;stroke-width:2;transition:fill .4s}
.regen-water .rw-kolken.vol rect{fill:#3d8fd1}
.regen[data-modus="plantsoen"] .rw-g,.regen[data-modus="grasveld"] .rw-p{display:none}
.regen-water .rw-ring{fill:none;stroke:#fff;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
.regen-water .rw-ring.toon{animation:gvb-ring 1.6s ease-out 2}
@keyframes gvb-ring{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
.regen-maat{position:absolute;left:50%;top:.6rem;transform:translateX(-50%);font:600 .8rem "Tekst";color:var(--inkt);background:rgba(243,239,227,.8);padding:.1rem .5rem;border-radius:.2rem}
.regen-modus{display:grid;grid-template-columns:1fr 1fr;padding:.3rem;border-radius:99rem;background:rgba(243,239,227,.1);margin-bottom:1.4rem}
.regen-modus button{min-height:2.9rem;padding:.4rem .7rem;border:0;border-radius:99rem;background:none;color:var(--creme);font:500 .95rem/1.15 "Tekst";cursor:pointer;transition:background .3s,color .3s}
.regen-modus button[aria-pressed="true"]{background:var(--creme);color:var(--inkt);font-weight:800}
.regen-knop{position:relative;width:100%;display:flex;align-items:center;gap:1rem;min-height:5rem;padding:.8rem 1.4rem;border:0;border-radius:1rem;overflow:hidden;
  background:var(--water);color:#fff;font:400 1.1rem/1.25 "Tekst";text-align:left;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.regen-knop strong{font-weight:800}
.rk-wolk,.rk-tekst{position:relative;z-index:1}
.rk-wolk{flex:0 0 auto}
.rk-vul{position:absolute;inset:0;background:#2a6fa8;transform-origin:left;transform:scaleX(var(--vul,0))}
.regen-knop.actief .rk-wolk{animation:gvb-wolk .5s ease-in-out infinite alternate}
@keyframes gvb-wolk{to{transform:translateY(3px)}}
.regen-meter{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin:1.6rem 0 .6rem}
.rm-mm{font:800 clamp(3rem,5vw,4.6rem)/1 "Display";font-variant-numeric:tabular-nums;color:var(--creme);min-width:1.6ch}
.rm-eh{font:italic 600 1.25rem "Display"}
.rm-l{flex-basis:100%;font-size:1rem;color:rgba(243,239,227,.75)}
.regen-status{font:500 1.15rem/1.45 "Display";min-height:3.3em}
.regen-legenda{list-style:none;margin:1.4rem 0 .4rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.regen-legenda button{min-height:2.75rem;padding:.35rem .85rem;border:1px solid rgba(243,239,227,.3);border-radius:99rem;background:none;color:var(--creme);font:500 .92rem "Tekst";cursor:pointer}
.regen-legenda button[aria-pressed="true"],.regen-legenda button:hover{border-color:var(--blad);color:var(--blad)}
.regen-uitleg{min-height:3em;font-size:1rem;color:rgba(243,239,227,.85);margin:.6rem 0 0}
.regen-klein{font-size:.85rem;color:rgba(243,239,227,.6);margin:1.2rem 0 0;max-width:46ch}

/* ---------- werkwijze */
.werkwijze{padding-block:clamp(5rem,12vh,9rem) clamp(4rem,8vh,6rem)}
.werk-lead{font:500 clamp(1.3rem,2vw,1.85rem)/1.38 "Display";max-width:38em}
.route{position:relative;max-width:var(--max);margin:clamp(3rem,7vh,5rem) auto 0;padding-inline:var(--g)}
.route-pad{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.route-pad .rp-onder{fill:none;stroke:var(--rand);stroke-width:3;stroke-dasharray:2 11;stroke-linecap:round}
.route-pad .rp-boven{fill:none;stroke:var(--mos);stroke-width:3.5;stroke-dasharray:9 9;stroke-linecap:round}
.haltes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3rem,9vh,6rem);position:relative}
.halte{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;width:84%}
.halte:nth-child(even){margin-left:auto;grid-template-columns:minmax(0,4fr) minmax(0,5fr)}
.halte:nth-child(even) figure{order:2}
.halte figure{margin:0}
.halte img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:.4rem}
.halte>div{display:grid;grid-template-columns:2.8rem minmax(0,1fr);column-gap:1.2rem;align-items:start}
.halte>div>*:not(.halte-nr){grid-column:2}
.halte-nr{grid-row:1/span 2;display:inline-grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--blad);color:var(--inkt);font:800 1.25rem "Display";position:relative;z-index:1;box-shadow:0 0 0 .45rem var(--grond)}
.halte h3{font-size:clamp(1.6rem,2.5vw,2.3rem);font-weight:800;margin-bottom:.6rem}
.halte p{max-width:42ch;margin:0}
.schets{margin:clamp(4rem,10vh,7rem) auto 0;max-width:var(--max);padding-inline:var(--g)}
.schets img{width:100%;height:auto;mix-blend-mode:multiply}
.schets figcaption{font:italic 500 1.15rem "Display";color:var(--inkt2);margin-top:.6rem;text-align:center}

/* ---------- projecten */
.projecten{background:var(--grond2);padding-block:clamp(5rem,12vh,8rem)}
.project-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.project{display:block;text-decoration:none;color:inherit}
.project figure{margin:0;overflow:hidden;border-radius:.4rem;position:relative}
.project figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.45rem;background:var(--blad);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.project:hover figure::after,.project:focus-visible figure::after{transform:none}
.project img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.project:hover img{transform:scale(1.04)}
.project-tekst{padding-top:1.3rem}
.project h3{font-size:clamp(2.1rem,3.6vw,3.4rem);font-weight:800}
.project h3 span{font-weight:400;font-style:italic;color:var(--mos)}
.project-feit{font:italic 600 1.1rem "Display";color:var(--mos);margin:.5rem 0 .7rem}
.project-tekst p:not(.project-feit){max-width:46ch}
.project-pijl{display:inline-flex;align-items:center;gap:.7rem;font-weight:800;min-height:2.75rem}
.project:hover .project-pijl svg{transform:translateX(.3rem)}.project-pijl svg{transition:transform .3s}

/* ---------- sdg */
.sdg{padding-block:clamp(5rem,12vh,8rem)}
.sdg-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2rem clamp(2rem,5vw,5rem);align-items:start}
.sdg-slot{font:500 clamp(1.15rem,1.6vw,1.45rem)/1.42 "Display";max-width:34em}
.sdg-tegels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,1.2vw,1.1rem)}
.sdg-tegels img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.sdg-meer{grid-column:1/-1;border-top:1px solid var(--rand);padding-top:1rem}
.sdg-meer summary{cursor:pointer;font:700 1.25rem "Display";min-height:2.75rem;display:flex;align-items:center}
.sdg-meer p{max-width:70ch;margin-top:.8rem}

/* ---------- ambassadeur */
.amb{background:var(--veen);color:var(--creme);padding-block:clamp(5rem,12vh,8.5rem)}
.amb .label{color:var(--blad)}
.amb-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem clamp(2rem,6vw,6.5rem);align-items:start}
.amb-kop p{max-width:44ch}
.amb-vest{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.3rem}
.amb-vest a{color:var(--blad);font-weight:800;display:inline-flex;align-items:center;min-height:2.75rem;margin-left:.4rem}
.amb-rij{margin-top:2.5rem;position:relative}
.amb-svg{width:100%;height:auto;aspect-ratio:600/150}
.amb-svg g,.amb-grond{fill:var(--blad)}
.amb-bestaand{opacity:.55}
.amb-nieuw{transform-box:view-box;transform-origin:380px 134px;transform:scale(0);transition:transform 1s cubic-bezier(.3,1.5,.55,1)}
.amb-rij.groeit .amb-nieuw{transform:scale(1)}
.amb-naam{position:absolute;left:63.3%;transform:translateX(-50%);top:100%;margin:.5rem 0 0;font:italic 600 1.05rem "Display";color:var(--blad);white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .4s .5s}
.amb-rij.groeit .amb-naam{opacity:1}
.amb-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.4rem;background:rgba(243,239,227,.05);border:1px solid rgba(243,239,227,.12);border-radius:1rem;padding:clamp(1.3rem,3vw,2.4rem)}
.chips{grid-column:1/-1;border:0;margin:0 0 .4rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;min-width:0}
.chips legend{font:700 1.35rem "Display";margin-bottom:.8rem;padding:0}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.35rem 1rem;border:1px solid rgba(243,239,227,.35);border-radius:99rem;cursor:pointer;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.chip input:checked+span{background:var(--blad);border-color:var(--blad);color:var(--inkt);font-weight:800}
.chip input:focus-visible+span{outline:3px solid var(--blad);outline-offset:2px}
.veld{display:grid;gap:.3rem;min-width:0}
.veld span{font-size:.95rem;color:rgba(243,239,227,.85)}
.veld input,.veld textarea{width:100%;min-height:2.9rem;padding:.6rem .8rem;border:0;border-bottom:2px solid rgba(243,239,227,.4);border-radius:.3rem .3rem 0 0;background:rgba(243,239,227,.08);color:var(--creme);font:inherit;font-size:1rem}
.veld input:focus,.veld textarea:focus{outline:0;border-bottom-color:var(--blad);background:rgba(243,239,227,.13)}
.veld-breed{grid-column:1/-1}
.amb-form .knop{grid-column:1/-1;justify-self:start}
.amb-klein{grid-column:1/-1;font-size:.85rem;color:rgba(243,239,227,.6);margin:0}

/* ---------- voet */
.voet{position:relative;background:var(--grond);padding:clamp(3.5rem,8vh,5rem) 0 1.5rem}
.voet-grond{position:absolute;left:0;right:0;top:0;height:.45rem;background:var(--blad)}
.voet-in{max-width:var(--max);margin:0 auto;padding-inline:var(--g);display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.8fr)) minmax(0,1.5fr);gap:2.5rem}
.v-logo svg{width:min(100%,16rem);color:var(--inkt);--blad:var(--mos)}
.v-slot{font:italic 700 1.4rem "Display";color:var(--mos);margin-top:1rem}
.voet h3{font:700 1.3rem "Display";margin-bottom:.5rem}
.voet p{font-size:1rem}
.voet a{display:inline-flex;min-height:2.75rem;align-items:center}
.v-sv img{width:min(100%,15rem);margin-bottom:1rem}
.v-tdg{max-width:var(--max);margin:2.5rem auto 0;padding:1.2rem var(--g) 0;border-top:1px solid var(--rand);font-size:.9rem;color:var(--inkt2)}

/* ---------- projectpagina's */
.pk{position:relative;min-height:max(80svh,32rem);display:flex;isolation:isolate}
.pk-beeld{position:absolute;inset:0;z-index:-1;overflow:hidden}
.pk-beeld img,.pk-beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.pk-film{opacity:0;transition:opacity 1s}.pk-film.speelt{opacity:1}
.pk-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(225,236,246,.6),rgba(225,236,246,0) 45%),linear-gradient(to top,var(--grond),rgba(243,239,227,0) 16%)}
.pk-tekst{padding:calc(var(--kop-h) + clamp(1.5rem,6vh,4rem)) var(--g) 0}
.pk h1{font-weight:850;font-size:clamp(3.2rem,9vw,9rem);letter-spacing:-.025em;line-height:.92}
.pk h1 span{display:block;font-weight:500;font-style:italic;font-size:.45em;letter-spacing:-.01em;color:var(--mos);margin-top:.15em}
.pp-intro{padding-block:clamp(4rem,9vh,6.5rem)}
.pp-twee{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.pp-lead{font:500 clamp(1.4rem,2.2vw,2.05rem)/1.3 "Display"}
.pp-twee p{max-width:62ch}
.feiten{margin:0;display:grid;border-top:2px solid var(--inkt)}
.feiten div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--rand)}
.feiten dt{font:italic 600 1.05rem "Display";color:var(--mos)}
.feiten dd{margin:0}
.pp-van{background:var(--grond2);padding-block:clamp(4.5rem,10vh,7rem)}
.pp-van-in{align-items:center}
.pp-pijlers{list-style:none;padding:0;margin:0 0 1.2rem}
.pp-pijlers li{font:600 1.3rem "Display";padding:.35rem 0 .35rem 2rem;position:relative}
.pp-pijlers li::before{content:"";position:absolute;left:0;top:.95rem;width:1.15rem;height:.3rem;background:var(--blad)}
.pp-schets{margin:0}.pp-schets img{width:100%;height:auto;mix-blend-mode:multiply}
.pp-schets figcaption{font-size:.85rem;color:var(--inkt2)}
.pp-fotos{padding-block:clamp(4rem,9vh,6rem)}
.galerij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.galerij button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:.3rem}
.galerij img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .8s}
.galerij button:hover img{transform:scale(1.05)}
.lichtbak{border:0;padding:0;background:transparent;max-width:94vw;max-height:94dvh;overflow:visible}
.lichtbak::backdrop{background:rgba(16,24,18,.9)}
.lichtbak img{max-width:94vw;max-height:88dvh;width:auto;height:auto}
.lb-sluit{position:absolute;right:0;top:-3.2rem;width:2.9rem;height:2.9rem;border-radius:50%;border:0;background:var(--grond);font-size:1.6rem;cursor:pointer}
.volgende{background:var(--veen);color:var(--creme)}
.volgende-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vh,5rem) var(--g);text-decoration:none}
.volgende figure{margin:0;overflow:hidden;border-radius:.4rem}.volgende img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 1s}
.volgende-in:hover img{transform:scale(1.04)}
.volgende .label{color:var(--blad)}
.volgende-titel{font:850 clamp(2.6rem,6vw,5.6rem)/.95 "Display";letter-spacing:-.02em;margin:0}
.volgende-titel span{font-weight:400;font-style:italic;color:var(--blad)}
.pp-water{padding-block:clamp(4.5rem,10vh,7rem)}
.pp-smal{max-width:60ch;font:500 1.25rem/1.45 "Display"}
.pp-park{background:var(--grond2);padding-block:clamp(4.5rem,10vh,7rem)}
.pp-park-beelden{display:grid;gap:1rem}
.pp-park-beelden img,.pp-meegroei img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:.4rem}
.pp-citaat{background:var(--blad);padding-block:clamp(4rem,9vh,6rem)}
.pp-citaat blockquote{margin:0;max-width:36em}
.pp-citaat p{font:italic 700 clamp(1.8rem,3.6vw,3.3rem)/1.15 "Display";letter-spacing:-.01em}
.pp-citaat footer{font-weight:800}
.pp-meegroei{padding-block:clamp(4.5rem,10vh,7rem)}
.pp-meegroei .pp-twee{align-items:center}


/* doorsnede Rengerspark */
.dn{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:2.5rem}
.dn-svg{width:100%;height:auto;aspect-ratio:1000/460;border-radius:.5rem;overflow:hidden}
.dn-lucht{fill:#dfe7e3}
.dn-klei{fill:#9b8460}.dn-veen{fill:#4b3a2a}.dn-zand{fill:#dcc58f}
.dn-water{fill:#3d8fd1;opacity:.9}
.dn-grondwater{fill:none;stroke:#3d8fd1;stroke-width:3;stroke-dasharray:10 8;opacity:.85}
.dn-gras path{stroke:#5e9c34;stroke-width:9;fill:none}
.dn-tegel{fill:#b9b6ab;stroke:#6f6c62;stroke-width:2;transition:transform .8s cubic-bezier(.3,1.5,.5,1)}
.dn-plant path{stroke:#4f8a2b;stroke-width:4;fill:none;stroke-linecap:round}
.dn-labels text{font:italic 600 26px "Display";fill:#fff}
.dn-labels .dn-gwl{font-size:20px;fill:#cfe6fb}
.dn-labels text:nth-child(4),.dn-labels text:nth-child(5){fill:var(--inkt)}
.dn.hoog .dn-tegel{transform:translateY(-16px)}
.dn-bediening{min-width:0}
.dn-label{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;font:600 1.1rem "Display";margin-bottom:.6rem}
.dn-label strong{font:800 1.9rem "Display";color:var(--mos)}
.dn-uiteinden{display:flex;justify-content:space-between;font-size:.9rem;color:var(--inkt2);margin-top:.3rem}
.dn-zin{font:500 1.15rem/1.45 "Display";min-height:4.4em;margin-top:1rem}
.pp-water .regen-klein{color:var(--inkt2)}
.schuif{-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;--p:35%}
.schuif::-webkit-slider-runnable-track{height:.55rem;border-radius:99rem;background:linear-gradient(90deg,var(--water) var(--p),rgba(22,38,27,.15) var(--p))}
.schuif::-moz-range-track{height:.55rem;border-radius:99rem;background:linear-gradient(90deg,var(--water) var(--p),rgba(22,38,27,.15) var(--p))}
.schuif::-webkit-slider-thumb{-webkit-appearance:none;width:1.9rem;height:1.9rem;margin-top:-.68rem;border-radius:50%;background:var(--inkt);border:4px solid var(--grond);box-shadow:0 0 0 2px var(--inkt)}
.schuif::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--inkt);border:4px solid var(--grond)}

/* ---------- inloop */
.js .rv{opacity:0;transform:translateY(2rem);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- tablet */
@media (max-width:1100px){
  .regen,.dn{grid-template-columns:minmax(0,1fr)}
  .regen-bediening{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 2rem;align-items:start}
  .regen-modus,.regen-knop{grid-column:1/-1}
  .regen-legenda,.regen-uitleg,.regen-klein{grid-column:1/-1}
  .voet-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdg-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .pijler,.pijler:nth-of-type(2){grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .pijler:nth-of-type(2) .pijler-beeld{order:0}
  .pp-twee,.amb-in,.volgende-in{grid-template-columns:minmax(0,1fr)}
  .idee-twee{grid-template-columns:minmax(0,1fr);gap:1rem}
  .halte,.halte:nth-child(even){width:100%;margin-left:0;grid-template-columns:minmax(0,1fr);gap:1rem}
  .halte:nth-child(even) figure{order:0}
  .halte figure{grid-row:2;margin-left:4rem}
  .galerij{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* hero op staande telefoon en staande tablet: film bovenin, tekst eronder op papier */
@media (max-width:700px),(orientation:portrait) and (max-width:1100px){
  .hero{min-height:auto}
  .hero-beeld{position:relative;inset:auto;height:min(62svh,42rem);z-index:0}
  .hero-beeld>*{object-position:56% 60%}
  .hero-beeld::after{background:linear-gradient(to bottom,rgba(225,236,246,.45),rgba(225,236,246,0) 30%),linear-gradient(to top,var(--grond) 0,rgba(243,239,227,0) 18%)}
  .hero-tekst{padding:0 var(--g) 2.5rem;margin-top:-3.2rem;position:relative;z-index:1}
  .hero h1{font-size:min(15.5vw,6.5rem)}
  .hero h1 .w{display:block}
  .hero-onder{color:var(--inkt);text-shadow:none;padding-bottom:0;margin-top:1.6rem}
  .hero-plek{position:absolute;right:var(--g);top:-4.6rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
  .hero-zinnen{min-height:4em}
}
@media (max-width:600px){
  .project-rij{grid-template-columns:minmax(0,1fr)}
  .regen-bediening{display:block}
  .amb-form{grid-template-columns:minmax(0,1fr)}
  .feiten div{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .voet-in{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .regen-modus button{font-size:.88rem}
  .amb-form .knop{justify-self:stretch}
  .pk{min-height:70svh}
}
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:max(100svh,22rem)}
  .hero h1{font-size:min(8.5vw,19svh)}
  .hero-beeld::after{background:linear-gradient(90deg,rgba(243,239,227,.92) 0,rgba(243,239,227,.7) 42%,rgba(243,239,227,0) 70%),linear-gradient(to top,var(--grond) 0,rgba(243,239,227,0) 14%)}
  .hero-zinnen{max-width:24rem}
  .hero-tekst{padding-top:calc(var(--kop-h) + .6rem)}
  .hero-zinnen{margin-top:.5rem}
  .hz{font-size:1.1rem}
  .kop{--kop-h:3.8rem}
  .pk{min-height:max(100svh,20rem)}
  .pk h1{font-size:min(10vw,24svh)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv,.js .momenten li{opacity:1;transform:none}}
/* lage, brede vensters: meer lucht boven de daken, en een papierwaas achter de tekst */
@media (min-aspect-ratio:16/10) and (min-width:701px){.hero{--lucht:24%}}
@media (max-height:720px) and (min-width:701px){
  .hero-beeld::after{background:linear-gradient(90deg,rgba(243,239,227,.85) 0,rgba(243,239,227,.55) 40%,rgba(243,239,227,0) 66%),linear-gradient(to top,var(--grond) 0,rgba(243,239,227,0) 14%)}
  .hero h1{font-size:min(7.3vw,15svh)}}
@media (min-width:701px) and (orientation:landscape),(min-width:1101px){
  .hero-beeld::after{background:linear-gradient(90deg,rgba(243,239,227,.8) 0,rgba(243,239,227,.5) 34%,rgba(243,239,227,0) 58%),linear-gradient(to bottom,rgba(225,236,246,.5),rgba(225,236,246,0) 40%),linear-gradient(to top,var(--grond) 0,rgba(243,239,227,0) 14%)}}
@media (min-width:1600px) and (min-aspect-ratio:16/10){.hero{--lucht:28%}}