/* ===== KrugerInside v3 — licht & warm (jambo-palet) ===== */
:root{
--bg:#F7F2EC;
--panel:#ECE5DC;
--white:#FFFFFF;
--ink:#403429;
--ink-deep:#33291F;
--soft:#6B6153;
--gold:#80621A;
--gold-tint:#F1E6CC;
--sage:#587A5D;
--sage-deep:#425C46;
--sage-tint:#EDF2ED;
--line:rgba(64,52,41,.14);
--disp:'Bricolage Grotesque','Trebuchet MS',Verdana,sans-serif;
--body:'Figtree','Segoe UI',Arial,sans-serif;
--quote:'Source Serif 4',Georgia,serif;
--r:16px;
--shadow:0 22px 44px -26px rgba(64,52,41,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:var(--body);font-size:1.05rem;line-height:1.65;
-webkit-font-smoothing:antialiased;
/* hidden eerst als terugval: overflow-x:clip kent Safari pas vanaf 16, en zonder
terugval kon de pagina daar zijwaarts meebewegen. clip heeft de voorkeur omdat
hidden een scrollcontainer maakt (die position:sticky kan breken).*/
overflow-x:hidden;
overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.1;text-wrap:balance;margin:0;font-weight:700;color:var(--ink)}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{
font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--sage-deep);
}
h2.title{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;color:var(--gold);letter-spacing:-.01em;margin:12px 0 14px}
.lede{color:var(--soft);font-size:1.12rem;max-width:62ch}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--body);font-weight:700;font-size:.95rem;
color:#fff;background:var(--sage);
border:2px solid var(--sage);border-radius:999px;
padding:14px 30px;cursor:pointer;text-decoration:none;
transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--sage-deep);border-color:var(--sage-deep);transform:translateY(-1px)}
.btn.outline{background:transparent;color:var(--sage-deep)}
.btn.outline:hover{background:var(--sage-tint);transform:none}
.btn.light{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.95);color:var(--ink)}
.btn.light:hover{background:#fff;border-color:#fff}
.btn.ghostlight{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(4px)}
.btn.ghostlight:hover{background:rgba(255,255,255,.26)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.gold:hover{background:#6A5114;border-color:#6A5114}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,button:focus-visible{
outline:3px solid var(--gold);outline-offset:2px;
}
.arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}
/* ---------- header ---------- */
header.site{
position:sticky;top:0;z-index:60;
background:rgba(247,242,236,.95);backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
header.site .wrap{
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
}
.wordmark{
font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;
color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;
}
/* .wordmark is een flexbox met gap:10px voor de ruimte tussen icoon en naam.
Zonder deze wikkel zijn "Kruger" en Inside twee losse flex-items en
valt die 10px ook tussen de twee woorden — dan staat de naam los geschreven. */
.wm-naam{white-space:nowrap}
.wordmark em{font-style:normal;color:var(--sage-deep)}
/* Logo-animatie in de kopbalk (voorstel 10-10, naar variant 3 van de app-intro; Niek wil hem eerst zien): het merk springt in beeld,
de zon komt op achter de heuvel, de acacia groeit vanuit zijn stam, een gouden ring tekent zich om het merk en vervaagt weer, en de
naam schuift ernaast tevoorschijn; samen 1,8 s. Speelt alleen met ?logo=3 (het script onderaan zet html.logo-anim), nooit bij
minder beweging. De acacia draagt een transform-attribuut: de keyframes herhalen dat, anders springt hij van zijn plek. */
header.site .wordmark{position:relative}
.wm-ring{position:absolute;left:-4px;top:50%;width:38px;height:38px;margin-top:-19px;pointer-events:none;overflow:visible}
.wm-ring rect{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
html.logo-anim header.site .wordmark>svg{transform-origin:50% 50%;animation:wm-pop .55s cubic-bezier(.3,1.4,.5,1) both}
html.logo-anim header.site .wordmark>svg circle{animation:wm-zon .8s cubic-bezier(.2,.7,.25,1) .25s both}
html.logo-anim header.site .wordmark>svg g[fill="#F6F1E6"]{animation:wm-boom .55s cubic-bezier(.3,1.35,.5,1) .5s both}
html.logo-anim header.site .wm-ring rect{animation:wm-ring .8s cubic-bezier(.5,0,.2,1) .15s both,wm-uit .45s ease 1.35s both}
html.logo-anim header.site .wm-naam{animation:wm-naam .6s cubic-bezier(.2,.7,.3,1) .55s both}
@keyframes wm-pop{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes wm-zon{from{transform:translateY(14px)}to{transform:none}}
@keyframes wm-boom{from{transform:translate(30px,59.84px) scale(.06) translate(0,-44px)}to{transform:translate(30px,59.84px) scale(.36) translate(0,-44px)}}
@keyframes wm-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wm-uit{to{opacity:0}}
@keyframes wm-naam{from{clip-path:inset(0 100% 0 0);transform:translateX(-6px)}to{clip-path:inset(0 0 0 0);transform:none}}
nav.menu{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
nav.menu a.mlink{
font-weight:600;font-size:.94rem;color:var(--soft);text-decoration:none;
padding:8px 14px;border-radius:999px;position:relative;
}
nav.menu a.mlink:hover{color:var(--ink);background:rgba(122,153,125,.12)}
nav.menu a.mlink[aria-current="page"]{color:var(--ink)}
nav.menu a.mlink[aria-current="page"]::after{
content:"";position:absolute;left:15px;right:15px;bottom:2px;height:3px;
border-radius:3px;background:var(--gold);
}
header.site .btn{padding:10px 22px;font-size:.86rem;margin-left:10px}
.hamb{
display:none;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:12px;cursor:pointer;flex:0 0 auto;
background:var(--white);border:1.5px solid var(--line);color:var(--ink);
}
.hamb[aria-expanded="true"]{background:var(--sage-tint);border-color:var(--sage)}
/* Zoeken op de site (wens Niek 10-10): het vergrootglas rechts in de kopbalk opent een zoekvenster (script: "zoeken op de site").
Op de kamppagina's, die geen router hebben, is het een gewone link naar /?zoek=1. Breed staat het menu rechts en het vergrootglas
erachter; smal staat het naast de hamburger. */
header.site .zoekknop{
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:12px;flex:0 0 auto;
background:var(--white);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;
}
header.site .zoekknop:hover{background:var(--sage-tint);border-color:var(--sage)}
@media (min-width:1151px){
nav.menu{margin-left:auto}
header.site .zoekknop{margin-left:-6px}
}
@media (max-width:1150px){
header.site .zoekknop{margin-left:auto;margin-right:-8px}
}
/* De taalkeuze (12-10, wens Niek: een vlaggetje bovenin): op de Nederlandse pagina's een link naar de Engelse pagina /en/, daar terug naar Nederlands.
Vlaggen als eigen SVG: Windows tekent vlag-emoji als twee letters. */
header.site .taalknop{display:flex;align-items:center;gap:6px;height:44px;padding:0 11px;border-radius:12px;flex:0 0 auto;
background:var(--white);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font:700 .82rem/1 var(--body);letter-spacing:.04em}
header.site .taalknop:hover{background:var(--sage-tint);border-color:var(--sage)}
header.site .taalknop svg{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
@media (min-width:1151px){ header.site .taalknop{margin-left:-6px} header.site .taalknop + .zoekknop{margin-left:-10px} }
@media (max-width:1150px){ header.site .taalknop{margin-left:auto} header.site .taalknop + .zoekknop{margin-left:8px} }
@media (max-width:420px){ header.site .taalknop{padding:0 9px} header.site .taalknop span{display:none} header.site .wrap{gap:8px;padding-left:16px;padding-right:16px} header.site .zoekknop{margin-right:0} }
@media (max-width:359px){ header.site .wrap{gap:6px;padding-left:12px;padding-right:12px} .wordmark{font-size:1.1rem;gap:8px} header.site .wordmark>svg{width:32px;height:32px} header.site .zoekknop,.hamb,header.site .taalknop{width:40px;height:40px;padding:0;justify-content:center} }
html.zk-open,html.zk-open body{overflow:hidden}
.zoeklaag{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;padding:min(9vh,80px) 16px 16px;background:rgba(51,41,31,.45)}
.zoeklaag[hidden]{display:none}
.zk-paneel{width:100%;max-width:680px;max-height:100%;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r);box-shadow:0 30px 60px -20px rgba(51,41,31,.55);overflow:hidden}
.zk-kop{flex:none;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 18px;background:var(--white);border-bottom:1px solid var(--line)}
.zk-kop>svg{flex:none;color:var(--soft)}
#zk-invoer{flex:1;min-width:0;height:44px;border:0;background:transparent;font:500 1.05rem var(--body);color:var(--ink);-webkit-appearance:none;appearance:none;border-radius:8px}
#zk-invoer:focus{outline:none}
.zk-kop:focus-within{box-shadow:inset 0 -3px 0 var(--gold)}
#zk-invoer::-webkit-search-cancel-button,#zk-invoer::-webkit-search-decoration{-webkit-appearance:none;display:none}
#zk-invoer::placeholder{color:var(--soft)}
.zk-sluit{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--soft);cursor:pointer}
.zk-sluit:hover{background:var(--sage-tint);color:var(--ink)}
.zk-inhoud{overflow:auto;overscroll-behavior:contain;padding:4px 18px 22px}
.zk-hint{color:var(--soft);margin:16px 0 0}
.zk-kopje{font:700 .76rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep);margin:20px 0 8px}
.zk-voorbeelden{display:flex;flex-wrap:wrap;gap:8px}
.zk-voorbeelden button{min-height:38px;padding:0 15px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);font:600 .9rem var(--body);color:var(--ink);cursor:pointer}
.zk-voorbeelden button:hover{background:var(--sage-tint);border-color:var(--sage)}
.zk-lijst{list-style:none;margin:0;padding:0;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.zk-lijst li+li{border-top:1px solid var(--line)}
.zk-rij{display:block;width:100%;padding:12px 16px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.zk-rij:hover{background:var(--sage-tint)}
.zk-rij:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.zk-titel{display:block;font-weight:700;color:var(--ink-deep);overflow-wrap:anywhere}
.zk-titel b{font-weight:800}
.zk-onder{display:block;margin-top:2px;font-size:.9rem;line-height:1.45;color:var(--soft);overflow-wrap:anywhere}
.zk-onder b{font-weight:700;color:var(--ink)}
.zk-meer{margin:8px 0 0;padding:6px 0;border:0;background:none;font:700 .92rem var(--body);color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.zk-meer:hover{color:#6A5114}
@media (max-width:700px){
.zoeklaag{padding:0}
.zk-paneel{max-width:none;height:100%;border-radius:0}
.zk-kop{padding-top:calc(10px + env(safe-area-inset-top,0px))}
}
/* waar een treffer heen ging, licht even op */
.zk-licht{border-radius:10px;animation:zkLicht 2.4s ease-out}
@keyframes zkLicht{0%,40%{box-shadow:0 0 0 3px var(--gold),0 0 0 10px var(--gold-tint)}100%{box-shadow:0 0 0 3px transparent,0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.zk-licht{animation:none;box-shadow:0 0 0 3px var(--gold)}}
@media print{header.site .zoekknop,.zoeklaag{display:none!important}}
.page{display:none}
.page.active{display:block}
/* ---------- hero ---------- */
.hero{position:relative;min-height:600px;height:86vh;max-height:820px;overflow:hidden;background:#2A241C;display:flex;align-items:flex-end}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:
/* van links: beschermt de kop, die over de lichte lucht valt. Zonder dit haalt de
kop maar 1,65:1 contrast (norm voor grote tekst is 3:1); hiermee 3,6:1. */
linear-gradient(90deg,rgba(20,16,10,.55) 0%,rgba(20,16,10,.38) 40%,rgba(20,16,10,0) 72%),
linear-gradient(180deg,rgba(30,24,16,.10) 0%,rgba(30,24,16,0) 30%,rgba(30,24,16,.46) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:72px;width:100%}
.hero .kicker{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
color:#fff;font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
border-radius:999px;padding:7px 16px;backdrop-filter:blur(6px);
}
.hero h1{
color:#fff;font-size:clamp(2.5rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.015em;
margin:20px 0 16px;max-width:15ch;
text-shadow:0 2px 26px rgba(20,16,10,.45);
}
.hero h1 .accent{font-family:var(--quote);font-style:italic;font-weight:600;color:#F4DFA9}
.hero .sub{color:rgba(255,255,255,.94);font-size:1.16rem;max-width:46ch;text-shadow:0 1px 14px rgba(20,16,10,.5)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero .credit{
position:absolute;right:26px;bottom:22px;z-index:3;
display:inline-flex;align-items:center;gap:9px;
color:rgba(255,255,255,.92);font-size:.78rem;font-weight:600;letter-spacing:.04em;
background:rgba(30,24,16,.45);border-radius:999px;padding:7px 15px;backdrop-filter:blur(4px);
}
.hero .credit .dot{width:8px;height:8px;border-radius:50%;background:#E4534A;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* trust strip */
.truststrip{background:var(--white);border-bottom:1px solid var(--line)}
.truststrip .wrap{display:flex;gap:12px 44px;justify-content:center;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.truststrip .t{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.94rem;color:var(--ink)}
.truststrip .t svg{color:var(--sage-deep);flex:0 0 auto}
/* stats */
.stats{background:var(--bg)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:56px;padding-bottom:56px}
.stat{text-align:center}
.stat .n{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,3.6vw,2.8rem);color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.05}
.stat .l{font-size:.92rem;color:var(--soft);font-weight:500;margin-top:6px}
/* ---------- secties ---------- */
section{padding:92px 0}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.cardish{background:var(--white);border:1px solid var(--line);border-radius:var(--r);transition:transform .18s ease,box-shadow .18s ease}
/* De app kopen (12-10, achter app/verkoop.json) */
.koopapp{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:22px;margin-top:28px;align-items:start}
.winkelrij{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.winkelbinnenkort{opacity:.75;cursor:default;pointer-events:none}
.koopkaart{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.koopkaart.licht{background:transparent}
.koopkaart h3{margin:0 0 6px}
.koopprijs{margin:0 0 18px;color:var(--soft)}
.koopprijs b{font-size:1.5rem;color:var(--ink);margin-right:6px}
.koopkaart .optcard{margin-bottom:10px}
.koopmeld{min-height:1.2em;margin:10px 0 0;font-weight:700;color:var(--ink)}
@media (max-width:820px){.koopapp{grid-template-columns:1fr}.koopkaart{padding:22px 18px}}
.cardish:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* ---------- kaart & paneel ---------- */
.mapsec{background:var(--white)}
.boardwrap{
position:relative;height:min(80vh,880px);
width:min(100vw - 48px, 1440px);
margin-left:calc(50% - min(50vw - 24px, 720px));
border-radius:20px;overflow:hidden;background:#EFE6C8;
box-shadow:0 26px 54px -30px rgba(64,52,41,.5);
border:1px solid rgba(64,52,41,.12);
}
.map-intro{text-align:center;font-size:1.02rem;color:var(--soft);max-width:62ch;margin:0 auto 16px}
.map-note{text-align:center;font-size:.78rem;color:var(--soft);opacity:.75;margin-top:12px}
.mapzone{opacity:0;transition:opacity .25s ease}
.mapzone.on{opacity:1}
.mk{cursor:pointer}
.mk .hit{fill:transparent}
.mk circle.pt,.mk rect.pt,.mk path.pt{transition:stroke-width .12s ease}
.mk:hover circle.pt,.mk:hover rect.pt,.mk:hover path.pt,.mk:focus-visible circle.pt{stroke:#403429;stroke-width:2.5}
.mk.sel circle.pt,.mk.sel rect.pt,.mk.sel path.pt{stroke:#403429;stroke-width:3}
.mk text{pointer-events:none}
#markers text{paint-order:stroke;stroke:#F7F2EC;stroke-width:3.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mag{cursor:pointer}
.mag rect.pt{transition:stroke-width .12s ease,opacity .2s ease}
.mag:hover rect.pt,.mag:focus-visible rect.pt{stroke:#403429;stroke-width:2.4}
.mag.sel rect.pt{stroke:#403429;stroke-width:3}
.mag.dim{opacity:.15;pointer-events:none}
.mag.off{display:none}
.poi{cursor:pointer}
.poi .pt{transition:stroke-width .12s ease}
.poi:hover .pt,.poi:focus-visible .pt{stroke:#403429;stroke-width:2.2}
.poi.sel .pt{stroke:#403429;stroke-width:2.6}
.boekgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:720px){ .boekgrid{grid-template-columns:1fr} }
.poi-boekchip{
display:inline-flex;align-items:center;gap:7px;margin-top:14px;
background:var(--gold-tint);color:var(--gold);font-weight:800;font-size:.74rem;
letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:7px 14px;
}
.hutvogels{margin-top:16px}
.hutvogels>b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.hv-rij{display:flex;flex-wrap:wrap;gap:6px}
.hv-chip{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:5px 11px;font-size:.8rem;font-weight:700;color:var(--ink)}
.hv-chip i{font-style:normal;font-weight:600;font-size:.7rem;color:var(--soft)}
/* touch-action geldt ALLEEN voor aanraking, niet voor de muis. De oude regel
#krugermap.actief{touch-action:none} blokkeerde daarom uitsluitend het scrollen
met de vinger, zonder iets toe te voegen voor muisgebruikers. Weg dus: op de
kaart moet je altijd gewoon kunnen vegen om de pagina te scrollen. */
#krugermap{cursor:grab;touch-action:pan-y;display:block;width:100%;height:100%}
#krugermap.panning{cursor:grabbing}
.wheelhint{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
background:rgba(64,52,41,.86);color:#F7F2EC;
font-family:var(--body);font-weight:700;font-size:.95rem;
padding:14px 26px;border-radius:999px;pointer-events:none;
opacity:0;transition:opacity .25s ease;z-index:4;white-space:nowrap;
}
.wheelhint.zien{opacity:1}
.mapzoom{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:6px;z-index:3}
.daytoggle{
position:absolute;top:14px;left:50%;transform:translateX(-58%);z-index:3;
display:flex;gap:4px;background:var(--white);border:1.5px solid var(--line);
border-radius:999px;padding:4px;box-shadow:0 6px 18px -8px rgba(64,52,41,.35);
}
.daytoggle button{
border:none;background:transparent;cursor:pointer;border-radius:999px;
font-family:var(--body);font-weight:700;font-size:.84rem;color:var(--soft);
padding:8px 18px;
}
.daytoggle button.on{background:var(--sage);color:#fff}
/* vaste soortlegenda op de kaart (wens Niek): kleurcodes altijd zichtbaar */
.maplegend{
position:absolute;left:14px;bottom:14px;z-index:3;
display:flex;flex-direction:column;gap:2px;
background:rgba(255,253,246,.93);border:1.5px solid var(--line);
border-radius:12px;padding:8px 10px;box-shadow:0 6px 18px -8px rgba(64,52,41,.3);
}
.maplegend .mlg{
border:none;background:transparent;cursor:pointer;display:flex;align-items:center;gap:7px;
font-family:var(--body);font-weight:700;font-size:.76rem;color:var(--soft);
padding:2.5px 6px;border-radius:8px;text-align:left;
}
.maplegend .mlg:hover{background:var(--panel);color:var(--ink)}
.maplegend .mlg.on{background:var(--sage);color:#fff}
/* Vierkantjes, want de markeringen op de kaart zijn vierkantjes: een rect van 11x11
met rx 1.5 (melding Niek 18-9 -- de legenda had rondjes en klopte dus niet met wat
je op de kaart ziet). Zelfde maat en zelfde witte randje; de lichte draaiing van de
markeringen blijft er hier af, die hoort bij het magneetje op het bord en zou in een
tekstregel alleen maar scheef staan. */
.maplegend .mlg i{flex:0 0 auto;width:11px;height:11px;border-radius:1.5px;border:1.5px solid #FFFDF6;box-shadow:0 0 0 1px rgba(64,52,41,.25)}
.plannerstand .maplegend{display:none}
.plannerstand #hotspot{display:none}
#hotspot .hotspotzone{cursor:pointer}
#hotspot .hs-ring{fill:rgba(151,117,33,.10);stroke:#977521;stroke-width:2.2;stroke-dasharray:5 5}
#hotspot .hotspotzone:hover .hs-ring,#hotspot .hotspotzone:focus .hs-ring{fill:rgba(151,117,33,.2)}
#hotspot .hs-txt{font-family:Figtree,Arial;font-size:11.5px;font-weight:800;fill:#7A5F3E;pointer-events:none}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:26px}
.lightbox[hidden]{display:none}
.lb-back{position:absolute;inset:0;background:rgba(30,24,16,.9);cursor:pointer}
.lb-box{position:relative;width:min(960px,96vw);background:var(--bg);border-radius:18px;padding:16px 18px 14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.lb-titel{font-family:var(--disp);font-weight:800;font-size:1.05rem}
.lb-x{border:none;background:var(--panel);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1rem;color:var(--ink);font-family:var(--body);flex:0 0 auto}
.lb-x:hover{background:var(--gold-tint)}
.lb-media{aspect-ratio:16/9;min-height:180px;background:#181410;border-radius:12px;overflow:hidden}
/* foto-stand: natuurlijke hoogte i.p.v. vast 16:9-vak (robuust op alle telefoons, en groter beeld) */
.lb-media.is-foto{aspect-ratio:auto;min-height:0}
.lb-media.is-foto .lb-galerij{height:auto}
.lb-media.is-foto .lb-galerij img{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block}
.lb-media video,.lb-media iframe{width:100%;height:100%;display:block;border:0}
.ytwrap{position:relative;width:100%;height:100%;overflow:hidden}
.yt-klik{position:absolute;left:0;right:0;top:0;bottom:80px;background:none;border:none;cursor:pointer;padding:0}
.yt-seek{position:absolute;left:16px;right:16px;bottom:54px;z-index:2;display:flex;gap:10px;align-items:center}
.yt-tijd{font-family:var(--body);font-weight:700;font-size:.74rem;color:#F7F2EC;text-shadow:0 1px 4px rgba(0,0,0,.75);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
.yt-track{position:relative;flex:1;height:22px;cursor:pointer}
.yt-track::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:99px;background:rgba(255,255,255,.38)}
.yt-vul{position:absolute;left:0;top:9px;height:4px;border-radius:99px;background:#C9973B;width:0;pointer-events:none}
.yt-bar{
/* geen VASTE hoogte: bij een smal scherm vielen de knoppen naar een tweede regel
die onder het videovak uitstak en werd afgeknipt -- de knop "Op YouTube" was zo
onzichtbaar (gemeld 31-8). Nu groeit de balk mee naar boven. */
position:absolute;left:0;right:0;bottom:0;min-height:52px;z-index:2;
display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
padding:8px 10px;box-sizing:border-box;
background:linear-gradient(transparent,rgba(24,20,16,.88) 45%);
}
.ytknop{
display:inline-flex;align-items:center;font-family:var(--body);font-weight:700;font-size:.8rem;
color:#F7F2EC;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
border-radius:999px;padding:7px 14px;cursor:pointer;text-decoration:none;backdrop-filter:blur(3px);
}
.ytknop:hover{background:rgba(255,255,255,.28)}
.ytwrap:fullscreen{background:#000}
@media (max-width:720px){
.ytknop{font-size:.72rem;padding:6px 10px}
}
.lb-note{font-size:.84rem;color:var(--soft);margin-top:10px;text-align:center}
.lb-fallback{position:relative;width:100%;height:100%}
.lb-fallback img{width:100%;height:100%;object-fit:cover;opacity:.35;display:block}
.lb-fbtekst{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
color:#F7F2EC;font-weight:700;font-size:1rem;text-align:center;line-height:1.6;
background:rgba(40,32,22,.75);border-radius:14px;padding:16px 24px;width:min(90%,440px);
}
.lb-note a{color:var(--sage-deep)}
.mapzoom button{
width:38px;height:38px;border-radius:10px;cursor:pointer;
background:var(--white);border:1.5px solid var(--line);
font-family:var(--body);font-size:1.15rem;font-weight:700;color:var(--ink);
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 12px -6px rgba(64,52,41,.3);
}
.mapzoom button:hover{border-color:var(--sage);color:var(--sage-deep)}
.spchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.spchip{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
font-family:var(--body);font-weight:700;font-size:.85rem;color:var(--ink);
background:var(--white);border:1.5px solid var(--line);border-radius:999px;
padding:8px 15px;
}
.spchip i{width:13px;height:13px;border-radius:3px;display:inline-block;transform:rotate(-4deg);border:1.5px solid #FFFDF6;box-shadow:0 0 0 1px rgba(64,52,41,.15)}
.spchip:hover{border-color:var(--sage)}
.spchip.on{border-color:var(--ink);background:var(--gold-tint)}
.rhino-note{font-size:.84rem;color:var(--soft);font-family:var(--quote);font-style:italic;margin-top:14px}
.obsfoto{width:100%;max-width:300px;aspect-ratio:1;object-fit:cover;border-radius:14px;margin-top:16px;display:block;box-shadow:0 10px 26px -14px rgba(64,52,41,.5)}
.obscredit{font-size:.78rem;color:var(--soft);margin-top:8px}
.obscredit a{color:var(--sage-deep)}
/* ---------- reisplanner ---------- */
.plannersec{background:var(--white)}
.planner-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
.pl-stap{
display:flex;align-items:center;gap:12px;
font-family:var(--disp);font-weight:800;font-size:1.1rem;margin:30px 0 14px;
}
.pl-stap:first-child{margin-top:0}
/* Stap 2 en 3 zitten sinds de verticale opzet elk in een eigen blok en zijn daar
:first-child — zonder deze regel pakken ze margin-top:0 en plakt stap 2 tegen
de keuzekaarten van stap 1. */
.pl-rij > div > .pl-stap:first-child{margin-top:34px}
/* Korte gouden puls op de reisopzet zodra alle drie de stappen zijn aangeklikt. */
@keyframes routefocuspuls{
0%{box-shadow:0 0 0 0 rgba(151,117,33,.5)}
70%{box-shadow:0 0 0 15px rgba(151,117,33,0)}
100%{box-shadow:0 0 0 0 rgba(151,117,33,0)}
}
.routefocus{border-radius:20px;animation:routefocuspuls 1.1s ease-out 2}
@media (prefers-reduced-motion:reduce){
.routefocus{animation:none;box-shadow:0 0 0 3px rgba(151,117,33,.5)}
}
/* Goud i.p.v. sage: sage is de kleur van een AANGEKLIKTE keuze (.seg button.on),
dus een stap-label in dezelfde kleur leest ten onrechte als "geselecteerd". */
.pl-stap .fnum{
flex:0 0 auto;height:34px;padding:0 15px;border-radius:999px;background:var(--gold-tint);color:#7E6119;
font-family:var(--disp);font-weight:800;font-size:.92rem;display:flex;align-items:center;justify-content:center;white-space:nowrap;
}
.doelen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.doel{
position:relative;text-align:left;cursor:pointer;padding:0;overflow:hidden;
display:flex;flex-direction:column;align-items:stretch;
background:var(--white);border:2px solid var(--line);border-radius:16px;
font-family:var(--body);transition:border-color .15s ease,transform .15s ease;
}
.doel:hover{border-color:var(--sage);transform:translateY(-2px)}
.doel img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.doel .dt{display:block;padding:13px 15px 15px}
.doel .dt b{font-family:var(--disp);font-weight:800;font-size:.98rem;display:block}
.doel .dt span{font-size:.8rem;color:var(--soft);line-height:1.45;display:block;margin-top:3px}
.doel.on{border-color:var(--gold)}
.doel .vink{
position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
background:var(--gold);color:#fff;display:none;align-items:center;justify-content:center;
}
.doel.on .vink{display:flex}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{
font-family:var(--body);font-weight:700;font-size:.88rem;color:var(--soft);
background:var(--bg);border:1.5px solid var(--line);border-radius:999px;
padding:10px 20px;cursor:pointer;
}
.seg button:hover{border-color:var(--sage);color:var(--sage-deep)}
.seg button.on{background:var(--sage);border-color:var(--sage);color:#fff}
.reisopzet{
position:sticky;top:96px;
background:var(--bg);border:1.5px solid var(--line);border-radius:20px;
padding:26px 28px;box-shadow:var(--shadow);
}
.ro-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.ro-kop h3{font-size:1.35rem;font-weight:800}
.ro-n{
flex:0 0 auto;font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
background:var(--gold-tint);color:var(--gold);border-radius:999px;padding:6px 13px;
}
.ro-sub{font-size:.9rem;color:var(--soft);margin-bottom:16px}
.ro-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start}
.ro-kaart svg{width:100%;height:auto;display:block}
.ro-dagen{display:grid;gap:9px}
.ro-dag{display:flex;gap:11px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.ro-dag .ro-d{
flex:0 0 auto;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
background:var(--sage-tint);color:var(--sage-deep);border-radius:8px;padding:5px 9px;margin-top:1px;white-space:nowrap;
}
.ro-dag b{font-family:var(--disp);font-weight:800;font-size:.95rem;display:block}
.ro-dag small{font-size:.8rem;color:var(--soft);display:block;line-height:1.4}
.ro-hl{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.ro-hl span{background:var(--sage-tint);color:var(--sage-deep);font-weight:700;font-size:.8rem;border-radius:999px;padding:6px 13px}
.ro-slaap{font-size:.86rem;color:var(--soft);margin-top:14px}
/* accommodatie-uitklap per kamp in het dagschema */
.ro-dag .ro-inh{flex:1;min-width:0}
.acco{margin-top:7px}
.acco summary{
list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
font-size:.78rem;font-weight:700;color:var(--sage-deep);
border:1px solid var(--line);border-radius:999px;padding:4px 11px;background:var(--bg);
}
.acco summary::-webkit-details-marker{display:none}
.acco summary:hover{border-color:var(--sage)}
.acco summary svg{transition:transform .2s}
.acco[open] summary svg{transform:rotate(180deg)}
.acco-lijst{display:grid;gap:7px;margin-top:9px}
.acco-i{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.acco-i.match{background:var(--gold-tint);border-color:var(--gold)}
.a-tier{flex:0 0 auto;font-weight:800;font-size:.72rem;color:var(--gold);letter-spacing:.05em;margin-top:2px;min-width:34px}
.acco-i b{font-size:.82rem;font-weight:700;display:block;font-family:var(--body)}
.acco-i small{font-size:.76rem;color:var(--soft);line-height:1.45;display:block}
.a-match{font-style:normal;font-weight:800;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:#F1E3C2;border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:1px}
.acco-noot{font-size:.76rem;color:#8A5B3C;background:#F7EDDD;border-radius:8px;padding:7px 10px;margin:0}
.a-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.a-thumb{width:54px;height:40px;border-radius:8px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:pointer;background:none;flex:0 0 auto}
.a-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.a-thumb:hover{border-color:var(--sage)}
.a-fotohint{font-size:.68rem;font-weight:700;color:var(--soft);letter-spacing:.04em}
/* foto-galerij in de lightbox */
.lb-galerij{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.lb-galerij img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block}
.lb-pijl{
position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
border:none;background:rgba(30,24,16,.55);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding-bottom:4px;
}
.lb-pijl.vorige{left:10px}
.lb-pijl.volgende{right:10px}
.lb-pijl:hover{background:rgba(30,24,16,.82)}
.lb-teller{
position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
color:#fff;font-size:.78rem;font-weight:700;background:rgba(30,24,16,.55);border-radius:999px;padding:3px 11px;
}
.ro-tip{
background:var(--gold-tint);border-radius:12px;padding:13px 16px;margin-top:14px;
font-family:var(--quote);font-style:italic;font-size:.92rem;color:#5C4A22;
}
.ro-tip b{font-family:var(--body);font-style:normal;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px}
.ro-prijs{background:var(--panel);border-radius:12px;padding:14px 16px;margin-top:14px}
.ro-prijs > b{font-family:var(--body);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);display:block;margin-bottom:8px}
.ro-prijs-rij{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;color:var(--soft);padding:3px 0}
.ro-prijs-rij b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.ro-prijs .linklike{display:inline-block;margin-top:8px;font-size:.86rem}
.reisopzet .btn{width:100%;justify-content:center;margin-top:18px}
.ro-klein{text-align:center;font-size:.8rem;color:var(--soft);margin-top:10px}
.teaserdoelen{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 24px;margin:30px 0 34px}
.tdoel{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:none;cursor:pointer;font-family:var(--body);width:106px;padding:0}
.tdoel img{width:86px;height:86px;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:0 12px 26px -14px rgba(64,52,41,.55);transition:transform .15s ease,border-color .15s ease}
.tdoel:hover img{transform:scale(1.07);border-color:var(--gold)}
.tdoel span{font-weight:700;font-size:.84rem;color:var(--ink)}
.teaser-custom{margin:22px 0 0}
.teaserpreview{
display:flex;flex-direction:column;gap:16px;text-align:left;cursor:pointer;
padding:24px 26px;border-width:2px;font-family:var(--body);
}
.teaserpreview:hover{border-color:var(--sage)}
.ts-tag{font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ts-body{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:center}
.ts-kaart svg{width:100%;height:auto;display:block}
.ts-chips{display:grid;gap:8px}
.ts-dag{
display:flex;align-items:center;gap:10px;
background:var(--bg);border:1px solid var(--line);border-radius:10px;
padding:8px 13px;font-size:.88rem;color:var(--ink);
}
.ts-dag b{font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-deep);background:var(--sage-tint);border-radius:7px;padding:4px 8px;flex:0 0 auto}
.ts-meer{font-family:var(--quote);font-style:italic;font-size:.84rem;color:var(--soft)}
.ts-cta{align-self:stretch;justify-content:center}
.linklike{
/* padding:0 hoort erbij: een