:root{
  --zand:#F6F1E6; --bos:#8A4B1F; --goud:#C9973B; --inkt:#2B2018; --zacht:#6B5A4C; --lijn:#DDD5C4;
  --wit:#FFFDF8; --goudtint:#F3E7CE; --petrol:#2E6F7E; --terra:#A6472E; --salie:#A8672F; --salie-tekst:#8F5524;
  --bosvlak:#8A4B1F; --opgoud:#2B2018; --goudrand:#E5D3AC; --goudtekst:#6E5314; --vinkrand:#B9AB8D;
  --balk:48px; --nav:60px; --onder:env(safe-area-inset-bottom,0px);
  --kop:'Bricolage Grotesque',Figtree,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zand);color:var(--inkt);font:1rem/1.5 Figtree,system-ui,-apple-system,Segoe UI,sans-serif;
  padding-top:calc(var(--balk) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--nav) + var(--onder) + 12px)}
h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:1.15;margin:0;color:var(--bos);text-wrap:balance}
h1{font-size:1.9rem}h2{font-size:1.25rem;margin:26px 0 10px}h3{font-size:1.05rem;margin:0 0 6px}
p{margin:0 0 10px}a{color:inherit}
button{font:inherit;color:inherit}
.oog{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--salie-tekst);margin:0 0 6px}

#balk{position:fixed;inset:0 0 auto 0;z-index:30;height:calc(var(--balk) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  display:flex;align-items:center;gap:10px;background:var(--bosvlak);color:#fff;padding-inline:14px}
#balk .merk{display:flex;padding:7px;margin:-7px}
#balk img{display:block;border-radius:50%}
#titel{font-family:var(--kop);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
#terugknop{display:grid;place-items:center;width:44px;height:44px;margin-left:-10px;border:0;background:none;color:#fff;cursor:pointer;border-radius:12px}
#terugknop svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#terugknop[hidden]{display:none}
#terugknop:focus-visible,#tabs a:focus-visible,.knop:focus-visible{outline:3px solid var(--goud);outline-offset:2px}

main{max-width:680px;margin:0 auto;padding:18px 16px 8px}
body.kaartscherm main{max-width:none;padding:0}
body.kaartscherm{padding-bottom:0}

#tabs{position:fixed;inset:auto 0 0 0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--nav) + var(--onder));padding-bottom:var(--onder);
  background:var(--wit);border-top:1px solid var(--lijn)}
#tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--zacht);font-size:.72rem;font-weight:600}
#tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#tabs a[aria-current]{color:var(--bos)}
#tabs a[aria-current] svg{stroke-width:2.2}

