/* Studio op Wielen · de delen onder de hero
   Kleuren: kern + tinten uit het logo-systeem, plus vier 'onderweg'-kleuren (uitbreiding). */
:root{
  --terracotta:#C2643C; --mosterd:#D9A23A; --salie:#9CAF92; --meer:#7FA3AE;
}

.sectie{position:relative;padding:clamp(96px,15vh,170px) clamp(16px,6vw,96px) clamp(80px,12vh,140px);background:var(--bg);color:var(--fg,var(--inkt))}
.sectie > *{position:relative;z-index:4}
.sectie .rand{position:absolute;left:0;right:0;top:-38px;width:100%;height:40px;color:var(--bg);z-index:2;display:block}
.binnen{max-width:1240px;margin:0 auto}

.wenk{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1.2 Inter;letter-spacing:.18em;text-transform:uppercase}
.wenk b{white-space:nowrap;flex:0 0 auto;font:400 15px/1 Anton,Impact,sans-serif;letter-spacing:.06em;background:var(--inkt);color:var(--zand);padding:6px 9px 5px;border-radius:6px}
.sectie h2{font:400 clamp(52px,8.4vw,128px)/.9 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:16px 0 18px}
.lead{max-width:660px;font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.5}
.sectie h3{font:400 clamp(28px,3vw,40px)/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:clamp(56px,9vh,96px) 0 18px}

/* uitgeknipt papier: inktrand, platte schaduw, iets scheef */
.papier{background:var(--papier,var(--creme));color:var(--inkt);border:3px solid var(--inkt);border-radius:16px 12px 18px 11px;box-shadow:7px 8px 0 rgba(29,33,27,.22)}
.scheef-l{--r:-1.2deg;transform:rotate(-1.2deg)}
.scheef-r{--r:1deg;transform:rotate(1deg)}

.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.knop{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;border:3px solid var(--inkt);
  background:var(--kb,var(--inkt));color:var(--kf,var(--creme));font:700 15px/1 Inter;text-decoration:none;box-shadow:4px 5px 0 rgba(29,33,27,.3);transition:transform .15s}
.knop:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 rgba(29,33,27,.3)}
.knop.licht{--kb:var(--creme);--kf:var(--inkt)}

