/* De Tuin van Meta, ads-pagina's op ruinerwold.kindercentrumavonturentuin.nl
   Stijl: geschilderd prentenboek met echte foto's (docs/research/antroposofisch-stijl/stijlrichting-avonturentuin.md).
   Palet uit plantenverf en boerderij; meekrap alleen voor de handeling (knoppen). */

@font-face{font-family:"Alegreya";src:url("../fonts/alegreya.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/nunito-sans.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}

:root{
  --papier:#F6F0E4;
  --linnen:#ECE2CF;
  --kaart:#FFFDF8;
  --rand:#DCCDB2;
  --walnoot:#3A2E24;
  --walnoot-zacht:#5B4B3D;
  --mos:#56663A;
  --mos-donker:#46542F;
  --salie:#A9B48A;
  --meekrap:#A4493D;
  --meekrap-donker:#8A3B31;
  --bijenwas:#E3B04B;
  --wede:#7E98A6;
  --kop:"Alegreya",Georgia,"Times New Roman",serif;
  --tekst:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --breed:1120px;
  --r-kaart:28px 28px 28px 8px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{
  margin:0;color:var(--walnoot);font-family:var(--tekst);font-size:1.0625rem;line-height:1.6;
  background-color:var(--papier);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  padding-bottom:76px;
}
@media (min-width:900px){body{font-size:1.125rem;padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--mos-donker);text-underline-offset:3px}
a:hover{color:var(--walnoot)}
:focus-visible{outline:3px solid var(--mos);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--kop);font-weight:500;line-height:1.15;margin:0 0 .5em;overflow-wrap:break-word;color:var(--walnoot)}
h1{font-size:clamp(1.9rem,1.3rem + 2.8vw,3.15rem);letter-spacing:-.005em}
h2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.25rem)}
h3{font-size:1.3rem;font-weight:700}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--breed);margin:0 auto;padding:0 20px}
.smal{max-width:720px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kop van de pagina */
.kop{padding:12px 0}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--walnoot);min-width:0}
.merk img{width:52px;height:auto;flex:none}
.merk span{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.merk b{font-family:var(--kop);font-size:1.3rem;font-weight:700}
.merk small{font-size:.8rem;color:var(--walnoot-zacht)}
.kop-rechts{display:flex;align-items:center;gap:14px}
.kop-tel{font-weight:700;text-decoration:none;color:var(--walnoot);display:flex;align-items:center;gap:6px;min-height:44px}
.kop-tel svg{width:20px;height:20px;flex:none}
.kop .knop{display:none}
@media (max-width:420px){.kop-tel .nummer{display:none}}
@media (min-width:900px){.kop .knop{display:inline-flex}}

/* Knoppen */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 26px;
  border-radius:999px;border:2px solid var(--meekrap);background:var(--meekrap);color:#fff;
  font-family:var(--tekst);font-weight:800;font-size:1.05rem;line-height:1.2;text-decoration:none;cursor:pointer;
}
.knop:hover{background:var(--meekrap-donker);border-color:var(--meekrap-donker);color:#fff}
.knop-zacht{background:transparent;color:var(--mos-donker);border-color:var(--mos)}
.knop-zacht:hover{background:var(--mos);color:#fff;border-color:var(--mos)}
a.knop{color:#fff}
a.knop.knop-zacht{color:var(--mos-donker)}
a.knop.knop-zacht:hover{color:#fff}

/* Held */
.held{position:relative;padding:0 0 40px;overflow:hidden}
.held::before{
  content:"";position:absolute;inset:-10% -20% auto -20%;height:620px;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 16% 30%, rgb(169 180 138 / .36), transparent 70%),
    radial-gradient(30% 34% at 88% 12%, rgb(227 176 75 / .20), transparent 70%),
    radial-gradient(36% 40% at 70% 88%, rgb(126 152 166 / .16), transparent 72%);
}
.held-grid{position:relative;z-index:1;display:grid;gap:22px;grid-template-areas:"foto" "tekst" "form"}
.held-foto{grid-area:foto;margin:0 -20px}
.held-tekst{grid-area:tekst}
.held-form{grid-area:form}
.held-foto img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 50%;border-radius:0 0 46% 54% / 0 0 13% 17%}
.held h1{margin-bottom:.35em}
.held .onder{font-size:1.15rem;color:var(--walnoot-zacht);max-width:34ch;margin-bottom:14px}
.score{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--walnoot);text-decoration:none;min-height:44px}
.score:hover{text-decoration:underline}
.sterren{color:#7F570B;letter-spacing:1px;font-size:1.05rem}
@media (min-width:900px){
  .held{padding:28px 0 64px}
  .held-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"tekst form" "foto form";column-gap:56px;row-gap:28px;align-items:start}
  .held-foto{margin:0;max-width:520px}
  .held-foto img{aspect-ratio:5/4;border-radius:48% 52% 44% 56% / 38% 42% 58% 62%}
}

/* Rondleidingformulier: het rustigste blok van de pagina */
.formkaart{background:var(--kaart);border:1px solid var(--rand);border-radius:24px;padding:24px 20px;box-shadow:0 1px 0 rgb(58 46 36 / .08)}
@media (min-width:900px){.formkaart{padding:30px 30px 26px}}
.formkaart h2{font-size:1.65rem;margin-bottom:.2em}
.formkaart .intro{color:var(--walnoot-zacht);margin-bottom:14px;font-size:1rem}
.voortgang{font-size:.9rem;font-weight:700;color:var(--mos-donker);margin-bottom:8px}
.stap{border:0;margin:0;padding:0;min-width:0}
.stap legend{font-family:var(--kop);font-weight:700;font-size:1.25rem;padding:0;margin-bottom:10px}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:8px 12px;border:2px solid var(--salie);border-radius:999px;font-weight:700;background:#fff;color:var(--walnoot);line-height:1.2}
.chip input:hover+span{border-color:var(--mos)}
.chip input:focus-visible+span{outline:3px solid var(--mos);outline-offset:2px}
.chip input:checked+span{background:var(--mos);border-color:var(--mos);color:#fff}
.veld{margin-bottom:12px}
.veld label{display:block;font-weight:700;font-size:1rem;margin-bottom:4px}
.veld input{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid #B9A98E;border-radius:12px;background:#fff;font:inherit;font-size:1rem;color:var(--walnoot)}
.veld input:focus{outline:3px solid var(--mos);outline-offset:1px;border-color:var(--mos)}
.veld .fout{display:none;color:#9B2C22;font-size:.92rem;font-weight:700;margin-top:4px}
.veld.mis input{border-color:#9B2C22}
.veld.mis .fout{display:block}
.vinkje{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;margin:4px 0 14px;cursor:pointer}
.vinkje input{width:22px;height:22px;margin-top:2px;accent-color:var(--mos);flex:none}
.formkaart .knop{width:100%;margin-top:4px}
.form-onder{font-size:.95rem;color:var(--walnoot-zacht);margin:10px 0 0;text-align:center}
.terug{background:none;border:0;padding:8px 0;margin-top:10px;font:inherit;font-weight:700;color:var(--mos-donker);text-decoration:underline;cursor:pointer;min-height:44px}
.hp-veld{position:absolute;left:-9999px}
/* Met JavaScript: één stap tegelijk. Zonder JavaScript staat alles onder elkaar en werkt het als gewoon formulier. */
.js .stappen .stap{display:none}
.js .stappen .stap.actief{display:block}
.no-js-only{display:block}
.js .no-js-only{display:none}
.js-only{display:none}
.js .js-only{display:block}
.stappen .stap+.stap{margin-top:18px}
.js .stappen .stap+.stap{margin-top:0}

/* Review: klikbaar naar de echte beoordeling op Google */
.review{margin:18px 0 0;padding:0 0 0 18px;border-left:4px solid var(--bijenwas)}
.review p{font-family:var(--kop);font-size:1.18rem;line-height:1.4;margin:0 0 6px;color:var(--walnoot)}
.review footer{font-size:.95rem;color:var(--walnoot-zacht)}
.review a{font-weight:700;display:inline-block;padding:3px 0;min-height:24px}

/* NAP-balk */
.nap{background:var(--linnen);border-radius:var(--r-kaart);padding:18px 20px;display:grid;gap:10px;margin-top:8px}
.nap div{display:flex;gap:10px;align-items:flex-start}
.nap svg{width:22px;height:22px;flex:none;color:var(--mos);margin-top:3px}
.nap a{font-weight:700}
@media (min-width:900px){.nap{grid-template-columns:repeat(3,minmax(0,1fr));padding:20px 28px}}

/* Secties */
.sectie{padding:56px 0;position:relative}
.sectie-linnen{background:var(--linnen)}
.golf{display:block;width:100%;height:36px;color:var(--linnen)}
.golf-onder{transform:scaleY(-1)}
.inleiding{max-width:60ch;color:var(--walnoot-zacht)}

/* Drie zekerheden */
.drie{display:grid;gap:16px;margin-top:20px}
.drie article{background:var(--kaart);border:1px solid var(--rand);border-radius:var(--r-kaart);padding:22px 20px}
.drie h3{display:flex;align-items:center;gap:10px}
.drie h3 svg{width:28px;height:28px;color:var(--mos);flex:none}
.drie p{margin:0}
@media (min-width:760px){.drie{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Tekst naast foto */
.duo{display:grid;gap:26px;align-items:center}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%;border-radius:42% 58% 55% 45% / 52% 44% 56% 48%}
.duo.duo-breed img{aspect-ratio:4/3}
@media (min-width:860px){.duo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}.duo.om figure{order:-1}}
.lijst{list-style:none;margin:0 0 1em;padding:0}
.lijst li{position:relative;padding-left:30px;margin-bottom:10px}
.lijst li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:12px;border-radius:60% 40% 55% 45%;background:var(--salie)}

/* Fotostrook */
.fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.fotos figure{margin:0}
.fotos img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;border-radius:46% 54% 44% 56% / 40% 42% 58% 60%}
.fotos figure:nth-child(2) img{border-radius:56% 44% 52% 48% / 46% 56% 44% 54%}
.fotos figure:nth-child(3) img{border-radius:40% 60% 50% 50% / 52% 46% 54% 48%}
.fotos figure:nth-child(3){grid-column:1/-1}
.fotos figure:nth-child(3) img{aspect-ratio:16/9}
.fotos figcaption{font-size:.95rem;color:var(--walnoot-zacht);margin-top:8px;text-align:center}
@media (min-width:760px){.fotos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fotos figure:nth-child(3){grid-column:auto}.fotos figure:nth-child(3) img{aspect-ratio:4/5}}

/* Stappen */
.stappen-lijst{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;counter-reset:s}
.stappen-lijst li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;background:var(--kaart);border:1px solid var(--rand);border-radius:var(--r-kaart);padding:16px 18px}
.stappen-lijst li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:52% 48% 46% 54%;background:var(--salie);font-family:var(--kop);font-weight:700;font-size:1.3rem;color:var(--walnoot)}
.stappen-lijst b{display:block;font-family:var(--kop);font-size:1.18rem}
.stappen-lijst span{color:var(--walnoot-zacht)}
@media (min-width:860px){.stappen-lijst{grid-template-columns:repeat(4,minmax(0,1fr))}.stappen-lijst li{grid-template-columns:1fr}}

/* Dagritme */
.dag{list-style:none;margin:22px 0 0;padding:0;position:relative}
.dag::before{content:"";position:absolute;left:62px;top:8px;bottom:8px;width:2px;background:var(--salie)}
.dag li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:22px;padding:8px 0 14px;position:relative}
.dag time{font-weight:800;color:var(--mos-donker);font-size:.98rem;padding-top:2px}
.dag li::after{content:"";position:absolute;left:57px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--papier);border:2px solid var(--mos)}
.dag p{margin:0}