/* algemeen */
.kaart-blok,.blok{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:14px 16px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;background:var(--bosvlak);color:#fff;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.knop.goud{background:var(--goud);color:var(--opgoud)}
.knop.licht{background:var(--wit);color:var(--bos);border:1.5px solid var(--bos)}
.knop.klein{min-height:38px;padding:0 14px;font-size:.9rem}
input[type=file]{font:inherit;font-size:.9rem;color:var(--zacht);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:700;min-height:46px;padding:0 20px;margin-right:12px;border:0;border-radius:999px;background:var(--bosvlak);color:#fff;cursor:pointer}
.kleurpunt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.stil{color:var(--zacht)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--goudtint);font-size:.82rem;font-weight:600;margin:0 6px 6px 0}

/* begin */
.held h1{font-size:2.1rem}
.held .sub{color:var(--zacht);margin-top:6px}
.vandaag{display:block;text-decoration:none;margin-top:18px;background:var(--bosvlak);color:#fff;border-radius:16px;padding:16px;overflow:hidden}
.vandaag .oog{color:#E8D49B}.vandaag h3{color:#fff;font-size:1.35rem}
.vandaag .minikaart{margin-top:12px;border-radius:10px}
/* het Vandaag-blok (review 9-10, C1): poorttijd met aftellen, zon op en onder, en daaronder vertrek en tanken */
.vd-kop{display:block;text-decoration:none;color:#fff}
.vd-poort{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline;background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;margin-top:12px}
.vd-poort .tijd{font:700 1.9rem/1 var(--kop);color:#fff;grid-row:span 2;font-variant-numeric:tabular-nums}
.vd-poort .l{font-size:.85rem;color:#E9E3D2}
.vd-poort .nog{font-weight:700;color:#F1D79A;font-variant-numeric:tabular-nums}
.vd-zon{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:#E9E3D2;margin-top:10px;font-variant-numeric:tabular-nums}
.vd-kaartje{display:block}
.vd-kaarten{display:grid;gap:10px;margin-top:10px}
.vd-kaart{display:flex;flex-direction:column;gap:2px;padding:12px 14px}
.vd-kaart .k{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--salie-tekst)}
.vd-kaart b{font-size:1.05rem}
.vd-kaart small{color:var(--zacht);font-size:.82rem}
/* de route als stappen (review 9-10, C2) */
.ritstappen{white-space:normal}                   /* .sectie .inhoud staat op pre-line; anders wordt elke regelovergang in de opmaak een witregel */
.ritstappen+.ritstappen{margin-top:16px}
.rs-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.rs-kop .linkknop{font-size:.92rem}
.stappenlijst{list-style:none;margin:0;padding:0}
.stappenlijst li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--lijn)}
.stappenlijst li:last-child{border-bottom:0}
.stappenlijst .km{font-size:.88rem;color:var(--zacht);font-variant-numeric:tabular-nums;white-space:nowrap}
.stappenlijst .tekst .st{color:var(--zacht);font-style:italic}
.pijl{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--goudtint);color:var(--bos)}
.pijl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tekst>.pijl{background:transparent;color:var(--salie)}
.aankomst>.pijl{background:var(--bosvlak);color:#fff}
.volg .oog{display:flex;align-items:center;gap:2px}
.volg-nu{display:flex;align-items:center;gap:16px;margin:14px 0 10px}
.volg-nu b{display:block;font-family:var(--kop);font-size:1.7rem;line-height:1.15;color:var(--bos)}
.volg-nu span:not(.pijl){font-size:1.1rem;color:var(--zacht)}
.pijl.groot{width:64px;height:64px;border-radius:16px;flex:none}
.pijl.groot svg{width:40px;height:40px}
.volg-daarna{color:var(--zacht);margin:0 0 16px}
.volgknoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.volgknoppen .knop:disabled{opacity:.45;cursor:default}
/* H1: waar ben je op de route, en terug naar je kamp (10-10) */
.volg-hier{margin:-4px 0 12px;padding:10px 12px;border-radius:12px;background:var(--goudtint);color:var(--inkt)}
.volg-waar{margin:14px 0 0;text-align:center}
.volg-waar .linkknop{font-size:.95rem;min-height:44px}
.vd-terug{text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.tk-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 10px}
.tk-cijfers div{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:10px 8px;text-align:center}
.tk-cijfers b{display:block;font:700 1.35rem/1.1 var(--kop);color:var(--bos);font-variant-numeric:tabular-nums}
.tk-cijfers span{display:block;font-size:.78rem;color:var(--zacht);margin-top:2px}
.tk-status{margin:0 0 10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--lijn);background:var(--wit)}
.tk-status b{display:block}
.tk-status.ok{border-color:var(--salie)}
.tk-status.krap{border-color:var(--goud);background:var(--goudtint)}
.tk-status.laat{border-color:var(--terra)}
.tk-status.laat b{color:var(--terra)}
.tk-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tk-lijst button{display:flex;flex-direction:column;gap:2px;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--lijn);border-radius:12px;background:var(--wit);font:inherit;color:var(--inkt);text-align:left;cursor:pointer}
.tk-lijst button span{font-size:.85rem;color:var(--zacht);font-variant-numeric:tabular-nums}
.terug-rand{fill:none;stroke:#FFFDF8;stroke-width:calc(var(--px,1) * 7.5px);stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.terug{fill:none;stroke:#23301F;stroke-width:calc(var(--px,1) * 4px);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:calc(var(--px,1) * 9px) calc(var(--px,1) * 7px)}
.vd-stap{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;text-align:left;font:inherit;color:inherit;cursor:pointer}
.vd-stap b{display:block}
/* "Onderweg" als chips met het symbool van de kaart (review 9-10, C3) */
.opchips{display:flex;flex-wrap:wrap;gap:8px;white-space:normal;margin:2px 0 8px}
.opchip{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:3px 13px 3px 6px;border-radius:999px;background:var(--wit);border:1px solid var(--lijn);font:inherit;font-size:.9rem;font-weight:600;color:var(--inkt);text-align:left;cursor:pointer}
.opchip::after{content:"";position:absolute;inset:-4px}
.opchip svg{flex:none;width:26px;height:26px}
.opchip .pg{fill:none;stroke:#fff;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.opchip .pg .vul{fill:#fff;stroke:none}
.opchip.plat{cursor:default;color:var(--zacht);font-weight:500}
.opchip.plat::after{display:none}
.opchip:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.opnoten{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:4px;font-size:.88rem;color:var(--zacht);white-space:normal}
.opnoten b{color:var(--inkt)}
.knoprij{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.focus-ring{fill:rgba(201,151,59,.16);stroke:#C9973B;stroke-width:2.4px;pointer-events:none;animation:focusPuls 1.6s ease-in-out 3}
.focus-ring.in{fill:none;stroke-width:1.4px}
@keyframes focusPuls{0%,100%{opacity:1}50%{opacity:.4}}
/* een gezochte plek springt in beeld en zendt twee golven uit; een gezochte weg of rivier gloeit over zijn hele lengte (10-10) */
.focus .sprong{transform-box:fill-box;transform-origin:center;animation:focusSprong .55s cubic-bezier(.3,1.7,.5,1) both}
@keyframes focusSprong{0%{transform:scale(0)}100%{transform:scale(1)}}
.focus-golf{fill:none;stroke:#C9973B;stroke-width:2.4px;transform-box:fill-box;transform-origin:center;opacity:0;pointer-events:none;animation:focusGolf 1.3s ease-out .45s 2}
@keyframes focusGolf{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
.focus-lijn{fill:none;stroke:#FFF3CF;stroke-width:calc(var(--px,1) * 3px);stroke-linecap:round;stroke-linejoin:round;pointer-events:none;animation:lijnIn .5s ease-out both}
.focus-lijn.gloed{stroke:#C9973B;stroke-width:calc(var(--px,1) * 11px);opacity:.5;animation:lijnIn .5s ease-out both,lijnGloed 1.6s ease-in-out .5s 3}
@keyframes lijnIn{from{opacity:0}}
@keyframes lijnGloed{0%,100%{opacity:.5}50%{opacity:.18}}
.focus-naam{font:800 12.5px Figtree,system-ui,sans-serif;fill:#3D2E0A;stroke:#FFFDF8;stroke-width:3.5px;stroke-linejoin:round;paint-order:stroke;text-anchor:middle;pointer-events:none}
@media (prefers-reduced-motion:reduce){.focus-ring,.focus .sprong,.focus-lijn,.focus-lijn.gloed{animation:none}.focus-golf{display:none}}
/* ouderslot (E10): een eigen laag boven alles, ook boven een open blad */
#slot{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(20,28,18,.62)}
.slotpaneel{width:min(100%,420px);background:var(--zand);border-radius:20px;padding:22px 20px 20px;box-shadow:0 18px 50px rgba(20,28,18,.4)}
.slotpaneel h1{margin:0 0 4px;font-size:1.5rem}
.slotform{margin-top:14px}
.slotvraag{display:block;font-family:var(--kop);font-weight:700;font-size:1.5rem;margin:0 0 10px}
.slotform input{width:100%;min-height:56px;border:2px solid var(--lijn);border-radius:12px;padding:0 14px;font:inherit;font-size:1.4rem;background:var(--wit);color:var(--inkt)}
.slotform input:focus-visible{outline:3px solid var(--goud);outline-offset:1px;border-color:var(--bos)}
.slotmeld{min-height:1.5em;margin:8px 0 6px;color:var(--terra);font-weight:600}
@media print{#slot{display:none!important}}
/* spelers (review 9-10, E1) */
#profielknop{margin-left:auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 7px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;max-width:48%}
#profielknop[hidden]{display:none}
#profielknop span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#profielknop:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
/* zoeken door de hele app (wens Niek 10-10): het vergrootglas rechts in de kopbalk opent een eigen scherm */
#zoekknop{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0 -8px 0 auto;border:0;background:none;color:#fff;border-radius:12px;cursor:pointer}
#profielknop:not([hidden]) ~ #zoekknop{margin-left:-4px}
#zoekknop svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#zoekknop:focus-visible{outline:3px solid var(--goud);outline-offset:-2px}
html.zoekt,html.zoekt body{overflow:hidden}
#zoeklaag{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;background:var(--zand)}
#zoeklaag[hidden]{display:none}
.zl-kop{flex:none;display:flex;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 8px 6px;background:var(--bosvlak)}
.zl-terug{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:#fff;border-radius:12px;cursor:pointer}
.zl-terug svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zl-terug:focus-visible{outline:3px solid var(--goud);outline-offset:-2px}
.zl-veld{flex:1;min-width:0;display:flex;align-items:center;height:44px;background:var(--wit);border-radius:12px}
.zl-veld:focus-within{box-shadow:0 0 0 2px var(--goud)}
#zl-invoer{flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0 8px 0 9px;font:inherit;font-size:1rem;color:var(--inkt);-webkit-appearance:none;appearance:none;outline:none;border-radius:12px}
#zl-invoer::-webkit-search-cancel-button,#zl-invoer::-webkit-search-decoration{-webkit-appearance:none;display:none}
#zl-invoer::placeholder{color:var(--zacht);opacity:.9}
.zl-inhoud{flex:1;overflow:auto;overscroll-behavior:contain;padding:6px 16px calc(24px + var(--onder));width:100%;max-width:680px;margin:0 auto}
.zl-hint{color:var(--zacht);margin:14px 2px}
.zl-kopje{font-family:Figtree,system-ui,sans-serif;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--salie-tekst);margin:18px 2px 6px}
.zl-voorbeelden{display:flex;flex-wrap:wrap;gap:0}
.zl-voorbeelden .chip{border:0;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;min-height:36px;padding:0 14px;color:var(--inkt)}
.zl-lijst{list-style:none;margin:0;padding:0;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.zl-lijst li+li{border-top:1px solid var(--lijn)}
.zl-rij{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:9px 12px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.zl-rij:active{background:var(--goudtint)}
@media (hover:hover){.zl-rij:hover{background:var(--goudtint)}}
.zl-rij:focus-visible{outline:3px solid var(--goud);outline-offset:-3px}
.zl-rij>svg{flex:none;width:30px;height:30px}
.zl-rij .pg{fill:none;stroke:#fff;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.zl-rij .pg .vul{fill:#fff;stroke:none}
.zl-rij>img{flex:none;width:52px;height:38px;object-fit:contain;background:#FFFDF8;border-radius:8px}
.zl-cat{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--goudtint);color:var(--bos)}
.zl-cat svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zl-tekst{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.zl-titel{font-weight:600;color:var(--inkt);overflow-wrap:anywhere}
.zl-titel b{font-weight:800}
.zl-onder{font-size:.84rem;color:var(--zacht);overflow-wrap:anywhere}
.zl-onder b{color:var(--inkt);font-weight:700}
.zl-meer{margin:8px 2px 0;font-size:.9rem}
/* waar een treffer heen ging, licht even op */
.zl-licht{border-radius:10px;animation:zlLicht 2.4s ease-out}
@keyframes zlLicht{0%,40%{box-shadow:0 0 0 3px var(--goud),0 0 0 10px var(--goudtint)}100%{box-shadow:0 0 0 3px transparent,0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.zl-licht{animation:none;box-shadow:0 0 0 3px var(--goud)}}
@media print{#zoekknop,#zoeklaag{display:none!important}}
.avatar{flex:none;display:inline-grid;place-items:center;border-radius:50%;background:var(--k,var(--bosvlak));color:#fff;overflow:hidden;font-family:var(--kop);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.avatar img{width:100%;height:100%;object-fit:contain;background:#FFFDF8;padding:12%}
.avatar b{font-size:.95em;line-height:1}
.spelerrij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;color:var(--zacht)}
.spelerrij b{color:var(--inkt)}
.splijst{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:8px}
.sprij{display:flex;align-items:center;gap:8px}
.spkies{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border:1.5px solid var(--lijn);border-radius:14px;background:var(--wit);font:inherit;text-align:left;cursor:pointer;min-height:60px}
.spkies[aria-pressed=true]{border-color:var(--bos);background:#EEF2E8}
.spkies .sptekst{display:flex;flex-direction:column;min-width:0}
.spkies b{font-family:var(--kop);font-size:1.05rem}
.spkies small{color:var(--zacht)}
.spform .splabel{display:block;font-weight:700;margin:14px 0 6px}
.spform input[type=text]{width:100%;min-height:46px;border:1.5px solid var(--lijn);border-radius:12px;padding:0 12px;font:inherit;background:var(--wit);color:var(--inkt)}
.spform input[type=text]:focus-visible{outline:3px solid var(--goud);outline-offset:1px;border-color:var(--bos)}
.spkleuren{display:flex;gap:10px;flex-wrap:wrap}
.spkleur{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;cursor:pointer}
.spkleur input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.spkleur i{width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--lijn)}
.spkleur input:checked + i{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--inkt)}
.spkleur input:focus-visible + i{outline:3px solid var(--goud);outline-offset:3px}
.spdieren{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.spdier{position:relative;display:block;cursor:pointer}
.spdier input{position:absolute;inset:0;z-index:1;opacity:0;margin:0;cursor:pointer}
.spdier img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--wit);border:2px solid var(--lijn);border-radius:12px;padding:3px}
.spdier input:checked + img{border-color:var(--bos);box-shadow:0 0 0 2px var(--bos)}
.spdier input:focus-visible + img{outline:3px solid var(--goud);outline-offset:2px}
.spkind{margin-top:14px}
/* mijn waarnemingen, bewaren en het reisverslag (review 9-10, D1 tot en met D4) */
.waarnrij{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;margin:12px 0 0}
.waarnnoot{font-size:.8rem;margin:0 0 12px}
.schakel{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer}
.schakel input{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.schakel input:checked + .schak{background:var(--bosvlak)}
.schakel input:checked + .schak::after{transform:translateX(14px)}
.schakel input:focus-visible + .schak{outline:3px solid var(--goud);outline-offset:2px}
.waarnkaart{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;margin-top:14px}
.waarnkaart b{font-family:var(--kop);color:var(--bos)}
.waarnkaart.goud{background:var(--goudtint);border-color:var(--goudrand)}
.waarnsamen{margin-top:14px}
.wdag{font-size:1.05rem;margin:22px 0 8px}
.wlijst{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wrij{display:flex;align-items:center;gap:4px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px}
.wmain{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;background:none;text-align:left;cursor:pointer;font:inherit}
.wmain img{flex:none;width:64px;height:46px;object-fit:contain;border-radius:8px}
.wmain .t{display:flex;flex-direction:column;min-width:0}
.wmain .t span{font-size:.85rem;color:var(--zacht)}
.wweg{position:relative;flex:none;width:36px;height:36px;margin-right:6px;border:0;border-radius:50%;background:none;color:var(--zacht);font-size:1.4rem;line-height:1;cursor:pointer}
.wweg::after{content:"";position:absolute;inset:-4px}
.wweg:focus-visible,.wmain:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.soortwaarn{margin:12px 0}
.soortwaarn>b{font-family:var(--kop);color:var(--bos)}
.wlijst.klein{gap:0;margin:6px 0 10px}
.wlijst.klein li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px solid var(--lijn);font-size:.9rem}
.wlijst.klein li:last-child{border-bottom:0}
.wlijst.klein .wweg{margin-right:0}
.bewaarblok{margin-top:22px}
.bewaarblok>b{font-family:var(--kop);color:var(--bos)}
/* het reisverslag */
.verslag .sub{margin:4px 0 0}
.vtegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:16px 0 8px}
.vtegels div{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:12px;text-align:center}
.vtegels b{display:block;font-family:var(--kop);font-size:2rem;line-height:1;color:var(--bos)}
.vtegels span{font-size:.82rem;color:var(--zacht)}
.vgroepen{margin:0 0 4px;color:var(--zacht);font-size:.92rem}
.vknoppen{margin:14px 0 6px}
.verslagbeeld{margin:12px 0}
.verslagbeeld img{display:block;width:100%;max-width:420px;height:auto;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.vdag{margin-top:22px;break-inside:avoid}
.vdag h2{font-size:1.1rem;margin:0 0 8px}
.vdag h2 span{font-family:Figtree,system-ui,sans-serif;font-weight:600;font-size:.9rem;color:var(--zacht)}
.vsoorten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vsoorten li{display:flex;align-items:center;gap:8px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:6px 8px;break-inside:avoid}
.vsoorten img{flex:none;width:52px;height:38px;object-fit:contain}
.vsoorten li>span{min-width:0}
.vsoorten b{display:block;font-size:.88rem;line-height:1.2;overflow-wrap:anywhere}
.vsoorten b i{font-style:normal;color:var(--zacht);font-weight:600}
.vsoorten small{display:block;color:var(--zacht);font-size:.74rem}
.vvoet{margin:26px 0 0;text-align:center;color:var(--zacht);font-size:.8rem}
/* het dagboek en het aanpassen van een verblijf (14-10) */
.dagboekblok{display:grid;gap:8px;margin:14px 0}
.dagboekblok input[type=date],.verblijfform input[type=text]{font:inherit;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:12px;background:var(--wit);color:var(--inkt);max-width:100%}
.dagboekblok textarea{font:inherit;line-height:1.5;width:100%;box-sizing:border-box;min-height:12rem;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:14px;background:var(--wit);color:var(--inkt);resize:vertical}
.dagboekblok textarea:focus-visible,.dagboekblok input:focus-visible,.verblijfform input:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.vdagboek{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:10px 14px;margin:0 0 10px;break-inside:avoid}
.vdagboek p{margin:0 0 8px;line-height:1.5;overflow-wrap:anywhere}
.vdagboek .vdagdeel{margin:0}
.verblijfform{display:grid;gap:8px;margin-top:8px}
.verblijfform input[type=text]{width:100%;box-sizing:border-box}
.vinkrij{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.vinkrij input{margin-top:3px;flex:none}
/* op de kaart: de eigen waarnemingen */
.wn{cursor:pointer}
.wn-raak{fill:transparent}
.wn-m{fill:#C9973B;stroke:#FFFDF8;stroke-width:1.8px}
.wn-o{fill:#fff;pointer-events:none}
.wn-t{display:none;font-family:Figtree,Arial,sans-serif;font-weight:700;font-size:10.5px;fill:#33291F;paint-order:stroke;stroke:#FFFDF8;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.z-diep .wn-t{display:block}
@media print{
  #balk,#tabs,#toast,#nieuweversie,.vknoppen,#blad{display:none!important}
  body{background:#fff;padding:0}
  main{max-width:none;padding:0}
  .vtegels div,.vsoorten li{border-color:#ccc}
  .vdag{break-inside:avoid}
  .verslagbeeld{display:none}
  .vdagdeel,.vdagboek .linkknop{display:none!important}
}
/* vóór de reis: hoe lang nog en wat je regelt */
.voorbereiding{margin-top:18px}
.voorbereiding h3{font-size:1.25rem}
.vb-lijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vb-lijst li{display:flex;gap:12px;align-items:flex-start}
.vb-lijst span{display:flex;flex-direction:column}
.vb-lijst small{color:var(--zacht);font-size:.84rem}
.vb-lijst a{color:var(--bos)}
.vb-vink{position:relative;flex:none;width:26px;height:26px;border-radius:7px;border:2px solid var(--salie);background:var(--wit);cursor:pointer;margin-top:1px;padding:0}
.vb-vink::after{content:"";position:absolute;inset:-9px}
.vb-vink[aria-pressed=true]{background:var(--bosvlak);border-color:var(--bosvlak)}
.vb-vink[aria-pressed=true]::before{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:.95rem}
.vb-vink:disabled{cursor:default}
.stops{list-style:none;margin:0;padding:0;position:relative}
.stops li{position:relative;padding:0 0 14px 34px}
.stops li::before{content:"";position:absolute;left:11px;top:22px;bottom:-2px;width:2px;background:var(--lijn)}
.stops li:last-child::before{display:none}
.stops .nr{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--goud);color:var(--opgoud);font-weight:700;font-size:.8rem;display:grid;place-items:center}
.stops .poort .nr{background:var(--salie);border-radius:6px}
.stops .buiten .nr{background:var(--zand);border:2px solid var(--salie)}
.stops a{text-decoration:none;display:block}
.stops b{font-family:var(--kop);font-size:1.1rem;color:var(--bos)}
.stops .meta{display:block;font-size:.88rem;color:var(--zacht)}
.dagen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dagen a{display:flex;gap:12px;align-items:center;text-decoration:none;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:11px 14px}
.dagen .d{flex:none;min-width:46px;font-family:var(--kop);font-weight:700;color:var(--bos);font-size:.95rem;line-height:1.1}
.dagen .d small{display:block;font-family:Figtree,system-ui;font-size:.7rem;font-weight:600;color:var(--zacht);text-transform:uppercase;letter-spacing:.06em}
.dagen .t{flex:1}.dagen .t b{display:block}.dagen .t span{font-size:.85rem;color:var(--zacht)}
.dagen a.nu{border-color:var(--goud);background:var(--goudtint)}
/* welkomstscherm: drie stappen en de voorbeeldreis (review 9-10, A12) */
.welkom .lede{font-size:1.06rem;color:var(--zacht);margin:8px 0 0;max-width:40em}
.wk-snel{margin:6px 0 0}
.linkknop{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--bos);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkknop:focus-visible{outline:3px solid var(--goud);outline-offset:2px;border-radius:4px}
.stappen{list-style:none;margin:22px 0 0;padding:0}
.stappen>li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding-bottom:22px}
.stappen>li::before{content:"";position:absolute;left:14px;top:36px;bottom:6px;width:2px;background:var(--lijn)}
.stappen>li:last-child::before{display:none}
.stapnr{width:30px;height:30px;border-radius:50%;background:var(--goud);color:var(--opgoud);font-family:var(--kop);font-weight:700;display:grid;place-items:center}
.stappen>li.klaar .stapnr{background:var(--bosvlak);color:#fff}
.stappen h2{font-size:1.1rem;margin:4px 0 6px}
.stappen p{margin:0 0 10px}
.linkrij{display:flex;gap:8px}
.linkrij input{flex:1;min-width:0;min-height:46px;border:1.5px solid var(--lijn);border-radius:12px;padding:0 12px;font:inherit;background:var(--wit);color:var(--inkt)}
.linkrij input:focus-visible{outline:3px solid var(--goud);outline-offset:1px;border-color:var(--bos)}
details.bestand{margin-top:6px}
details.bestand summary{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--bos);cursor:pointer}
.welkom input[type=file]{width:100%;margin:4px 0 0;font:inherit}
.voorbeeldblok{background:var(--bosvlak);color:#fff;border-radius:16px;padding:18px 16px}
.voorbeeldblok h2{color:#fff;margin:0 0 6px;font-size:1.25rem}
.voorbeeldblok p{color:#E9EFE6}
.voorbeeldblok .klein{font-size:.9rem;margin:14px 0 0}
.voorbeeldblok a{color:#E8D49B;font-weight:700;white-space:nowrap}
.snel{display:flex;gap:8px;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.voorbeeldbalk{background:var(--goudtint);border:1px solid var(--goudrand);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.voorbeeldbalk p{margin:0 0 10px}
.voorbeeldbalk .knoppen{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.iostip{margin-top:14px}
.iostip p{margin:0 0 10px}
/* meldingen, recensieverzoek en "Vraag het Niek" (review 9-10, B8 tot en met B10) */
.blok.melding{border-left:4px solid var(--terra);margin-top:14px}
.blok.melding .oog{color:var(--terra);margin-bottom:8px}
.meldingen{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.meldingen p{margin:0 0 3px}
.meldingen small{display:block;color:var(--zacht);font-size:.8rem}
.meldingen small a{color:var(--bos)}
.recensieblok{margin-top:14px;background:var(--goudtint);border-color:var(--goudrand)}
.recensieblok h3{margin-bottom:6px}
.recensieblok .knoppen{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.vraagniek{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vraagniek .stil{font-size:.85rem}

/* dag */
.dagnav{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 14px;font-size:.9rem}
.dagnav a{color:var(--bos);font-weight:600;text-decoration:none;padding:8px 0}
.dagnav{gap:8px}.dagnav a.dagknop{padding:9px 14px;white-space:nowrap}
.dagkop h1{font-size:1.8rem}
.dagkop .datum{color:var(--zacht);margin-top:4px}
.dag .minikaart{display:block;width:100%;height:auto;margin:16px 0 4px;border-radius:12px;border:1px solid var(--lijn)}
.dag .naarkaart{display:block;text-align:right;font-weight:600;font-size:.9rem;color:var(--bos);text-decoration:none;margin-bottom:6px}
.sectie{margin-top:20px}
.sectie>h2{font-size:1rem;margin:0 0 8px;color:var(--bos);text-transform:uppercase;letter-spacing:.07em;font-family:Figtree,system-ui;font-weight:700}
.sectie .inhoud{white-space:pre-line}
.rit-kop{display:block;font-weight:700;margin:8px 0 2px}
.onderweg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.onderweg li{background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:3px 11px;font-size:.88rem}
.tipblok{background:var(--goudtint);border-radius:12px;padding:12px 14px}
.tipblok b{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#7E6119;margin-bottom:4px}
.slaap{display:grid;gap:10px}
.slaap img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--lijn)}
.slaap .tekst{white-space:normal}
.kamplink{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none}
.kamplink b{font-family:var(--kop);color:var(--bos)}

/* kamp en sheet */
.kampkop .kopsoort{display:inline-block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--salie-tekst)}
.kamp h1{margin:4px 0 6px}
.kamp .citaat{border-left:3px solid var(--goud);padding:2px 0 2px 14px;color:var(--zacht);font:italic 400 1.06rem/1.55 'Source Serif 4',Georgia,serif;margin:10px 0}
.faciliteiten{columns:1;padding-left:18px;margin:6px 0 0}
@media(min-width:520px){.faciliteiten{columns:2}}
#blad{position:fixed;inset:0;z-index:50;background:rgba(35,48,31,.42);display:flex;align-items:flex-end;justify-content:center}
#blad[hidden]{display:none}
#blad .paneel{overscroll-behavior:contain;width:100%;max-width:680px;max-height:84dvh;overflow:auto;background:var(--zand);border-radius:20px 20px 0 0;padding:10px 18px calc(22px + var(--onder));box-shadow:0 -8px 30px rgba(0,0,0,.22)}
#blad .greep{width:44px;height:5px;border-radius:3px;background:var(--lijn);margin:0 auto 12px;position:relative}
#blad .greep::after{content:"";position:absolute;left:-40px;right:-40px;top:-10px;bottom:-14px}
#blad .sluit{float:right;border:0;background:none;font-size:1.6rem;line-height:1;color:var(--zacht);padding:2px 6px}
#blad .paneel img.groot{display:block;width:min(100%,360px);height:min(210px,30dvh);object-fit:contain;margin:6px auto 12px;background:var(--wit);border-radius:14px}
/* width:max-content: zonder dat krijgt een vak met left:50% hooguit de helft van het scherm als breedte en breekt hij "Afrikaanse olifant: gezien" in drie regels naast de knop */
#toast{position:fixed;left:50%;bottom:calc(var(--nav) + var(--onder) + 16px);transform:translateX(-50%);z-index:60;background:var(--inkt);color:#fff;border-radius:22px;padding:9px 18px;font-size:.9rem;width:max-content;max-width:92vw;text-align:center;display:flex;align-items:center;justify-content:center;gap:12px}
#toast button{flex:none;border:0;background:none;color:#F1D79A;font-weight:700;padding:6px 2px;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#toast[hidden]{display:none}
/* de volledige app: het betaalblad en het codeveld (12-10) */
.slotlijst{margin:12px 0 14px;padding-left:20px}
.slotlijst li{margin:5px 0}
.slotlijst.keuze{list-style:none;padding:0}
.slotlijst.keuze .knop{width:100%;flex-wrap:wrap;text-align:center;padding:8px 16px}
.slotlijst.keuze small{font-weight:500;opacity:.75}
.slotprijs{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.slotprijs b{font:700 1.5rem var(--kop)}
.codeform{margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.coderij{display:flex;gap:8px;margin-top:8px}
.coderij input{flex:1 1 auto;min-width:0;min-height:46px;padding:0 14px;border:1.5px solid var(--vinkrand);border-radius:12px;background:var(--wit);color:var(--inkt);font:700 1.05rem/1 var(--kop);letter-spacing:.08em;text-transform:uppercase}
.coderij input:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.codemeld{min-height:1.4em;margin:8px 0 0;font-size:.9rem;color:var(--terra);font-weight:600}

/* een nieuwe versie van de app staat klaar (12-10): onder de kopbalk, blijft staan tot je kiest; onder bladen en het zoekscherm */
#nieuweversie{position:fixed;left:50%;top:calc(var(--balk) + env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:40;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;width:max-content;max-width:calc(100vw - 24px);padding:8px 10px 8px 16px;background:var(--wit);color:var(--inkt);border:1px solid var(--goudrand);border-radius:14px;box-shadow:0 8px 24px rgba(35,48,31,.18);font-size:.92rem}
#nieuweversie .later{border:0;background:none;color:var(--zacht);font-weight:600;padding:6px 4px;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* kaart */
.kaartscherm-vlak{position:fixed;inset:calc(var(--balk) + env(safe-area-inset-top,0px)) 0 calc(var(--nav) + var(--onder)) 0;display:flex;flex-direction:column;background:#EFE9DA}
.chips{flex:none;display:flex;gap:6px;overflow-x:auto;padding:8px 12px;background:var(--wit);border-bottom:1px solid var(--lijn);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:1.5px solid var(--lijn);background:var(--wit);border-radius:999px;padding:5px 13px;font-weight:600;font-size:.88rem;cursor:pointer;white-space:nowrap}
.chips button[aria-pressed=true]{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
.ritkeuze{flex:none;display:flex;gap:6px;padding:6px 12px;background:var(--wit);border-bottom:1px solid var(--lijn);font-size:.85rem;flex-wrap:wrap;min-height:38px;align-items:center}
.ritkeuze button{border:1.5px solid var(--lijn);background:var(--wit);border-radius:999px;padding:3px 11px;font-size:.82rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center}
.ritkeuze button[aria-pressed=false]{opacity:.45}
.ritkeuze .km{margin-left:auto;color:var(--zacht);font-weight:600}
.kaartvlak{flex:1;position:relative;touch-action:none;overflow:hidden;cursor:grab;min-height:0}
.kaartvlak:active{cursor:grabbing}
.kaartsvg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.kaartknoppen{position:absolute;right:12px;bottom:14px;display:grid;gap:8px;z-index:5}
.kaartknoppen button{width:44px;height:44px;border-radius:12px;border:1px solid var(--lijn);background:var(--wit);font-size:1.4rem;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.14);display:grid;place-items:center;color:var(--bos)}
.kaartknoppen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.legenda{position:absolute;left:10px;bottom:12px;z-index:4;background:rgba(255,253,248,.92);border:1px solid var(--lijn);border-radius:10px;padding:6px 10px;font-size:.74rem;line-height:1.6;color:var(--zacht);pointer-events:none}
.legenda{max-width:calc(100% - 84px)}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.legenda i.p{border-radius:2px}
.legenda .lg-rij{display:flex;flex-wrap:wrap;gap:0 10px}
.legenda .lg{white-space:nowrap}
.legenda .lg-bron{display:block;font-size:.62rem;color:#6B6252;margin-top:1px}
/* zoeken op de kaart (wens Niek 10-10): een balk bovenin, suggesties eronder */
.kaartzoek{position:absolute;top:10px;left:10px;right:10px;z-index:7;max-width:440px;cursor:default}
.kz-veld{display:flex;align-items:center;height:44px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.kz-veld:focus-within{border-color:var(--goud);box-shadow:0 0 0 2px var(--goud),0 2px 8px rgba(0,0,0,.14)}
.kz-glas{flex:none;width:20px;height:20px;margin-left:12px;fill:none;stroke:var(--zacht);stroke-width:2.2;stroke-linecap:round}
#kz-invoer{flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0 8px 0 9px;font:inherit;font-size:1rem;color:var(--inkt);-webkit-appearance:none;appearance:none;outline:none;border-radius:12px}
#kz-invoer::-webkit-search-cancel-button,#kz-invoer::-webkit-search-decoration{-webkit-appearance:none;display:none}
#kz-invoer::placeholder{color:var(--zacht);opacity:.9}
.kz-wis{flex:none;display:grid;place-items:center;width:44px;height:42px;border:0;background:none;color:var(--zacht);cursor:pointer;border-radius:12px}
.kz-wis[hidden]{display:none}
.kz-wis svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.kz-wis:focus-visible{outline:3px solid var(--goud);outline-offset:-3px}
.kz-lijst{list-style:none;margin:6px 0 0;padding:4px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);max-height:46vh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.kz-lijst[hidden]{display:none}
.kz-optie{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px;border-radius:9px;cursor:pointer}
.kz-optie svg{flex:none;width:28px;height:28px}
.kz-optie .pg{fill:none;stroke:#fff;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.kz-optie .pg .vul{fill:#fff;stroke:none}
.kz-optie[aria-selected=true]{background:var(--goudtint)}
@media (hover:hover){.kz-optie:hover{background:var(--goudtint)}}
.kz-tekst{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.kz-naam{color:var(--inkt);overflow-wrap:anywhere}
.kz-naam b{font-weight:800}
.kz-soort{font-size:.8rem;color:var(--zacht)}
.kz-kop{padding:6px 8px 2px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--salie-tekst)}
.kz-niets{padding:10px 8px;color:var(--zacht);font-size:.9rem}

/* svg-lagen (gedeeld door grote en kleine kaart) */
.zee{fill:#EFE9DA}
.park{fill:#DFE7D0;stroke:#8EA47E;stroke-width:calc(var(--px,1) * 1.4px);stroke-dasharray:calc(var(--px,1) * 5px) calc(var(--px,1) * 3px);stroke-linejoin:round}
.kaartsvg.z-diep .park{stroke-dasharray:none}
.kaartsvg .relief{display:none;opacity:.5;pointer-events:none}
.kaartsvg.met-relief .relief{display:inline}
html.nacht .kaartsvg .relief{opacity:.38}
.rivier{fill:none;stroke:#A9C7D2;stroke-width:calc(var(--px,1) * 1.4px);stroke-linecap:round;stroke-linejoin:round}
.weg-s{fill:none;stroke:#B9AB8D;stroke-width:max(calc(var(--px,1) * 1.1px), .0036px);stroke-linecap:round;stroke-linejoin:round}
.weg-t{fill:none;stroke:#B9AB8D;stroke-width:max(calc(var(--px,1) * 1.1px), .0036px);stroke-linecap:round;stroke-linejoin:round}
.weg-h{fill:none;stroke:#7E6F55;stroke-width:max(calc(var(--px,1) * 2.2px), .0072px);stroke-linecap:round;stroke-linejoin:round}
.rit-rand{fill:none;stroke:#FFFDF8;stroke-width:calc(var(--px,1) * 7px);stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.rit{fill:none;stroke-width:calc(var(--px,1) * 4px);stroke-linecap:round;stroke-linejoin:round}
.wegnr{font-family:Figtree,Arial,sans-serif;font-weight:700;font-size:calc(var(--px,1) * 11px);fill:#33291F;text-anchor:middle;paint-order:stroke;stroke:#FFFDF8;stroke-width:calc(var(--px,1) * 3.4px);stroke-linejoin:round}
.pl .mk{fill:#5F7D63;stroke:#FFFDF8;stroke-width:calc(var(--px,1) * 1.5px)}
.pl.poort .mk{fill:#8A7D68}
.pl.trip .mk{fill:var(--goud)}
.pl .raak{fill:transparent;pointer-events:all}
.pl .naam{font-family:Figtree,Arial,sans-serif;font-weight:600;font-size:calc(var(--px,1) * 11px);fill:#33291F;paint-order:stroke;stroke:#FFFDF8;stroke-width:calc(var(--px,1) * 3.2px);stroke-linejoin:round;pointer-events:none}
.pl.trip .naam{font-weight:700;font-size:calc(var(--px,1) * 13px)}
.pl .nr{font-family:Figtree,Arial,sans-serif;font-weight:700;font-size:calc(var(--px,1) * 9.5px);fill:#fff;text-anchor:middle;pointer-events:none}
.pl.trip .nr{fill:#23301F}
.kaartsvg:not(.z-na) .pl.poort:not(.trip) .naam{display:none}
.kaartsvg.z-ver .pl.kamp:not(.trip) .naam{display:none}
.ik-punt{fill:#2B7BE4;stroke:#fff;stroke-width:calc(var(--px,1) * 2px)}
.ik-ring{fill:rgba(43,123,228,.14);stroke:rgba(43,123,228,.5);stroke-width:calc(var(--px,1) * 1px)}
.minikaart .mk-trip{fill:var(--goud);stroke:#fff;stroke-width:calc(var(--px,1) * 1.4px)}
.minikaart .lbl-trip{font-family:Figtree,Arial,sans-serif;font-weight:700;font-size:calc(var(--px,1) * 11px);fill:#33291F;paint-order:stroke;stroke:#FFFDF8;stroke-width:calc(var(--px,1) * 3px);stroke-linejoin:round}

/* soorten */
.voortgang{margin:6px 0 4px}
.voortgang .balk{height:8px;border-radius:5px;background:var(--lijn);overflow:hidden}
.voortgang .balk>i{display:block;height:100%;background:var(--goud);border-radius:5px;transition:width .25s}
.voortgang .getal{display:flex;justify-content:space-between;font-size:.85rem;color:var(--zacht);margin-bottom:5px;font-weight:600}
.groepen{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.groepen::-webkit-scrollbar{display:none}
.groepen button{flex:none;border:1.5px solid var(--lijn);background:var(--wit);border-radius:12px;padding:6px 11px;text-align:left;cursor:pointer;min-height:44px}
.groepen button b{display:block;font-size:.88rem}.groepen button span{font-size:.76rem;color:var(--zacht)}
.groepen button[aria-pressed=true]{border-color:var(--bosvlak);background:var(--bosvlak);color:#fff}
.groepen button[aria-pressed=true] span{color:#DDE5D6}
.zoekrij{display:flex;gap:8px;margin-bottom:8px}
.zoekrij input[type=search]{flex:1;min-width:0;height:42px;border:1.5px solid var(--lijn);border-radius:12px;padding:0 12px;font:inherit;background:var(--wit)}
.zoekrij label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.82rem;color:var(--zacht);white-space:nowrap;cursor:pointer}
.zoekrij input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--bos)}
.sublabel{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--salie-tekst);margin:16px 0 4px}
.soorten{list-style:none;margin:0;padding:0}
.soort{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--lijn);cursor:pointer}
.soort .vink{position:relative;flex:none;width:30px;height:30px;border-radius:9px;border:2px solid var(--vinkrand);background:var(--wit);display:grid;place-items:center;color:transparent;font-weight:900;font-size:1.05rem;cursor:pointer}
.soort.gezien .vink{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
.soort img{flex:none;width:76px;height:54px;object-fit:contain;border-radius:8px;background:var(--wit)}
.soort .t{flex:1;min-width:0}
.soort b{display:block;font-weight:600;line-height:1.2}
.soort i{display:block;font-size:.84rem;color:var(--zacht)}
.soort .waar{display:block;font-size:.8rem;color:var(--zacht);margin-top:2px}
.soort.gezien b{color:var(--bos)}
.soort .infoknop{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--salie);background:var(--wit);color:var(--salie-tekst);font:italic 700 1rem Georgia,'Times New Roman',serif;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.soort .vink::after,.soort .infoknop::after{content:'';position:absolute;inset:-8px}
#blad .soortinfo{margin:10px 0}
#blad .leesknop{margin:0 0 6px}
#blad .leesknop[aria-pressed="true"]{background:var(--bosvlak);color:#fff}
#blad .tipblok.wist{margin:12px 0}
.soort .geluid{display:inline-block;vertical-align:-2px;margin-left:6px;color:var(--salie)}
.soort .geluid svg{display:block}
#blad .luister{margin:12px 0;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:12px;background:var(--wit)}
#blad .luister .knop small{font-weight:600;opacity:.75;margin-left:2px}
#blad .luister .knop[aria-pressed="true"]{background:var(--bosvlak);color:#fff}
#blad .luisternoot{margin:8px 0 0;font-size:.82rem;color:var(--zacht)}
#blad .luisternoot a{text-decoration:underline;text-underline-offset:2px}
#blad .luistervoet{margin:4px 0 0;font-size:.78rem;color:var(--zacht)}
#blad .soortwaar{margin:10px 0;color:var(--zacht)}
#blad .soortwaar b{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--salie-tekst);margin-right:6px}
.leeg{padding:30px 0;text-align:center;color:var(--zacht)}

/* bingo */
.bingopillen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}
.bingopillen button{width:100%;height:44px;border-radius:12px;border:1.5px solid var(--lijn);background:var(--wit);font-weight:700;cursor:pointer;position:relative}
.bingopillen button[aria-pressed=true]{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
.bingopillen button.klaar::after{content:"";position:absolute;right:4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--goud)}
.rooster{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vak{position:relative;aspect-ratio:1/1.12;border:1.5px solid var(--lijn);border-radius:12px;background:var(--wit);padding:4px 3px 3px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:pointer;overflow:hidden;font:inherit}
.vak img{width:100%;flex:1;min-height:0;object-fit:contain}
.vak span{font-size:.76rem;line-height:1.1;text-align:center;font-weight:600;padding-top:2px;max-width:100%;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.vak span.lang{font-size:.68rem}
.vak.aan{background:#E5EDDD;border-color:var(--bos)}
.vak.aan::after{content:"✓";position:absolute;right:3px;top:1px;color:var(--bos);font-weight:900;font-size:1rem}
.vak.aan img{opacity:.55}
.vak.lijn{background:var(--goudtint);border-color:var(--goud)}
/* de tekening staat op papierkleur; op een getinte tegel blijft anders een lichter vierkant om het dier staan */
.vak.aan img,.vak.lijn img{mix-blend-mode:multiply}
.bingobalk{display:flex;justify-content:space-between;align-items:center;margin:12px 0}
.bingoonder{margin:0 0 16px}
details.leegvak{margin-top:10px;background:var(--wit);border:1.5px solid var(--lijn);border-radius:14px;padding:0 16px}
details.leegvak summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;cursor:pointer;list-style:none}
details.leegvak summary::-webkit-details-marker{display:none}
details.leegvak summary::after{content:"";flex:none;width:9px;height:9px;border-right:2.5px solid var(--bos);border-bottom:2.5px solid var(--bos);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
details.leegvak[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details.leegvak summary:focus-visible{outline:3px solid var(--goud);outline-offset:2px;border-radius:10px}
details.leegvak p{margin:0 0 12px;color:var(--zacht)}
details.leegvak p b{color:var(--inkt)}
/* raad het dier (E6) */
.raadhints{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px}
.raadhints li{background:var(--wit);border:1.5px solid var(--lijn);border-radius:14px;padding:10px 14px 12px}
.raadhints li.nieuw{border-color:var(--goud);background:var(--goudtint)}
.raadhints .rn{display:block;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);margin-bottom:2px}
.raadopties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.raadoptie{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 12px;border:2px solid var(--lijn);border-radius:14px;background:var(--wit);font:inherit;color:inherit;cursor:pointer;min-height:140px}
.raadoptie img{width:100%;height:84px;object-fit:contain}
.raadoptie b{font-family:var(--kop);font-size:.95rem;line-height:1.15;text-align:center}
.raadoptie:disabled{cursor:default}
.raadoptie.fout{opacity:.45;border-style:dashed}
.raadoptie.fout img{filter:grayscale(1)}
.raadoptie.goed{border-color:var(--goud);background:var(--goudtint)}
.raadoptie.goed img{mix-blend-mode:multiply}
.raadoptie.uit{opacity:.55}
.raadoptie.goed::after,.raadoptie.fout::after{position:absolute;right:8px;top:4px;font-weight:900;font-size:1.1rem}
.raadoptie.goed::after{content:"✓";color:var(--bos)}
.raadoptie.fout::after{content:"✗";color:var(--terra)}
.raadoptie:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.sterren{color:var(--goud);letter-spacing:.12em;font-size:1.05rem;white-space:nowrap}
.quizrij .sterren{justify-self:end}
/* memory (E5) */
.memkeuze{display:flex;gap:8px;margin:12px 0}
.memkeuze button{flex:1;min-height:44px;border-radius:12px;border:1.5px solid var(--lijn);background:var(--wit);font:inherit;font-weight:700;cursor:pointer}
.memkeuze button[aria-pressed=true]{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
.memraster{--kol:4;--rij:calc(var(--n,12) / var(--kol));display:grid;grid-template-columns:repeat(var(--kol),minmax(0,1fr));gap:8px;margin:14px auto;
  /* het bord past binnen het scherm (18-10): de breedte volgt uit de hoogte die er over is, bij 12, 16 of 20 kaarten */
  max-width:calc(var(--kol) * ((100vh - 470px - (var(--rij) - 1) * 8px) / (var(--rij) * 1.25)) + (var(--kol) - 1) * 8px)}
@supports (height:100dvh){.memraster{max-width:calc(var(--kol) * ((100dvh - 470px - (var(--rij) - 1) * 8px) / (var(--rij) * 1.25)) + (var(--kol) - 1) * 8px)}}
/* op een tablet liggen de kaarten in twee rijen naast elkaar in plaats van in drie tot vijf onder elkaar */
@media (min-width:768px){.memraster[style*='--n:12']{--kol:6}.memraster[style*='--n:16']{--kol:8}.memraster[style*='--n:20']{--kol:10}}
.memkaart{position:relative;aspect-ratio:4/5;padding:0;border:0;background:none;perspective:700px;cursor:pointer;font:inherit;color:inherit}
.memkaart:focus-visible{outline:3px solid var(--goud);outline-offset:2px;border-radius:12px}
.mem-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s ease}
.memkaart.open .mem-in{transform:rotateY(180deg)}
.mem-rug,.mem-voor{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.mem-rug{background:var(--bosvlak) url(icoon.svg) center/58% no-repeat;border:2.5px solid var(--goud)}
.mem-voor{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;padding:6px 4px;background:#FFFDF8;border:2.5px solid var(--lijn)}
.mem-voor img{width:100%;max-height:100%;object-fit:contain}
.memkaart.gevonden .mem-voor{border-color:var(--goud);background:var(--goudtint)}
.memkaart.gevonden .mem-voor img{mix-blend-mode:multiply}
.memkaart.gevonden .mem-in{transform:rotateY(180deg)}
.membalk{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.memstand b{font-variant-numeric:tabular-nums}
.memmeld{min-height:1.4em;margin:0;color:var(--zacht)}
@media (prefers-reduced-motion:reduce){.mem-in{transition:none}}
/* de geluidenquiz (E4) */
/* herken een vogel (H2, 10-10): kenmerken kiezen, de lijst krimpt mee */
.herkenlink{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;margin:0 0 14px}
.herkenlink b{font-family:var(--kop);color:var(--bos)}
.hgroep{margin:16px 0 0;padding:0;border:0;min-width:0}
.hgroep legend{padding:0;margin-bottom:8px;font-weight:700;color:var(--inkt)}
.hgroep legend small{font-weight:500;color:var(--zacht);margin-left:4px}
.hchips{display:flex;flex-wrap:wrap;gap:8px}
.hchip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1.5px solid var(--lijn);border-radius:999px;background:var(--wit);font:inherit;font-size:.92rem;font-weight:600;color:var(--inkt);cursor:pointer}
.hchip.aan{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
.hchip.nul{opacity:.42}
.hchip:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.hstaal{display:inline-block;flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28)}
html.nacht .hchip.aan{background:var(--goud);border-color:var(--goud);color:var(--opgoud)}
.herkenbalk{position:sticky;bottom:calc(var(--nav) + var(--onder) + 8px);z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px;padding:6px 8px 6px 16px;min-height:52px;border-radius:999px;background:var(--bosvlak);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.hteller{font-size:1rem;font-variant-numeric:tabular-nums}
.herkenbalk .linkknop{color:#fff;padding:0 12px}
html.nacht .herkenbalk{background:var(--goud);color:var(--opgoud)}
html.nacht .herkenbalk .linkknop{color:var(--opgoud)}
.herkenlijst .waar{display:block;margin-top:2px}
.herkenregel{margin:10px 0;color:var(--inkt)}
.herkenregel b{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--salie-tekst);margin-right:6px}
/* geluiden van de nacht (F8, 10-10): een rij per dier met een ronde luisterknop */
.nachtlijst{list-style:none;margin:0 0 6px;padding:0;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.nachtrij{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px}
.nachtrij+.nachtrij{border-top:1px solid var(--lijn)}
.nr-beeld{display:grid;place-items:center;width:52px;height:38px}
.nr-beeld img{width:52px;height:38px;object-fit:contain;background:#FFFDF8;border-radius:8px}
.nr-maan{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#26362A;color:#E9E3D2}
.nr-maan svg{width:22px;height:22px;fill:currentColor}
.nr-tekst{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.nr-tekst>i{font-size:.82rem;color:var(--zacht)}
.nr-naam{display:block;padding:0;margin:0;border:0;background:none;font:inherit;color:var(--inkt);text-align:left;overflow-wrap:anywhere}
button.nr-naam{cursor:pointer;min-height:24px}
button.nr-naam b{text-decoration:underline;text-decoration-color:var(--lijn);text-underline-offset:3px}
button.nr-naam:focus-visible{outline:3px solid var(--goud);outline-offset:2px;border-radius:4px}
.nr-cred{margin-top:3px;font-size:.74rem;color:var(--zacht);overflow-wrap:anywhere}
.nr-cred a{text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.nr-speel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:56px;min-height:56px;border:0;border-radius:50%;background:var(--bosvlak);color:#fff;font:inherit;cursor:pointer}
.nr-speel .speelic{font-size:1.15rem;line-height:1}
.nr-speel small{font-size:.66rem;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}
.nr-speel[aria-pressed="true"]{background:var(--goud);color:var(--opgoud)}
.nr-speel:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
html.nacht .nr-speel[aria-pressed="false"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.quizluister{display:flex;width:100%;min-height:76px;font-size:1.25rem;margin:14px 0 6px}
.quizluister small{font-weight:600;opacity:.85}
.quizopties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.quizoptie{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 10px;min-height:132px;border:2px solid var(--lijn);border-radius:14px;background:var(--wit);font:inherit;color:inherit;cursor:pointer}
.quizoptie:disabled{cursor:default}
.quizoptie img{width:100%;height:70px;object-fit:contain}
.quizoptie b{font-family:var(--kop);font-size:.84rem;line-height:1.15;text-align:center;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.quizoptie.goed{border-color:var(--goud);background:var(--goudtint)}
.quizoptie.goed img,.quizoptie.uit img{mix-blend-mode:multiply}
.quizoptie.fout{border-color:var(--terra)}
.quizoptie.uit{opacity:.55}
.quizoptie.goed::after,.quizoptie.fout::after{position:absolute;right:6px;top:2px;font-weight:900;font-size:1.05rem}
.quizoptie.goed::after{content:"✓";color:var(--bos)}
.quizoptie.fout::after{content:"✗";color:var(--terra)}
.quizoptie:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.quizuitslag{background:var(--wit);border:1.5px solid var(--lijn);border-radius:14px;padding:12px 16px 14px;margin:6px 0 12px}
.quizuitslag.goed{border-color:var(--goud)}
.quizuitslag p{margin:0 0 10px}
.quizuitslag .knoprij{margin:4px 0 0}
.quizvoet{font-size:.84rem;margin-top:16px}
.quizscore{font-family:var(--kop);font-size:1.5rem;margin:10px 0 4px}
.quizscore b{font-size:2.6rem;color:var(--bos);margin-right:4px}
.quizlijst{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.quizrij{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:56px;padding:4px 12px 4px 6px;border:1.5px solid var(--lijn);border-radius:12px;background:var(--wit);font:inherit;color:inherit;text-align:left;cursor:pointer}
.quizrij img{width:64px;height:48px;object-fit:contain}
.quizrij b{font-family:var(--kop);font-size:.95rem}
.quizrij span{font-weight:700;font-size:.82rem;color:var(--zacht)}
.quizrij.goed{border-color:var(--goud)}
.quizrij.fout span{color:var(--terra)}
/* het stickerboek (E3): de tekening in een rondje met gouden rand; grijs en gestippeld zolang je het dier nog niet zag */
.stickerset{background:var(--wit);border:1.5px solid var(--lijn);border-radius:16px;padding:14px 14px 16px;margin:16px 0}
.stickerset.compleet{border-color:var(--goud);box-shadow:0 0 0 3px rgba(201,151,59,.2)}
.setkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.setkop h2{margin:0;font-size:1.2rem}
.setstand{flex:none;font-weight:700;font-size:.82rem;color:var(--zacht);font-variant-numeric:tabular-nums}
.stickerset.compleet .setstand{background:var(--goud);color:var(--opgoud);border-radius:999px;padding:4px 10px}
.setregel{margin:4px 0 12px;font-size:.92rem}
.stickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.stickerrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.sticker{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:center;cursor:pointer}
.sticker.leeg{cursor:default}
.sticker .rond{display:grid;place-items:center;width:100%;max-width:96px;aspect-ratio:1;border-radius:50%;background:#FFFDF8;border:3px solid var(--goud);box-shadow:0 2px 0 rgba(35,48,31,.12);overflow:hidden}
.sticker .rond img{width:84%;height:84%;object-fit:contain}
.sticker b{font-family:var(--kop);font-weight:700;font-size:.86rem;line-height:1.15;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.sticker.nog .rond{border:3px dashed var(--lijn);box-shadow:none;background:var(--zand)}
.sticker.nog .rond img{filter:grayscale(1);opacity:.4;mix-blend-mode:multiply}
.sticker.nog b{color:var(--zacht);font-weight:600}
.sticker.leeg .rond{border:3px dashed var(--lijn);box-shadow:none;background:var(--zand);font-family:var(--kop);font-size:1.9rem;font-weight:700;color:var(--zacht)}
.sticker.leeg b{color:var(--zacht);font-weight:600}
.sticker.klein .rond{max-width:none}
.sticker:focus-visible .rond{outline:3px solid var(--goud);outline-offset:2px}
.topslots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.topslots li{display:flex}
.topslots .sticker{width:100%}
.topnr{position:absolute;left:-2px;top:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--goud);color:var(--opgoud);font:700 .95rem/1 var(--kop);font-style:normal;box-shadow:0 0 0 2px #fff}
.topslots .sticker .rond{position:relative;overflow:visible}
.topslots .sticker .rond img{border-radius:50%}
.topkeuze{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0}
.sticker.gekozen .rond{border-color:var(--bos);box-shadow:0 0 0 3px rgba(46,75,47,.25)}
.vtop{margin:16px 0}
.vtop h2{margin:0 0 8px;font-size:1.2rem}
.vtop ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.vtop li{display:flex;align-items:center;gap:8px;background:var(--goudtint);border:1.5px solid var(--goud);border-radius:12px;padding:6px 10px;break-inside:avoid}
.vtop .topnr{position:static;flex:none}
.vtop li img{mix-blend-mode:multiply}
.vtop li b{font-family:var(--kop)}
.setchips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.setchip{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid var(--goud);background:var(--goudtint);color:var(--inkt);font-weight:700;font-size:.84rem;text-decoration:none}
.setchip:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
/* het feestje bij een bingo: rustig, goud, zonder geluid tenzij je dat aanzet */
#feest{position:fixed;left:0;right:0;top:calc(var(--balk,56px) + env(safe-area-inset-top,0px) + 56px);z-index:55;display:flex;justify-content:center;pointer-events:none}
.feestkaart{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 26px 16px;border-radius:22px;background:var(--wit);border:3px solid var(--goud);box-shadow:0 0 0 6px rgba(201,151,59,.22),0 14px 34px rgba(35,48,31,.22);animation:feestin .45s cubic-bezier(.2,.9,.3,1.1) both,feestuit .5s ease 3.05s forwards}
.feestbeeld{display:grid;place-items:center;width:104px;height:80px;margin-bottom:2px}
.feestbeeld img{max-width:100%;max-height:100%;object-fit:contain}
.feestkaart b{font-family:var(--kop);font-size:1.7rem;line-height:1.1;color:var(--bos)}
.feestkaart>span:last-child{color:var(--zacht);font-weight:600}
.glit{position:absolute;top:84px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--goud);opacity:0;animation:glit 2.6s ease-out var(--d) both}
.vak.nieuw{animation:glans 1.8s ease-out 1}
@keyframes feestin{from{opacity:0;transform:translateY(-14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes feestuit{to{opacity:0;transform:translateY(-8px)}}
@keyframes glit{0%{opacity:0;transform:translateY(40px)}25%{opacity:.85}100%{opacity:0;transform:translateY(-70px)}}
@keyframes glans{0%{box-shadow:0 0 0 0 rgba(201,151,59,.75)}60%{box-shadow:0 0 0 10px rgba(201,151,59,0)}100%{box-shadow:0 0 0 0 rgba(201,151,59,0)}}
@media (prefers-reduced-motion:reduce){.feestkaart{animation:feestuit .01s ease 3.5s forwards}.glit{display:none}.vak.nieuw{animation:none}}
.bingomeld{background:var(--goud);color:var(--opgoud);border-radius:14px;padding:12px 16px;font-family:var(--kop);font-weight:700;font-size:1.3rem;text-align:center;margin:12px 0}

/* info */
.tabel{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.tabel td,.tabel th{padding:6px 6px;border-bottom:1px solid var(--lijn);text-align:left;white-space:nowrap}
.tabel th{font-size:.78rem}
.tabel tr.nu td{background:var(--goudtint);font-weight:700}
.bel{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.bel:last-child{border-bottom:0}
.bel span:last-child{font-weight:600;color:var(--bos);white-space:nowrap}
.info-lijst{list-style:none;padding:0;margin:0}
.info-lijst.blok{padding:4px 16px}
.info-lijst li{padding:8px 0;border-bottom:1px solid var(--lijn)}
.info-lijst li:last-child{border-bottom:0}
.info-lijst small{display:block;color:var(--zacht)}
.voet{margin:28px 0 8px;font-size:.8rem;color:var(--zacht)}
[data-offlinestand]:empty{display:none}
.offline-kort{margin-top:14px}
.offline-klaar b{color:var(--bos)}
.maanden{margin-top:10px}
.maanden .tabel{display:block;max-width:100%;overflow-x:auto}
.maanden summary{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--bos);cursor:pointer}
.maanden[open] summary{margin-bottom:4px}
.doorlink{color:var(--bos);font-weight:700;text-underline-offset:3px}
.blok.nood{border-color:var(--terra);border-width:1.5px}
.bronnenlijst.blok{padding:2px 16px}
.bronnenlijst.blok li:first-child{border-top:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* kaartlagen: het paneel naast de zoomknoppen en de schakelaars */
.laagpaneel{position:absolute;right:64px;bottom:14px;z-index:6;width:min(230px,calc(100% - 84px));max-height:calc(100% - 28px);overflow:auto;background:rgba(255,253,248,.97);border:1px solid var(--lijn);border-radius:14px;padding:6px;box-shadow:0 4px 18px rgba(0,0,0,.2);display:grid;gap:1px;touch-action:pan-y;cursor:default}
.laagpaneel[hidden]{display:none}
.laagrij{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;border-radius:9px;padding:9px 8px;font:600 .9rem Figtree,Arial,sans-serif;color:var(--inkt);cursor:pointer;text-align:left}
.laagrij:active{background:rgba(0,0,0,.06)}
.laagrij .sw{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.laagrij .lt{flex:1}
.laagrij.alles{border-bottom:1px solid var(--lijn);border-radius:9px 9px 0 0;margin-bottom:3px;padding-left:12px}
.schak{flex:none;width:34px;height:20px;border-radius:999px;background:#CFC8B8;position:relative;transition:background .15s}
.schak::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.laagrij[aria-pressed=true] .schak{background:var(--bosvlak)}
.laagrij[aria-pressed=true] .schak::after{transform:translateX(14px)}
.kaartknoppen button[aria-expanded=true]{background:var(--bosvlak);color:#fff}

/* namen en plekken op de kaart (de tekst staat in kaarteenheden en schaalt via --px mee) */
.lbl-weg{font-family:Figtree,Arial,sans-serif;font-weight:700;font-size:calc(var(--px,1) * 10px);fill:#6F6250;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#FFFDF8;stroke-width:calc(var(--px,1) * 3px);stroke-linejoin:round;pointer-events:none}
.lbl-weg.h{font-size:calc(var(--px,1) * 11px);fill:#3E3326}
.lbl-riv{text-anchor:middle;dominant-baseline:central;font-family:Figtree,Arial,sans-serif;font-style:italic;font-weight:600;font-size:calc(var(--px,1) * 10.5px);letter-spacing:calc(var(--px,1) * .6px);fill:#3F7388;paint-order:stroke;stroke:#EAF1EC;stroke-width:calc(var(--px,1) * 2.6px);stroke-linejoin:round;pointer-events:none}
.poi .pm{stroke:#FFFDF8;stroke-width:1.6px}
.poi .pg{fill:none;stroke:#fff;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.poi .pg .vul{fill:#fff;stroke:none}
.poi .poinaam{font-family:Figtree,Arial,sans-serif;font-weight:600;font-size:10.5px;fill:#33291F;paint-order:stroke;stroke:#FFFDF8;stroke-width:3px;stroke-linejoin:round;pointer-events:none}

/* de plattegrond van een kamp (OpenStreetMap): de laag in de kaart, geen aanraakdoel. De knop "Alles over dit kamp" onder een dagblad heet .kamplink: zelfde naam deed die knop onaanraakbaar maken (8-10). */
g.kampkaart{pointer-events:none}
.kk-geb{fill:#D9CFB7;stroke:#A39573;stroke-width:calc(var(--px,1) * .8px);stroke-linejoin:round}
.kk-geb.g-verblijf{fill:#CBD8B6}
.kk-geb.g-rec{fill:#E6C98B}
.kk-geb.g-eten{fill:#E3B8A0}
.kk-geb.g-winkel{fill:#B9CDE0}
.kk-geb.g-wc{fill:#D3DADF}
.kk-geb.g-tank{fill:#C6C6C6}
.kk-r{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kk-rc{stroke:#CDC2A3}
.kk-rc-r{stroke-width:max(calc(var(--px,1) * 6.4px), .0058px)}
.kk-rc-s{stroke-width:max(calc(var(--px,1) * 4.6px), .0042px)}
.kk-r-r{stroke:#FFFDF6;stroke-width:max(calc(var(--px,1) * 4.6px), .0045px)}
.kk-r-s{stroke:#FFFDF6;stroke-width:max(calc(var(--px,1) * 3.2px), .0031px)}
.kk-r-k{stroke:#B59B6B;stroke-width:max(calc(var(--px,1) * 1.4px), .0022px);stroke-dasharray:calc(var(--px,1) * 5px) calc(var(--px,1) * 3px);stroke-linecap:butt}
.kk-r-f{stroke:#A8744E;stroke-width:max(calc(var(--px,1) * 1.1px), .0011px);stroke-dasharray:calc(var(--px,1) * 2px) calc(var(--px,1) * 2.5px);stroke-linecap:butt}
.kk-parkeer{fill:#EAE6D8;stroke:#CFC8B2;stroke-width:calc(var(--px,1) * .8px)}
.kk-water{fill:#BCD8E5;stroke:#8FB8CC;stroke-width:calc(var(--px,1) * .8px)}
.kk-zwem{fill:#97CDE4;stroke:#64A5C2;stroke-width:calc(var(--px,1) * .8px)}
.kk-wl{fill:none;stroke:#A9C7D2;stroke-width:calc(var(--px,1) * 1.6px)}
.kk-hek{fill:none;stroke:#7E9370;stroke-width:calc(var(--px,1) * 1.3px)}
.kk-nr{font-family:Figtree,Arial,sans-serif;font-weight:700;font-size:calc(var(--px,1) * 9px);fill:#4A4030;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(255,253,248,.88);stroke-width:calc(var(--px,1) * 2.4px);pointer-events:none;stroke-linejoin:round}
.kk-plek circle{stroke:#FFFDF8;stroke-width:1.4px}
.kk-plek.klein circle{stroke-width:1px}
.kk-plek .pg{fill:none;stroke:#fff;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.kk-plek .pg .gt{font-family:Figtree,Arial,sans-serif;font-weight:800;font-size:5.6px;fill:#fff;stroke:none;text-anchor:middle}
.kk-plek text{pointer-events:none;font-family:Figtree,Arial,sans-serif;font-weight:700;font-size:9.5px;fill:#33291F;paint-order:stroke;stroke:#FFFDF8;stroke-width:3px;stroke-linejoin:round}
.kaartsvg.z-kk .pl.kamp .mk{opacity:.45}

/* aantallen per soort (soortblad en Info) */
#blad .aantalblok{margin:12px 0;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
#blad .aantalblok>b{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--salie-tekst);margin-bottom:4px}
.aantalrij{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.aantalgetal{font-family:var(--kop);font-weight:700;font-size:1.45rem;line-height:1.2;color:var(--bos);font-variant-numeric:tabular-nums}
.aantalchips{margin-top:8px}
.chip.lab-talrijk{background:#DCE8DC;color:#244326}
.chip.lab-algemeen{background:#E7EDDD;color:#8A4B1F}
.chip.lab-schaars{background:var(--goudtint);color:var(--goudtekst)}
.chip.lab-zeldzaam,.chip.lab-druk{background:#F2DDD3;color:#7E3720}
.chip.trend-stijgend,.chip.trend-stabiel,.chip.trend-dalend{background:var(--zand);border:1px solid var(--lijn);color:var(--zacht)}
.aantalmeer{margin:6px 0 0;font-size:.92rem}
#blad .aantalblok.geen{background:transparent;border-style:dashed}
.aantalgeen{margin:0;font-size:.94rem;color:var(--zacht)}
.aantalblok.geen .aantalmeer{margin-top:8px}
.bronregel{margin:8px 0 0;font-size:.78rem;color:var(--zacht)}
.bronregel a{color:var(--zacht)}
.labellijst{display:grid;grid-template-columns:max-content 1fr;gap:6px 12px;align-items:center;margin:12px 0}
.labellijst .chip{margin:0;justify-self:start}
.bronnenlijst{list-style:none;padding:0;margin:10px 0 0;font-size:.84rem}
.bronnenlijst li{padding:7px 0;border-top:1px solid var(--lijn)}
.bronnenlijst a{color:var(--zacht)}

/* games: de hub, bingo en soorten turven */
.terug{margin:0 0 4px}
.terug a{display:inline-block;padding:8px 0;color:var(--bos);font-weight:700;font-size:.92rem;text-decoration:none}
.gamekaarten{display:grid;gap:14px;margin-top:18px}
.gamekaart{display:block;text-decoration:none;color:inherit;background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:14px}
.gk-beeld{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.gk-beeld img{display:block;width:100%;height:68px;object-fit:contain;background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:4px}
.gk-tekst{display:block}
.gk-tekst b{display:block;font-family:var(--kop);font-size:1.25rem;color:var(--bos)}
.gk-tekst>span{display:block;margin-top:2px;font-size:.92rem;color:var(--zacht)}
.gk-tekst>.gk-stand{display:inline-block;margin-top:10px;padding:3px 11px;border-radius:999px;background:var(--goudtint);color:var(--goudtekst);font-weight:700;font-size:.82rem}
.turfmodus{display:flex;width:max-content;max-width:100%;margin:14px 0 4px;border:1.5px solid var(--bos);border-radius:999px;overflow:hidden}
.turfmodus button{min-height:40px;padding:0 20px;border:0;background:var(--wit);color:var(--bos);font-weight:700;cursor:pointer}
.turfmodus button[aria-pressed=true]{background:var(--bosvlak);color:#fff}
.turfsom{display:flex;align-items:baseline;gap:8px;margin:12px 0 6px;color:var(--zacht);font-size:.95rem}
.turfsom>div{display:flex;align-items:baseline;gap:5px}
.turfsom>div+div::before{content:"·";margin-right:3px}
.turfsom b{font-family:var(--kop);font-size:1.6rem;line-height:1.1;color:var(--bos);font-variant-numeric:tabular-nums}
.turfnoot{margin:6px 0 0;font-size:.82rem}
.turfchips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.turfchip{background:var(--goudtint);border-radius:999px;padding:3px 11px;font-size:.88rem}
.turfchip b{font-variant-numeric:tabular-nums}
.turfrij{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--lijn)}
.turfrij img{flex:none;width:64px;height:48px;object-fit:contain;border-radius:8px;background:var(--wit);cursor:pointer}
.turfrij .t{flex:1;min-width:0;cursor:pointer}
.turfrij .t b{display:block;font-weight:600;line-height:1.2}
.turfrij .t i{display:block;font-size:.84rem;color:var(--zacht)}
.teller{flex:none;display:flex;align-items:center;gap:4px}
.teller button{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--bos);background:var(--wit);color:var(--bos);font-size:1.5rem;font-weight:700;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;touch-action:manipulation}
.teller .tplus{background:var(--bosvlak);color:#fff}
.teller button:disabled{opacity:.3;cursor:default}
.teller .tn{min-width:30px;text-align:center;font-family:var(--kop);font-weight:700;font-size:1.3rem;color:var(--bos);font-variant-numeric:tabular-nums}
.teller .tn.nul{color:var(--vinkrand)}
.turfknoppen{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}

/* tablet (vanaf 768 px): bredere inhoud, twee kolommen waar dat kan, een blad als venster in plaats van onderaan */
@media (min-width:768px){
  html{font-size:106.25%}
  main{max-width:1000px;padding:26px 28px 12px}
  .reisrooster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start}
  .rr-rechts>h2:first-child{margin-top:4px}
  .wk-rooster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 40px;align-items:start}
  .wk-zij{margin-top:22px}
  .wk-snel{display:none}            /* de voorbeeldreis staat hier al naast de stappen */
  .soorten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;align-content:start}
  .soort .t,.turfrij .t{overflow-wrap:anywhere;hyphens:auto}
  .soorten>.sublabel,.soorten>.leeg{grid-column:1/-1}
  .groepen{margin-inline:0;padding-inline:0;flex-wrap:wrap}
  .gamekaarten{grid-template-columns:1fr 1fr}
  .gk-beeld img{height:88px}
  .turfrij img{width:76px;height:56px}
  .rooster,.bingobalk,.bingoonder{max-width:560px;margin-inline:auto}
  .infokolommen{column-count:2;column-gap:40px}
  .infokolommen h2{break-after:avoid}
  .infokolommen .blok{break-inside:avoid}
  .infokolommen>h2:first-child{margin-top:12px}
  #blad{align-items:center;padding:24px}
  #blad .paneel{max-width:620px;max-height:min(84dvh,820px);border-radius:20px;padding-bottom:22px}
  #blad .greep{display:none}
  #blad .paneel img.groot{width:min(100%,440px);height:min(260px,32dvh)}
}
/* een brede tablet: op het dagblad de kaart links (blijft staan bij het scrollen) en de tekst rechts */
@media (min-width:900px){
  .dagrooster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 36px;align-items:start}
  .dr-kaart{position:sticky;top:calc(var(--balk) + env(safe-area-inset-top,0px) + 14px)}
  .dr-tekst:only-child{grid-column:1/-1}
  .dr-tekst>.sectie:first-child{margin-top:16px}
}
/* een liggende tablet: kop en kaartkeuze van de bingo links, het bord rechts, zo hoog dat het in beeld past */
@media (min-width:900px) and (orientation:landscape){
  .bingorooster{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,560px);gap:0 40px;align-items:start}
  .rooster,.bingobalk,.bingoonder{max-width:min(560px,calc(100dvh - 250px));min-width:340px;margin-inline:0}
}
@media (min-width:1100px){main{max-width:1120px}}

/* ---- startanimatie (intro.js): Kameleon, gekozen door Niek op 10-10 (de andere vier varianten staan in de git-geschiedenis) ----
   Alles staat stil tot .loopt (het lettertype is er dan); .weg laat het vlak in 450 ms uitfaden. Lengtes in een SVG-transform zijn
   eenheden van de viewBox van het logo (520 x 400), niet schermpixels. */
#intro{--zand:#F6F1E6;--licht:#F6F1E6;--bos:#8A4B1F;--bosvlak:#8A4B1F;--goud:#C9973B;--inkt:#23301F;position:fixed;inset:0;z-index:100;overflow:hidden;display:grid;place-items:center;background:var(--zand);transition:opacity .45s ease;-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#intro.weg{opacity:0;pointer-events:none}
#intro:not(.loopt)>*{visibility:hidden}
#intro svg{display:block;overflow:visible}
#intro .i-logo{width:min(86vw,460px)}
#intro .i-logo svg{width:100%;height:auto}
#intro g[class^="i-"]{transform-box:fill-box}
@keyframes i-teken{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes i-omtrekrust{from{opacity:.62}to{opacity:var(--van-dekking,.24)}}
@keyframes i-zonop{from{transform:translateY(130px)}to{transform:none}}
@keyframes i-heuvelop{from{transform:translateY(78px)}to{transform:none}}
@keyframes i-breed{from{transform:scaleX(0)}to{transform:none}}
@keyframes i-groei{from{transform:scale(.25);opacity:0}35%{opacity:1}to{transform:none;opacity:1}}
@keyframes i-loopin{from{transform:translateX(-46px);opacity:0}to{transform:none;opacity:1}}
@keyframes i-vlieg{from{transform:translate(-36px,16px);opacity:0}to{transform:none;opacity:1}}
@keyframes i-op{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
/* 5 Kameleon (wens Niek 10-10: "vanuit 1 de elementen samen laten voegen naar het kleine logo, en de achtergrond als een kameleon van
   1 naar 3"). Eerst de opbouw van 1, vlotter; dan schuiven parkomtrek, zon en acacia naar hun plek in het ronde merk, zakken de heuvels
   achter de horizon en komt de heuvel van het merk op, schuiven olifant en vogels het merk in en vervagen, kleurt de achtergrond van
   zand via salie naar bosgroen (de acacia, de naam en de tagline kleuren mee, rond het moment dat de achtergrond salie is) en tekent
   de gouden ring van 3 zich. De naam en de tagline blijven staan. Begin en doel (--van, --naar) rekent maak-intro.mjs uit het logo en
   het merk uit; de animaties voor het samensmelten hebben geen terugvulling (forwards), zodat de opbouw ervoor gewoon zichtbaar is. */
@keyframes k-kameleon{0%{background-color:var(--zand);animation-timing-function:cubic-bezier(.5,0,1,1)}50%{background-color:#C28A5A;animation-timing-function:cubic-bezier(0,0,.5,1)}100%{background-color:var(--bos)}}
@keyframes k-naar{from{transform:var(--van,none)}to{transform:var(--naar)}}
@keyframes k-weg{from{transform:none;opacity:1}to{transform:var(--naar);opacity:0}}
@keyframes k-zak{from{transform:none}to{transform:translateY(80px)}}
@keyframes k-smal{from{transform:none;opacity:1}to{transform:scaleX(0);opacity:0}}
@keyframes k-omtrek{from{stroke:var(--van-kleur,#C9973B);stroke-width:var(--van-dikte,34px);opacity:var(--van-dekking,.24)}to{stroke:var(--naar-kleur);stroke-width:var(--naar-dikte);opacity:var(--naar-dekking)}}
@keyframes k-kleur{to{fill:var(--naar-kleur)}}
@keyframes k-licht{to{fill:var(--licht)}}
@keyframes k-salie{to{fill:#E4C7AA}}
@keyframes k-goud{to{fill:var(--goud)}}
@keyframes k-op{from{transform:translateY(95px)}to{transform:none}}
@keyframes k-ring{0%{stroke-dashoffset:1;opacity:0}10%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
#intro.v5.loopt{animation:k-kameleon .95s 1.4s both}
.v5 .i-zon,.v5 .i-olifant,.v5 .i-vogels{transform-origin:50% 50%}
.v5 .k-heuvel{transform:translateY(95px)}
.v5 .k-ring{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.v5.loopt .i-omtrek path{stroke-dasharray:1 1;animation:i-teken .8s cubic-bezier(.45,0,.25,1) both,i-omtrekrust .4s ease .65s both,k-omtrek .8s cubic-bezier(.6,0,.3,1) 1.45s forwards}
.v5.loopt .k-omtrek{animation:k-naar .8s cubic-bezier(.6,0,.3,1) 1.45s forwards}
.v5.loopt .i-grond{transform-origin:50% 50%;animation:i-breed .5s cubic-bezier(.6,0,.2,1) .05s both,k-smal .45s cubic-bezier(.5,0,.75,0) 1.4s forwards}
.v5.loopt .i-zon{animation:i-zonop .65s cubic-bezier(.2,.7,.25,1) .08s both,k-naar .75s cubic-bezier(.6,0,.3,1) 1.5s forwards}
.v5.loopt .i-heuvel1{animation:i-heuvelop .5s cubic-bezier(.2,.7,.25,1) .18s both,k-zak .45s cubic-bezier(.5,0,.75,0) 1.4s forwards}
.v5.loopt .i-heuvel2{animation:i-heuvelop .5s cubic-bezier(.2,.7,.25,1) .25s both,k-zak .45s cubic-bezier(.5,0,.75,0) 1.4s forwards}
.v5.loopt .k-heuvel{animation:k-op .5s cubic-bezier(.2,.7,.25,1) 1.75s both}
.v5.loopt .i-boom{transform-origin:50% 100%;animation:i-groei .5s cubic-bezier(.3,1.35,.5,1) .32s both}
.v5.loopt .k-boom{animation:k-naar .75s cubic-bezier(.6,0,.3,1) 1.5s forwards,k-kleur .4s ease 1.7s forwards}
.v5.loopt .i-olifant{animation:i-loopin .6s cubic-bezier(.2,.7,.3,1) .4s both,k-weg .55s cubic-bezier(.5,0,.75,0) 1.4s forwards}
.v5.loopt .i-vogels{animation:i-vlieg .6s cubic-bezier(.2,.7,.3,1) .5s both,k-weg .55s cubic-bezier(.5,0,.75,0) 1.4s forwards}
.v5.loopt .i-naam{animation:i-op .45s cubic-bezier(.2,.7,.3,1) .55s both}
.v5.loopt .i-naam tspan:first-child{animation:k-licht .36s ease 1.72s forwards}
.v5.loopt .i-naam tspan:last-child{animation:k-salie .36s ease 1.72s forwards}
.v5.loopt .i-lijn1{transform-origin:100% 50%;animation:i-breed .35s ease-out .75s both}
.v5.loopt .i-lijn2{transform-origin:0 50%;animation:i-breed .35s ease-out .75s both}
.v5.loopt .i-tag{animation:i-op .4s ease-out .8s both}
.v5.loopt .i-tag text{animation:k-goud .36s ease 1.72s forwards}
.v5.loopt .k-ring{animation:k-ring .6s cubic-bezier(.5,0,.2,1) 1.85s both}
/* 5 glijdt aan het eind naar de kopbalk (intro.js, glijNaarKop): het merk en de naam bewegen elk als één groep in de eenheden van het
   logo, en het echte icoon en de echte titel staan zolang onzichtbaar (zichtbaar blijven ze wel meetellen voor de plek). */
.v5 .k-merk,.v5 .k-tekst{transform-box:view-box}
.intro-kop #balk .merk,.intro-kop #titel{visibility:hidden}
.v5 .k-vlak{position:absolute;inset:0;z-index:-1;background:var(--bosvlak);transform-origin:50% 0;visibility:hidden}
/* nachtmodus (11-10, wens Niek: de startanimatie mag ook in het donker): hij begint op de donkere achtergrond van de app, het donkergroen van het logo wordt salie zodat het zichtbaar blijft, en de achtergrond kleurt van donker via donkergroen naar het bosgroen van de kopbalk; daarna glijdt hij zoals altijd, en het donkere startscherm komt eronder vandaan */
@keyframes k-kameleon-nacht{0%{background-color:var(--zand);animation-timing-function:cubic-bezier(.5,0,1,1)}50%{background-color:#4A2A12;animation-timing-function:cubic-bezier(0,0,.5,1)}100%{background-color:var(--bos)}}
html.nacht #intro{--zand:#141C16;--bos:#8A4B1F}
html.nacht #intro [fill="#8A4B1F"]{fill:#E4C7AA}
html.nacht #intro.v5.loopt{animation-name:k-kameleon-nacht}
#intro.v5.glijdt{background:transparent;animation:none}
#intro.v5.glijdt .k-vlak{visibility:visible}

/* ---- parkregels (F2) in Info en regels voor rangers (E8) ---- */
.regelsin{margin:0 0 6px;font-size:.92rem}
.regellijst{list-style:none;padding:0;margin:0}
.regellijst li{padding:9px 0;border-bottom:1px solid var(--lijn)}
.regellijst li:last-child{border-bottom:0}
.regellijst b{display:block;color:var(--bos);font-family:var(--kop)}
.regellijst span{display:block}
.regellijst .bel{margin-top:6px;padding:8px 0 0;border-top:1px dashed var(--lijn);border-bottom:0}
.meerregels{margin-top:4px}
.regelskind{margin:12px 0 0}
.rangerregels{list-style:none;padding:0;margin:16px 0 8px;display:grid;gap:12px}
.rangerregels li{display:flex;gap:14px;align-items:flex-start;background:var(--wit,#FFFDF8);border:1px solid var(--lijn);border-radius:16px;padding:14px 16px}
.rr-nr{flex:none;width:36px;height:36px;border-radius:50%;background:var(--goud);color:var(--opgoud);font:700 1.1rem/36px var(--kop);text-align:center}
.rangerregels b{display:block;font-family:var(--kop);font-size:1.15rem;color:var(--bos);line-height:1.2}
.rangerregels p{margin:4px 0 0;font-size:1.05rem;line-height:1.45}

/* ---- nachtmodus (review 9-10, G6; 10-10) ----
   Voor 's avonds in het kamp of bij een kijkhut: donker bosgroen in plaats van zand, zandkleurige tekst, goud als accent (de kleuren uit
   het review-rapport). Aan of uit in Info, onder Weergave: zoals het toestel (standaard), licht of donker; de klasse .nacht op <html> zet
   index.html al voor de eerste tekening, zodat er niets wit oplicht. Alleen op het scherm: een afdruk (het reisverslag) blijft licht.
   Bosgroen is in licht zowel tekst als vlak; hier wordt de tekst zandkleurig (--bos) en blijft het vlak groen (--bosvlak). Gekozen
   knoppen en schakelaars worden goud, want groen op donkergroen valt weg. De kaart en de minikaarten worden als geheel gedimd, de
   tekeningen een fractie: die staan op papierkleur, dus in het donker zijn het lichte tegels, en dat is bewust zo gelaten. */
@media screen{
  html.nacht{color-scheme:dark;
    --zand:#1B140E; --wit:#271D15; --inkt:#ECE6D6; --zacht:#C4B5A6; --lijn:#43342A;
    --bos:#E6DDC8; --bosvlak:#8A4B1F; --goud:#D9AB52; --goudtint:#3A321E; --opgoud:#1E1A10;
    --petrol:#7FBFCC; --terra:#E38166; --salie:#D39A66; --salie-tekst:#E0AE80;
    --goudrand:#5A4A28; --goudtekst:#E8C477; --vinkrand:#7C7563}
  html.nacht .knop:not(.licht):not(.goud),html.nacht #balk{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  html.nacht .chips button[aria-pressed=true],html.nacht .groepen button[aria-pressed=true],html.nacht .bingopillen button[aria-pressed=true],
  html.nacht .memkeuze button[aria-pressed=true],html.nacht .turfmodus button[aria-pressed=true],html.nacht .vb-vink[aria-pressed=true],
  html.nacht .soort.gezien .vink,html.nacht .kaartknoppen button[aria-expanded=true]{background:var(--goud);border-color:var(--goud);color:var(--opgoud)}
  html.nacht .vb-vink[aria-pressed=true]::before{color:var(--opgoud)}
  html.nacht .schak{background:#4A5446}
  html.nacht .schakel input:checked + .schak,html.nacht .laagrij[aria-pressed=true] .schak{background:var(--goud)}
  html.nacht .laagrij:active{background:rgba(255,255,255,.06)}
  html.nacht .spkies[aria-pressed=true]{background:#26362A}
  html.nacht .vak.aan{background:#26362A}
  html.nacht .vak.aan img,html.nacht .vak.lijn img,html.nacht .raadoptie.goed img,html.nacht .memkaart.gevonden .mem-voor img,
  html.nacht .quizoptie.goed img,html.nacht .quizoptie.uit img,html.nacht .vtop li img{mix-blend-mode:normal}
  html.nacht .chip.lab-talrijk{background:#22382A;color:#BFD8BF}
  html.nacht .chip.lab-algemeen{background:#2A3824;color:#CBDDB6}
  html.nacht .chip.lab-zeldzaam,html.nacht .chip.lab-druk{background:#3E2620;color:#F0B9A6}
  html.nacht #toast{background:var(--bosvlak);box-shadow:0 8px 24px rgba(0,0,0,.5)}
  html.nacht .legenda{background:rgba(29,38,32,.92)}
  html.nacht .laagpaneel{background:rgba(29,38,32,.97)}
  html.nacht .kaartscherm-vlak{background:#8E8A82}
  html.nacht .kaartsvg,html.nacht .minikaart{filter:brightness(.6) saturate(.85)}
  html.nacht img[src*="tekeningen/"]{filter:brightness(.92)}
  html.nacht .sticker.nog .rond img{filter:grayscale(1) brightness(.92)}
}
/* de keuze onder Weergave in Info */
.themakeuze{display:flex;gap:6px;flex-wrap:wrap}
.themakeuze button{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--lijn);background:var(--wit);color:var(--inkt);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.themakeuze button[aria-pressed=true]{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
html.nacht .themakeuze button[aria-pressed=true]{background:var(--goud);border-color:var(--goud);color:var(--opgoud)}
/* de landelijke noodnummers onder die van SANParks (F4) */
.noodkop{margin:14px 0 0;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--salie-tekst)}
/* Niek's video's bij een kamp (F7) */
.vidlijst{display:grid;gap:10px}
.vidkaart{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;text-decoration:none;color:inherit;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:8px}
.vidkaart img{width:132px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;display:block}
.vidkaart b{display:block;line-height:1.3;color:var(--bos)}
.vidkaart small{display:block;color:var(--zacht);margin-top:3px}
.vidkaart:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
/* Niek vertelt (F10): zijn eigen opname bij een kamp */
.vertelt{margin:12px 0 4px;padding:12px 14px;border-radius:14px;background:var(--goudtint);border:1px solid var(--goudrand)}
.vertelt .oog{margin:0 0 2px;color:var(--goudtekst)}
.verteltitel{margin:0 0 10px;font-family:var(--kop);font-weight:700;color:var(--bos)}
.vertelt .knop small{font-weight:600;opacity:.8;margin-left:4px}

/* Gezelschap (H5): wie er meespeelt */
.gezlijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gezrij{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gezrij>span:not(.avatar){flex:1;min-width:0;display:flex;flex-direction:column}
.gezrij>span i{font-style:normal;color:var(--zacht);font-size:.88rem}
.gezform{gap:2px}
.gezform input{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);color:var(--inkt)}
.gezpos{width:1.4em;text-align:center;font-family:var(--kop);color:var(--goudtekst)}

/* Reisoverzicht en reiscertificaat (H6) */
.certnaam{display:grid;gap:4px;margin:14px 0}
.certnaam input{font:inherit;padding:10px 12px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);color:var(--inkt)}
.certbeeld{margin:12px 0}
.certbeeld img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 2px 14px rgba(35,48,31,.18)}
.certregels{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media print{
  html:has(.certbeeld) .certnaam,html:has(.certbeeld) .terugkop,html:has(.certbeeld) .certregels,html:has(.certbeeld) h2,html:has(.certbeeld) .blok,html:has(.certbeeld) p:not(.certnaam){display:none!important}
  .certbeeld{margin:0}.certbeeld img{box-shadow:none;border-radius:0;max-height:277mm;width:auto;max-width:100%;margin:0 auto}
  @page{margin:8mm}
}

/* delen van de vogels (H7): een rij chips boven de lijst */
.deelchips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin:0 -2px;scrollbar-width:thin}
.deelchips button{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:7px 12px;border:1px solid var(--lijn);border-radius:12px;background:var(--wit);color:var(--inkt);font-size:.88rem;font-weight:600;cursor:pointer}
.deelchips button span{font-weight:500;font-size:.78rem;color:var(--zacht)}
.deelchips button[aria-pressed=true]{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
.deelchips button[aria-pressed=true] span{color:rgba(255,255,255,.8)}
html.nacht .deelchips button[aria-pressed=true]{background:var(--goud);border-color:var(--goud);color:var(--opgoud)}
html.nacht .deelchips button[aria-pressed=true] span{color:var(--opgoud)}

/* Inpakgids in de app (H8) */
.gidsbody h2{margin-top:26px}
.gidsbody h3{margin:16px 0 6px}
.gidsbody .lead{font-size:1.05rem}
.gidsbody ul{margin:6px 0 10px;padding-left:1.2em}
.gidsbody li{margin:4px 0}
.gidsbody ul.vink{list-style:none;padding:0}
.gidsbody ul.vink li{position:relative;padding:10px 12px 10px 44px;margin:6px 0;border:1px solid var(--lijn);border-radius:10px;background:var(--wit);cursor:pointer;min-height:44px}
.gidsbody ul.vink li::before{content:"";position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:6px;border:2px solid var(--salie);background:var(--wit)}
.gidsbody ul.vink li.gedaan{color:var(--zacht)}
.gidsbody ul.vink li.gedaan::before{background:var(--bosvlak);border-color:var(--bosvlak)}
.gidsbody ul.vink li.gedaan::after{content:"✓";position:absolute;left:12px;top:12px;width:22px;height:22px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:.9rem}
.gidsbody ul.vink li:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.gidsbody .kader{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:12px 14px;margin:12px 0}
.gidsbody .kader>b{display:block;margin-bottom:4px}
.gidsbody .bronregel{font-size:.85rem;color:var(--zacht)}
.gidsbody table{width:100%;border-collapse:collapse;font-size:.88rem}
.gidsbody td{padding:5px 4px;border-bottom:1px solid var(--lijn);vertical-align:top}
.gidsbody a{color:var(--goudtekst);font-weight:700;text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.gezkaart{display:block;width:100%;height:auto;aspect-ratio:1000/640;border-radius:16px;margin-top:12px;border:1px solid var(--lijn)}
.blok input[type=text]{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);color:var(--inkt);margin-top:4px}
.certfilm{display:block;width:100%;max-width:340px;margin:10px auto 0;border-radius:14px;background:#000;max-height:70vh;object-fit:contain}
.waarnfoto{display:block;width:100%;max-height:60vh;object-fit:contain;border-radius:12px;background:#000;margin:10px 0 0}
.wfoto{flex:none;font:inherit;font-size:.85rem;padding:6px 10px;border:1px solid var(--lijn);border-radius:999px;background:var(--wit);color:var(--inkt);margin-right:6px}
.gezfotos{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.gezfotos li{display:flex;flex-direction:column;gap:4px}
.gezfotos button{padding:0;border:0;background:none;border-radius:12px;overflow:hidden;line-height:0}
.gezfotos img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--lijn)}
.gezfotos span{display:flex;flex-direction:column;font-size:.85rem;line-height:1.2}
.gezfotos i{font-style:normal;color:var(--zacht)}
/* je eigen reis maken (12-10, stap 1 van de verkoop) */
.maakreis h1{margin:2px 0 6px}
.mr-form select,.mr-form input[type=date],.mr-form input[type=number]{width:100%;min-height:46px;border:1.5px solid var(--lijn);border-radius:12px;padding:0 12px;font:inherit;background:var(--wit);color:var(--inkt)}
.mr-form select:focus-visible,.mr-form input:focus-visible{outline:3px solid var(--goud);outline-offset:1px;border-color:var(--bos)}
.mr-form h2{margin:22px 0 4px}
.mr-nachten{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
.mr-nacht{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--lijn);border-radius:14px;background:var(--wit)}
.mr-nr{flex:0 0 28px;height:28px;border-radius:50%;background:var(--bosvlak);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;margin-top:9px}
.mr-velden{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.mr-velden label{display:block;min-width:0}
.mr-velden label:first-child{grid-column:1 / -1}
.mr-n{display:flex !important;align-items:center;gap:6px}
.mr-form .mr-n input{width:64px;padding:0 8px;text-align:center}
.mr-n span{font-size:.9rem;color:var(--zacht);min-width:52px}
.mr-acco{grid-column:1 / -1}
.mr-acco input{min-height:42px !important}
.mr-weg{flex:0 0 36px;height:36px;margin-top:5px;border:0;border-radius:50%;background:transparent;color:var(--zacht);font-size:1.4rem;line-height:1;cursor:pointer}
.mr-weg:hover{background:var(--lijn)}
.mr-som{font-weight:700;margin:18px 0 6px}
.mr-meld{color:var(--terra);font-weight:700;min-height:1.2em}
.eigenbalk{margin:-4px 0 14px}
.vdagdeel{margin:-2px 0 10px;font-size:.9rem}

/* Info als overzicht met kaarten, en de pagina's over het park (12-10) */
.infokaarten{display:grid;gap:10px;margin:8px 0 18px}
.infokaart{display:block;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:12px 14px;text-decoration:none;color:inherit}
.infokaart b{display:block;color:var(--bos);font-size:1.02rem}
.infokaart span{display:block;color:var(--zacht);font-size:.9rem;margin-top:2px}
.infokaart:active{background:var(--zand)}
.parktekst p{margin:0 0 10px}.parktekst p:last-child{margin-bottom:0}
.parktekst ul{margin:0 0 10px;padding-left:20px}.parktekst li{margin:4px 0}
.parktekst table{border-collapse:collapse;width:100%;font-size:.92rem;margin:4px 0 10px}
.parktekst th,.parktekst td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--lijn)}
.parktekst em{color:var(--zacht);font-style:normal;font-size:.85em}
.szmaanden{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.szmaanden button{font:inherit;font-size:.88rem;padding:7px 10px;border-radius:999px;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);cursor:pointer;min-width:48px}
.szmaanden button[aria-pressed="true"]{background:var(--bosvlak);border-color:var(--bosvlak);color:#fff}
.szkaart h2 small{font-weight:500;color:var(--zacht);font-size:.85rem}
.szsfeer{font-size:1.02rem}
.szfeiten{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0}
.szfeiten dt{color:var(--zacht)}.szfeiten dd{margin:0}
.szbalk{color:var(--goudtekst);letter-spacing:2px}
.faqlijst{display:grid;gap:10px;margin-top:14px}
details.faq summary{font-weight:700;cursor:pointer}
details.faq[open] summary{margin-bottom:8px}
.bflijst,.bordlijst{list-style:none;padding:0;margin:0}
.bf-rij,.bordrij{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--lijn)}
.bf-rij:last-child,.bordrij:last-child{border-bottom:0}
.bf-rij > span,.bordrij > span{display:flex;flex-direction:column;flex:1;min-width:0}
.bf-rij > span > span,.bordrij > span > span{color:var(--zacht);font-size:.92rem}
.bf-beeld{border:0;background:none;padding:0;cursor:pointer;flex:none}
.bf-rij img,.bordrij img{width:70px;height:50px;object-fit:contain;flex:none}
.bordrij a{font-size:.85rem;flex:none}
@media (min-width:768px){.infokaarten{grid-template-columns:1fr 1fr}}

/* je eigen reis in de gratis versie (13-10): wat buiten de vier nachten valt staat licht */
.mr-gratis{margin:10px 0 16px}
.mr-overzicht li.mr-buiten{opacity:.5}
/* het waarnemingenbord op de kaart (13-10) */
.bordkaart{display:block;width:100%;max-width:520px;height:auto;margin:14px auto 8px;border-radius:14px}
.bordlegenda{list-style:none;padding:0;margin:4px 0 12px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem}
.bordlegenda li{display:flex;align-items:center;gap:6px}
.bordlegenda i{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px #FFFDF8}

/* startscherm (13-10): tegels naar alle onderdelen */
.tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 18px}
.tegel{display:flex;flex-direction:column;gap:3px;background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:14px 14px 13px;text-decoration:none;color:inherit;min-height:112px}
.tegel svg{width:26px;height:26px;fill:none;stroke:var(--bos);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.tegel b{color:var(--bos);font-size:1.02rem;line-height:1.2}
.tegel span{color:var(--zacht);font-size:.86rem;line-height:1.3;overflow-wrap:anywhere}
.tegel:active{background:var(--zand)}
.startscherm .held{margin-bottom:6px}
@media (min-width:768px){.tegels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.tegels{grid-template-columns:repeat(4,minmax(0,1fr))}}
.terugrij{display:flex;justify-content:space-between;align-items:center}
.reisknop{font-size:.9rem;font-weight:600;color:var(--bos);text-decoration:none;padding:8px 0}
/* suggesties bij het intypen van een kamp of verblijf (14-10) */
.tah{position:relative}
.tah input[type=text]{width:100%;box-sizing:border-box}
.tah-lijst{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;background:var(--wit);border:1.5px solid var(--lijn);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.22);max-height:15rem;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.tah-lijst li{padding:10px 12px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;border-radius:8px;cursor:pointer;color:var(--inkt)}
.tah-lijst li:hover,.tah-lijst li.aan{background:var(--goudtint)}
.mr-foto{margin-top:8px}
.mr-foto:empty{display:none}
.mr-foto img{display:block;width:100%;max-width:240px;height:auto;border-radius:12px;margin-bottom:4px}
.mr-velden .mr-kamp,.mr-velden .mr-foto{grid-column:1 / -1}
.mr-form .tah input[type=text]{min-height:46px;border:1.5px solid var(--lijn);border-radius:12px;padding:0 12px;font:inherit;background:var(--wit);color:var(--inkt)}
.mr-form .tah input[type=text]:focus-visible{outline:3px solid var(--goud);outline-offset:1px;border-color:var(--bos)}
.mr-form .mr-acco input[type=text]{min-height:42px}
.gezdagboek{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gezdagboek li{border-bottom:1px solid var(--lijn);padding-bottom:10px}
.gezdagboek li:last-child{border-bottom:0;padding-bottom:0}
.gezdagboek b{display:block;font-size:.88rem;color:var(--zacht)}
.gezdagboek p{margin:4px 0 0;line-height:1.5;overflow-wrap:anywhere}

.installstappen{margin:0 0 14px;padding-left:1.2em}
.installstappen li{margin:0 0 6px}
.installcode{font:700 1.5rem/1.2 'Bricolage Grotesque',monospace;letter-spacing:.08em;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:12px;text-align:center;margin:0 0 10px;user-select:all}
.plakrij{margin:6px 0 0}

.soort .nogrij{display:none;flex:none;align-items:center;gap:6px}
.soort.gezien .nogrij{display:flex}
.soort .tel{font-weight:700;font-size:.85rem;color:var(--zacht);min-width:1.9em;text-align:right;font-variant-numeric:tabular-nums}
.soort .plus{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--vinkrand);background:var(--wit);color:var(--bos);font-weight:800;font-size:1.25rem;line-height:1;display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.soort .plus:active{background:var(--goudrand)}

/* De inpaklijst (17-10) */
.inpaklijst{list-style:none;margin:0 0 6px;padding:0}
.inpakrij{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--lijn)}
.inpakrij:first-child{border-top:0}
.inpakrij label{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;cursor:pointer}
.inpakrij input[type=checkbox]{width:22px;height:22px;margin-top:1px;flex:none;accent-color:var(--bosvlak,#8A4B1F)}
.inpakrij.klaar span{opacity:.55;text-decoration:line-through}
.inpakform{margin:10px 0 16px}

/* Een plek kiezen op de kaart (17-10) */
.plekkruis{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:7;pointer-events:none}
.plekkruis svg{width:100%;height:100%;fill:#C9973B;stroke:#8A4B1F;stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 2px #fff)}
.plekbalk{position:absolute;left:10px;right:10px;bottom:10px;z-index:8;background:rgba(255,253,248,.97);border:1px solid var(--lijn);border-radius:14px;padding:10px 12px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.plekbalk p{margin:0 0 8px}.plekbalk .knoprij{margin:0;display:flex;gap:8px}
html.nacht .plekbalk{background:rgba(29,38,32,.97)}

/* Kiezen uit een scherm: poorten, kampen, verblijven en activiteiten (17-10) */
.keuzeknop{color:var(--inkt);display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;padding:12px 14px;border:1px solid var(--lijn);border-radius:12px;background:var(--wit);font:inherit;color:inherit;text-align:left;cursor:pointer}
.keuzeknop i{font-style:normal;font-size:.8rem;color:var(--goudtekst,#80621A);font-weight:700}
.mr-kies{margin-top:6px;padding:6px 10px;border:1px solid var(--lijn);border-radius:999px;background:transparent;font:inherit;font-size:.82rem;color:var(--goudtekst,#80621A);cursor:pointer}
.keuzelijst{display:grid;gap:8px;margin:10px 0 14px}
.keuzekaart{color:var(--inkt);display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--lijn);border-radius:12px;background:var(--wit);font:inherit;color:inherit;text-align:left;cursor:pointer}
.keuzekaart img{width:84px;height:60px;object-fit:cover;border-radius:8px;flex:none}
.keuzekaart b{display:block}.keuzekaart small{display:block;opacity:.7;margin-top:2px}
.keuzekaart.aan{border-color:var(--goud,#C9973B);box-shadow:inset 0 0 0 2px var(--goud,#C9973B)}
.mr-act{margin-top:8px;grid-column:1/-1}
.mr-actchips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mr-actchips li{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border:1px solid var(--lijn);border-radius:999px;font-size:.88rem}
.mr-actchips li button{border:0;background:transparent;font-size:1.1rem;line-height:1;cursor:pointer;color:inherit;padding:2px 6px}
/* gewone invoervelden naast een knop (niet de hoofdletters van het codeveld) (17-10) */
.inpakform .coderij input,.waarnsoortform .coderij input{font:400 1rem/1.2 Figtree,system-ui,sans-serif;letter-spacing:normal;text-transform:none}
.inpakform .coderij input::placeholder,.waarnsoortform .coderij input::placeholder{opacity:.6}
.inpaklijst .stil{padding:10px 0;margin:0}

/* Installeren na het openen van de persoonlijke link (19-10): grote knop op Android, pijl naar Deel op de iPhone */
.knop.groot{display:block;width:100%;font-size:1.15rem;padding:16px 18px;margin:8px 0 14px}
.installstappen.groot{font-size:1.1rem;padding-left:1.4em}
.installstappen.groot li{margin:0 0 12px;font-weight:600}
.ijlonder{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 6px);text-align:center;font-weight:700;color:var(--goudtekst,#80621A);pointer-events:none;z-index:60}
.ijlonder span{display:block;font-size:2rem;line-height:1;animation:ijlstuit 1.1s ease-in-out infinite}
@keyframes ijlstuit{0%,100%{transform:translateY(-6px)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.ijlonder span{animation:none}}

/* De naamvraag bij het eerste openen (19-10): een laag over alles heen, zonder sluitknop */
#naamlaag{position:fixed;inset:0;z-index:200;background:var(--zand);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.naamvorm{width:100%;max-width:420px}
.naamvorm h1{margin:.1em 0 .4em}
.naamvorm input{width:100%;font-size:1.2rem;padding:14px;border:1.5px solid var(--lijn);border-radius:12px;background:var(--wit);color:var(--inkt,inherit);margin:6px 0 10px}
.naamvorm .naamfout{color:#A6472E}

.waarngeluid{width:100%;margin:8px 0}
#rechtenlaag{position:fixed;inset:0;z-index:199;background:var(--zand);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
#rechtenlaag .blok{margin:12px 0}
#versielaag{position:fixed;inset:0;z-index:198;background:var(--zand);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
#versielaag .knop{width:100%;padding:16px 18px;font-size:1.1rem}

.gezplekkeuze{flex:1 1 100%;margin-left:46px;display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:.88rem;color:var(--zacht);line-height:1.35}
.gezplekkeuze input{margin-top:3px;flex:none}
.gezwaarom{font-size:.95rem}
.uitnodig{display:flex;flex-direction:column;gap:14px}
.uitkeuze{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.uitkeuze span{color:var(--zacht);font-size:.92rem}
.uitkeuze+.uitkeuze{border-top:1px solid var(--lijn);padding-top:14px}
.opnknop{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px}
.opngroot{min-width:70%;padding:18px 24px;font-size:1.15rem}
.opntijd{margin:0;font:700 2rem/1 ui-monospace,Menlo,Consolas,monospace;color:var(--bos);font-variant-numeric:tabular-nums}
.opnrij audio{width:100%}
.opnnaam{width:100%;font:inherit;font-weight:700;padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);color:var(--inkt)}
/* v6 begin (gemaakt door app/maak-intro6.mjs, niet met de hand bewerken) */
#intro.v7.loopt{animation:k-kameleon 1.425s 2.1s both}
.v7 .i-zon,.v7 .i-olifant,.v7 .i-vogels{transform-origin:50% 50%}
.v7 .k-heuvel{transform:translateY(95px)}
.v7 .k-ring{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.v7.loopt .i-omtrek path{stroke-dasharray:1 1;animation:i-teken 1.2s 0s cubic-bezier(.45,0,.25,1) both,i-omtrekrust .6s ease .975s both,k-omtrek 1.2s cubic-bezier(.6,0,.3,1) 2.175s forwards}
.v7.loopt .k-omtrek{animation:k-naar 1.2s cubic-bezier(.6,0,.3,1) 2.175s forwards}
.v7.loopt .i-grond{transform-origin:50% 50%;animation:i-breed .75s cubic-bezier(.6,0,.2,1) .075s both,k-smal .675s cubic-bezier(.5,0,.75,0) 2.1s forwards}
.v7.loopt .i-zon{animation:i-zonop .975s cubic-bezier(.2,.7,.25,1) .12s both,k-naar 1.125s cubic-bezier(.6,0,.3,1) 2.25s forwards}
.v7.loopt .i-heuvel1{animation:i-heuvelop .75s cubic-bezier(.2,.7,.25,1) .27s both,k-zak .675s cubic-bezier(.5,0,.75,0) 2.1s forwards}
.v7.loopt .i-heuvel2{animation:i-heuvelop .75s cubic-bezier(.2,.7,.25,1) .375s both,k-zak .675s cubic-bezier(.5,0,.75,0) 2.1s forwards}
.v7.loopt .k-heuvel{animation:k-op .75s cubic-bezier(.2,.7,.25,1) 2.625s both}
.v7.loopt .i-boom{transform-origin:50% 100%;animation:i-groei .75s cubic-bezier(.3,1.35,.5,1) .48s both}
.v7.loopt .k-boom{animation:k-naar 1.125s cubic-bezier(.6,0,.3,1) 2.25s forwards,k-kleur .6s ease 2.55s forwards}
.v7.loopt .i-olifant{animation:i-loopin .9s cubic-bezier(.2,.7,.3,1) .6s both,k-weg .825s cubic-bezier(.5,0,.75,0) 2.1s forwards}
.v7.loopt .i-vogels{animation:i-vlieg .9s cubic-bezier(.2,.7,.3,1) .75s both,k-weg .825s cubic-bezier(.5,0,.75,0) 2.1s forwards}
.v7.loopt .i-naam{animation:i-op .675s cubic-bezier(.2,.7,.3,1) .825s both}
.v7.loopt .i-naam tspan:first-child{animation:k-licht .54s ease 2.58s forwards}
.v7.loopt .i-naam tspan:last-child{animation:k-salie .54s ease 2.58s forwards}
.v7.loopt .i-lijn1{transform-origin:100% 50%;animation:i-breed .525s ease-out 1.125s both}
.v7.loopt .i-lijn2{transform-origin:0 50%;animation:i-breed .525s ease-out 1.125s both}
.v7.loopt .i-tag{animation:i-op .6s ease-out 1.2s both}
.v7.loopt .i-tag text{animation:k-goud .54s ease 2.58s forwards}
.v7.loopt .k-ring{animation:k-ring .9s cubic-bezier(.5,0,.2,1) 2.775s both}
.v7 .k-merk,.v7 .k-tekst{transform-box:view-box}
.v7 .k-vlak{position:absolute;inset:0;z-index:-1;background:var(--bosvlak);transform-origin:50% 0;visibility:hidden}
html.nacht #intro.v7.loopt{animation-name:k-kameleon-nacht}
#intro.v7.glijdt{background:transparent;animation:none}
#intro.v7.glijdt .k-vlak{visibility:visible}
/* v6 einde */