/* stop-motion verschijnen: per sprongetje, niet vloeiend */
@keyframes pop{0%{opacity:0;transform:scale(.55) rotate(-5deg)}35%{opacity:1;transform:scale(1.08) rotate(2deg)}65%{transform:scale(.96) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}
[data-pop]{opacity:0}
[data-pop].in{animation:pop .55s steps(3,end) both;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes wiebel{0%{transform:rotate(var(--r,0deg))}50%{transform:rotate(calc(var(--r,0deg) + 1.4deg))}}
.wiebel{animation:wiebel .5s steps(1,end) infinite}

/* getekende scène in een kader */
.scene-kader{margin-top:clamp(36px,6vh,64px);border:4px solid var(--inkt);border-radius:26px;overflow:hidden;box-shadow:9px 10px 0 rgba(29,33,27,.25);background:var(--zandlicht)}
.scene-kader svg{display:block;width:100%;height:auto}

/* ── 1 · campings ─────────────────────────────── */
#campings{--bg:var(--salie)}
.pakket{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pakket .papier{padding:22px 22px 24px}
.pakket .nr{font:400 46px/1 Anton,Impact,sans-serif;color:var(--terracotta)}
.pakket h4{font:400 26px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;margin:8px 0 8px}
.pakket p{font-size:15.5px}
.weken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:relative}
.weken::before{content:"";position:absolute;left:4%;right:4%;top:34px;border-top:6px dashed var(--inkt);opacity:.6}
.week{position:relative;padding-top:78px}
.week .stip{position:absolute;top:10px;left:0;width:54px;height:54px;border-radius:50%;background:var(--mosterd);border:3px solid var(--inkt);
  display:grid;place-items:center;font:400 20px/1 Anton,Impact,sans-serif}
.week b{display:block;font:400 24px/1 Anton,Impact,sans-serif;text-transform:uppercase;margin-bottom:6px}
.case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.polas{position:relative;height:clamp(320px,36vw,470px)}
.pola{position:absolute;width:58%;background:var(--creme);padding:10px 10px 38px;border:3px solid var(--inkt);box-shadow:7px 8px 0 rgba(29,33,27,.25)}
.pola img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--inkt)}
.pola span{position:absolute;left:12px;bottom:9px;font:400 15px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.pola::before{content:"";position:absolute;top:-14px;left:40%;width:70px;height:24px;background:rgba(237,190,151,.85);border:2px solid rgba(29,33,27,.25);transform:rotate(-4deg)}
.pola:nth-child(1){left:0;top:4%;--r:-4deg;transform:rotate(-4deg)}
.pola:nth-child(2){left:40%;top:0;--r:3deg;transform:rotate(3deg)}
.pola:nth-child(3){left:18%;top:42%;--r:-1deg;transform:rotate(-1deg)}
.live{margin-top:clamp(56px,9vh,96px);display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(22px,3.4vw,44px);border:4px solid var(--inkt);border-radius:28px;background:var(--meer);box-shadow:9px 10px 0 rgba(29,33,27,.25)}
.live h3{margin:10px 0 14px}
.live .lead{margin-bottom:18px}
.telefoon{max-width:300px;margin:0 auto;transform:rotate(-4deg)}
.telefoon svg{display:block;width:100%;height:auto;filter:drop-shadow(8px 9px 0 rgba(29,33,27,.28))}
.nieuw{display:inline-block;background:var(--terracotta);color:var(--creme);font:700 12px/1 Inter;letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;border:2px solid var(--inkt);border-radius:7px;transform:rotate(-3deg)}
.route-noot{margin-top:clamp(40px,7vh,72px);padding:20px 24px;display:flex;gap:18px;align-items:center;--papier:var(--zandlicht)}
.route-noot svg{flex:0 0 64px}

/* ── 2 · partners ─────────────────────────────── */
#partners{--bg:var(--mosterd)}
.prikbord{margin-top:clamp(36px,6vh,60px);padding:clamp(18px,3vw,34px);border:4px solid var(--inkt);border-radius:22px;background:var(--hout);
  background-image:radial-gradient(circle,rgba(29,33,27,.38) 3px,transparent 3.5px);background-size:34px 34px;box-shadow:9px 10px 0 rgba(29,33,27,.25);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.onderdeel{padding:16px 16px 18px;display:flex;gap:14px;align-items:center;position:relative}
.onderdeel svg{flex:0 0 66px;height:66px}
.onderdeel b{display:block;font:400 22px/1.05 Anton,Impact,sans-serif;text-transform:uppercase}
.onderdeel small{font-size:13.5px;line-height:1.35;display:block;margin-top:3px}
.onderdeel .label{position:absolute;top:-12px;right:12px;background:var(--terracotta);color:var(--creme);font:700 11px/1 Inter;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 9px;border:2px solid var(--inkt);border-radius:6px;transform:rotate(3deg)}
.meer-onderdelen{margin-top:22px}
.meer-onderdelen summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:3px solid var(--inkt);border-radius:999px;
  background:var(--creme);font:700 15px/1 Inter;box-shadow:4px 5px 0 rgba(29,33,27,.3)}
.meer-onderdelen summary::-webkit-details-marker{display:none}
.meer-onderdelen summary small{font-weight:600;opacity:.7}
.meer-onderdelen summary .pijl{font-style:normal;font-size:18px;transition:transform .25s}
.meer-onderdelen[open] summary .pijl{transform:rotate(180deg)}
.meer-onderdelen summary:focus-visible{outline:3px solid var(--inkt);outline-offset:3px}
.meer-onderdelen .prikbord{margin-top:20px}
.onderdeel .vinkje,.legenda .vb{width:26px;height:26px;border:3px solid var(--inkt);border-radius:6px;background:var(--creme);display:inline-block;vertical-align:middle}
.onderdeel .vinkje{position:absolute;left:-11px;top:-11px;transform:rotate(-6deg)}
.onderdeel.gevonden .vinkje,.legenda .vb.aan{background:var(--olijf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.6 3.4L15.5 6' fill='none' stroke='%23F4ECD4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.onderdeel.gevonden .label{background:var(--olijf)}
.onderdeel.gevonden{cursor:pointer;transition:transform .15s}
.onderdeel.gevonden:hover{transform:translate(-2px,-2px) rotate(-.5deg)}
.onderdeel .naar-product{position:absolute;inset:0;z-index:2;border-radius:inherit}
.onderdeel .naar-product:focus-visible{outline:3px solid var(--inkt);outline-offset:3px}
.onderdeel.gevonden small::after{content:" →";font-weight:700}
.legenda{margin-top:clamp(28px,4vh,40px);font-size:14.5px;font-weight:600;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.legenda + .prikbord{margin-top:14px}
.krijgt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.lijst{list-style:none;display:grid;gap:12px}
.lijst li{display:flex;gap:14px;align-items:flex-start;font-size:17px;font-weight:500}
.lijst li::before{content:"";flex:0 0 22px;height:22px;margin-top:2px;border-radius:50%;border:3px solid var(--inkt);background:var(--creme)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%231D211B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ruil{padding:24px 26px;--papier:var(--creme)}
.ruil .pijlen{font:400 54px/1 Anton,Impact,sans-serif;color:var(--terracotta);text-align:center;margin:6px 0}
.ruil p{font-size:15.5px}
.ruil .kol{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.ruil .kol div b{display:block;font:400 21px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;margin-bottom:4px}
.eerlijk{margin-top:26px;font-size:15px;max-width:640px}

/* ── 3 · de bus ───────────────────────────────── */
#bus{--bg:var(--creme)}
.render{position:relative;margin-top:clamp(36px,6vh,64px)}
.render .groot{border:4px solid var(--inkt);border-radius:24px;overflow:hidden;box-shadow:9px 10px 0 rgba(29,33,27,.22)}
.render .groot img{display:block;width:100%;height:auto}
.render figcaption{margin-top:12px;font-size:13.5px;color:#4a4f44}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border:3px solid var(--inkt);border-radius:999px;background:var(--cb,var(--zandlicht));font:600 14.5px/1.2 Inter}
.chip i{width:12px;height:12px;border-radius:50%;background:var(--ci,var(--terracotta));border:2px solid var(--inkt)}
.vier-polas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(44px,7vh,80px)}
.vier-polas .pola{position:relative;width:auto;left:auto;top:auto}
.vier-polas .pola:nth-child(1){--r:-2.4deg;transform:rotate(-2.4deg)}
.vier-polas .pola:nth-child(2){--r:1.8deg;transform:rotate(1.8deg)}
.vier-polas .pola:nth-child(3){--r:-.8deg;transform:rotate(-.8deg)}
.vier-polas .pola:nth-child(4){--r:2.4deg;transform:rotate(2.4deg)}
.vier-polas .pola span{font-size:14px}
.render-noot{margin-top:18px;font-size:13.5px;color:#4a4f44}
.plattegrond{margin-top:clamp(36px,6vh,64px);padding:clamp(14px,2.4vw,30px);--papier:var(--zandlicht)}
.plattegrond svg{display:block;width:100%;height:auto}
.plattegrond figcaption{margin-top:8px;font-size:13.5px;color:#4a4f44}

.route{margin-top:clamp(56px,9vh,104px);position:relative}
.teller{display:inline-flex;align-items:baseline;gap:12px;padding:14px 20px;--papier:var(--mosterd)}
.teller b{font:400 clamp(40px,5vw,64px)/1 Anton,Impact,sans-serif}
.teller span{font:700 13px/1.3 Inter;letter-spacing:.14em;text-transform:uppercase}
.weg-lijn{position:relative;margin-top:40px;height:120px}
.weg-lijn .asfalt{position:absolute;left:0;right:0;top:66px;height:26px;background:var(--inkt);border-radius:13px}
.weg-lijn .asfalt::after{content:"";position:absolute;left:14px;right:14px;top:11px;height:4px;background:repeating-linear-gradient(90deg,var(--creme) 0 26px,transparent 26px 50px);opacity:.75}
.weg-lijn .busje{position:absolute;top:0;left:0;width:118px;transform:translateX(-50%);will-change:left}
.weg-lijn .busje img{width:100%;display:block}
.haltes-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:18px}
.halte{position:relative;padding-top:26px}
.halte::before{content:"";position:absolute;top:-36px;left:10px;width:24px;height:24px;border-radius:50%;background:var(--hk,var(--terracotta));border:3px solid var(--inkt)}
.halte time{font:700 12.5px/1 Inter;letter-spacing:.16em;text-transform:uppercase}
.halte b{display:block;font:400 25px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;margin:6px 0}
.halte p{font-size:15px}

/* ── 4 · volg de reis ─────────────────────────── */
#volg{--bg:var(--meer)}
.kanalen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(36px,6vh,60px)}
.kanaal{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;text-decoration:none;transition:transform .15s}
.kanaal:hover{transform:translate(-3px,-3px) rotate(var(--r,0deg))}
.kanaal svg{width:72px;height:72px}
.kanaal b{font:400 30px/1 Anton,Impact,sans-serif;text-transform:uppercase}
.kanaal span{font:700 15px/1.2 Inter}
.kanaal small{font-size:14px}
.series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.serie{padding:20px 22px;--papier:var(--zandlicht)}
.serie time{font:700 12px/1 Inter;letter-spacing:.16em;text-transform:uppercase}
.serie b{display:block;font:400 26px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;margin:8px 0 6px}
.serie p{font-size:15px}

/* ── 5 · stap in (avond) ──────────────────────── */
#stap-in{--bg:var(--inkt);--fg:var(--creme);text-align:center;padding-bottom:0}
#stap-in h2{color:var(--zand)}
#stap-in .lead{margin:0 auto}
#stap-in .knoppen{justify-content:center}
#stap-in .knop{--kb:var(--mosterd);--kf:var(--inkt);border-color:var(--creme)}
#stap-in .knop.licht{--kb:transparent;--kf:var(--creme)}
.avond{margin:clamp(40px,7vh,72px) 0 0 calc(50% - 50vw);width:100vw}
.avond svg{display:block;width:100%;height:clamp(230px,26vw,430px)}
.voet{background:var(--inkt);color:var(--heide);padding:28px clamp(16px,6vw,96px) 36px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;border-top:2px solid #2c3229}
.voet a{color:var(--creme)}
.voet-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.voet-nav a{font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(244,236,212,.4)}
.voet-nav a:hover{border-bottom-color:var(--creme)}

/* ── telefoon ─────────────────────────────────── */
@media (max-width:820px){
  .pakket,.weken,.case,.krijgt,.kanalen,.series,.live{grid-template-columns:1fr}
  .vier-polas{grid-template-columns:1fr 1fr;gap:16px}
  .telefoon{max-width:230px}
  .prikbord{grid-template-columns:1fr 1fr}
  .weken::before{display:none}
  .haltes-route{grid-template-columns:1fr 1fr;row-gap:36px}
  .polas{height:min(96vw,440px)}
}
@media (max-width:520px){
  .prikbord{grid-template-columns:1fr}
  .haltes-route{grid-template-columns:1fr}
  .halte::before{top:6px;left:-2px}
  .halte{padding:0 0 0 36px}
  .weg-lijn{display:none}
}
@media (prefers-reduced-motion:reduce){
  [data-pop]{opacity:1}
  [data-pop].in,.wiebel{animation:none}
}

/* ── grindpaadje door de pagina ───────────────── */
.paginas{position:relative}
.grindweg{position:absolute;inset:0;pointer-events:none;z-index:3}
.grindweg svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.grindweg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.grind-rand{stroke:var(--inkt);stroke-width:34}
.grind{stroke:#E7D4B8;stroke-width:27}
.steentjes{stroke:var(--walnoot);stroke-width:5;stroke-dasharray:.1 17;opacity:.6}
.steentjes.twee{stroke:var(--hout);stroke-width:3.5;stroke-dasharray:.1 23;stroke-dashoffset:9;opacity:.7}
.grindbus{position:absolute;left:0;top:0;width:100px;height:50px;margin:-25px 0 0 -50px;z-index:6;pointer-events:none;will-change:transform}
.grindbus svg{display:block;width:100%;height:100%}
.berg{position:absolute;left:0;top:0;width:200px;height:136px;margin:-136px 0 0 -100px;z-index:7;pointer-events:none;display:none}
.berg svg{display:block;width:100%;height:100%;filter:drop-shadow(5px 6px 0 rgba(29,33,27,.22))}
#bergBegin{margin-top:-136px}
@media (max-width:899px){.grindweg,.grindbus,.berg{display:none!important}}

/* in het laatste deel ligt de avondscène onder het grindpad (de weg rijdt over de grond de berg in), de tekst erboven */
#stap-in > .binnen{z-index:auto}
#stap-in .binnen > :not(.avond){position:relative;z-index:4}
#stap-in .avond{position:relative;z-index:2}

/* ── contactformulier ─────────────────────────── */
.formulier{max-width:860px;margin:clamp(32px,5vh,52px) auto 0;padding:clamp(20px,3vw,36px);text-align:left;--papier:var(--creme)}
.formulier fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}
.formulier legend{font:400 24px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px}
.keuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.keuze legend{grid-column:1/-1}
.keuze label{position:relative;cursor:pointer}
.keuze input{position:absolute;opacity:0;pointer-events:none}
.keuze span{display:block;height:100%;padding:14px 16px 14px 48px;border:3px solid var(--inkt);border-radius:14px;background:var(--zandlicht);transition:background-color .15s,transform .15s}
.keuze span::before{content:"";position:absolute;left:16px;top:16px;width:20px;height:20px;border-radius:50%;border:3px solid var(--inkt);background:var(--creme)}
.keuze b{display:block;font:400 20px/1.1 Anton,Impact,sans-serif;text-transform:uppercase}
.keuze small{display:block;font-size:13.5px;margin-top:3px}
.keuze label:hover span{transform:translate(-1px,-1px)}
.keuze input:checked + span{background:var(--mosterd);box-shadow:4px 5px 0 rgba(29,33,27,.28)}
.keuze input:checked + span::before{background:var(--inkt);box-shadow:inset 0 0 0 4px var(--creme)}
.keuze input:focus-visible + span{outline:3px solid var(--inkt);outline-offset:3px}
.formulier label{display:block;font:700 14px/1.3 Inter;margin-bottom:12px}
.formulier input:not([type=radio]):not([type=checkbox]),.formulier select,.formulier textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;font:500 15px/1.4 Inter;color:var(--inkt);
  background:#fffaf0;border:2.5px solid var(--inkt);border-radius:10px}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{outline:3px solid var(--mosterd);outline-offset:1px}
.formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.groep-titel{font:700 14px/1.3 Inter;margin:6px 0 8px}
.vinkjes{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
.vinkjes label{display:flex;align-items:center;gap:8px;font-weight:600;margin:0}
.vinkjes input{width:20px;height:20px;accent-color:var(--olijf)}
.formulier .honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.verstuur{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.formulier .knop{--kb:var(--inkt);--kf:var(--creme);border-color:var(--inkt);cursor:pointer;font-family:Inter}
.melding{font:700 15px/1.4 Inter;margin:0}
.melding.goed{color:var(--olijf)}
.melding.fout{color:#9a3a1f}
.formulier .klein{font-size:13.5px;margin-top:16px;color:#4a4f44}
.formulier .klein a{color:var(--inkt)}
.formulier.verstuurd fieldset,.formulier.verstuurd .klein{display:none}
@media (max-width:640px){ .keuze,.formulier .rij{grid-template-columns:1fr} }