/* Prijsblok */
.prijs{display:grid;gap:16px;margin-top:18px}
.prijs article{background:var(--kaart);border:1px solid var(--rand);border-radius:var(--r-kaart);padding:20px}
.prijs h3{margin-bottom:.3em}
.prijs p{margin:0}
.bedrag{font-family:var(--kop);font-size:1.9rem;font-weight:700;color:var(--walnoot);display:block}
@media (min-width:760px){.prijs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Afsluiter */
.afsluiter{background:var(--mos);color:#fff;border-radius:var(--r-kaart);padding:32px 22px;text-align:left}
.afsluiter h2{color:#fff}
.afsluiter p{color:#F3F1E6}
.afsluiter .knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.afsluiter .knop{background:var(--meekrap);border-color:#fff}
.afsluiter .knop:hover{background:var(--meekrap-donker)}
.afsluiter a.tel{color:#fff;font-weight:800;min-height:44px;display:inline-flex;align-items:center}
@media (min-width:860px){.afsluiter{padding:44px 48px}}

/* Veelgestelde vragen */
.vragen{margin-top:18px;display:grid;gap:10px}
.vragen details{background:var(--kaart);border:1px solid var(--rand);border-radius:18px;padding:0 18px}
.vragen summary{cursor:pointer;list-style:none;font-family:var(--kop);font-weight:700;font-size:1.18rem;padding:14px 32px 14px 0;position:relative;min-height:44px}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";position:absolute;right:0;top:10px;font-size:1.6rem;color:var(--mos)}
.vragen details[open] summary::after{content:"\2212"}
.vragen details p{margin:0 0 16px}

/* Voettekst */
.voet{margin-top:56px;background:var(--walnoot);color:#EFE7D8;padding:44px 0 28px;font-size:.98rem}
.voet a{color:#F6F0E4}
.voet a:hover{color:#fff}
.voet h2{color:#fff;font-size:1.35rem}
.voet-grid{display:grid;gap:26px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:6px}
.voet li a{display:inline-block;min-height:28px;padding:2px 0}
.voet-klein{margin-top:28px;font-size:.88rem;color:#D9CDB8}
@media (min-width:860px){.voet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Vaste balk onderin op mobiel */
.balk{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgb(246 240 228 / .97);border-top:1px solid var(--rand)}
.balk .knop{flex:1;min-height:50px;padding:10px 12px;font-size:1rem}
.balk .knop-zacht{flex:0 0 auto;min-width:96px}
@media (min-width:900px){.balk{display:none}}

/* Bedankt en eenvoudige pagina's */
.eenvoudig{padding:40px 0 20px}
.eenvoudig h1{max-width:20ch}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}