:root{
  --paper:#F6F2E8; --surface:#FFFFFF; --ink:#1A1710; --muted:#6C6555;
  --line:#E6DFCE; --soft:#EFEADC;
  --gold:var(--djt-accent,#B07A1E); --gold-bright:color-mix(in srgb,var(--djt-accent,#B07A1E) 58%,#ffffff); --dark:color-mix(in srgb,var(--djt-accent,#B07A1E) 34%,#0e0b06); --dark-2:color-mix(in srgb,var(--djt-accent,#B07A1E) 46%,#17110a);
  --tv-grieken:#B4552F; --tv-steden:#2E6E6A; --tv-ontdekkers:#3B4E8C;
  --tv-regenten:#8A3F6E; --tv-pruiken:#4C7A3A;
  --radius:14px; --maxw:1120px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14120C; --surface:#1C1810; --ink:#F4EFE2; --muted:#A99F89;
  --line:#332C1D; --soft:#221D12; --gold:var(--djt-accent,#D9A54A); --dark:color-mix(in srgb,var(--djt-accent,#B07A1E) 30%,#0e0c07); --dark-2:color-mix(in srgb,var(--djt-accent,#B07A1E) 44%,#181309);
}}
:root[data-theme="dark"]{
  --paper:#14120C; --surface:#1C1810; --ink:#F4EFE2; --muted:#A99F89;
  --line:#332C1D; --soft:#221D12; --gold:var(--djt-accent,#D9A54A); --dark:color-mix(in srgb,var(--djt-accent,#B07A1E) 30%,#0e0c07); --dark-2:color-mix(in srgb,var(--djt-accent,#B07A1E) 44%,#181309);
}
*,*::before,*::after{box-sizing:border-box}
body.djt-body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* Zijmarge afdwingen: het thema definieert ook een generieke .wrap-klasse die
   onze padding kan overschrijven. Scope op .djt-body + !important wint altijd. */
.djt-body .wrap{padding-left:22px!important;padding-right:22px!important}
@media(max-width:640px){.djt-body .wrap{padding-left:26px!important;padding-right:26px!important}}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;
  font-size:.98rem;padding:.85em 1.4em;border-radius:999px;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;transition:transform .12s ease,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold); /* terugval voor browsers zonder color-mix */
  background:radial-gradient(120% 100% at 50% 16%,
    color-mix(in srgb, var(--gold) 60%, #fff) 0%,
    var(--gold) 50%,
    color-mix(in srgb, var(--gold) 78%, #000) 100%);
  color:#3a2708;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),inset 0 2px 3px rgba(255,255,255,.38),0 3px 9px rgba(90,60,8,.28);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.btn--gold:hover{color:#3a2708;filter:saturate(1.07) brightness(1.05);transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 6px 18px rgba(90,60,8,.42)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--onDark{border-color:rgba(255,255,255,.32);color:#F6F2E8;background:transparent}
.btn--onDark:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px;border-radius:6px}

/* Topbar */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.5em}
.brand .mark{width:26px;height:26px;flex:none}
.top__cta{display:flex;gap:10px}
.top__cta .btn{padding:.55em 1.05em;font-size:.9rem}
@media(max-width:640px){.top__cta .btn--ghost{display:none}}

/* Hero */
.hero{background:radial-gradient(120% 120% at 82% -10%,var(--dark-2),var(--dark) 60%);
  color:#F6F2E8;position:relative;overflow:hidden;border-bottom:1px solid #000}
.hero::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 12% 20%,rgba(217,165,74,.14),transparent 32%),
    radial-gradient(circle at 88% 70%,rgba(217,165,74,.10),transparent 36%)}
.hero__in{position:relative;z-index:1;padding:40px 0 46px;max-width:760px}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.05;margin:.3em 0 .45em;color:#fff}
.hero h1 em{font-style:italic;color:var(--gold-bright)}
.hero__lead{font-size:1.12rem;line-height:1.5;color:#E9E2CF;max-width:60ch}
.hero__sub{margin-top:12px;color:#B9AF95;max-width:58ch}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 22px}
.fact{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:600;
  color:#EDE6D3;background:rgba(255,255,255,.06);border:1px solid rgba(217,165,74,.28);
  padding:.5em .9em;border-radius:999px}
.fact svg{width:15px;height:15px;color:var(--gold-bright);flex:none}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* Section rhythm */
section{padding:42px 0}
.sec-head{max-width:64ch;margin-bottom:26px}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;margin:.28em 0 0}
.sec-head p{color:var(--muted);margin-top:.7em;font-size:1.05rem}

/* Waarom — reasons */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:720px){.reasons{grid-template-columns:1fr}}
.reason{display:flex;gap:12px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px}
.reason .tick{flex:none;width:30px;height:30px;border-radius:50%;background:var(--soft);
  display:grid;place-items:center;color:var(--gold)}
.reason .tick svg{width:17px;height:17px}
.reason p{font-weight:500}

/* Review */
.review{background:var(--dark);color:#F6F2E8}
.review .wrap{max-width:860px;text-align:center;padding-top:34px;padding-bottom:36px}
.review blockquote{margin:.35em 0 .5em}
.review .eyebrow{color:var(--gold-bright)}
.review blockquote{font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.32;margin:.5em 0 .7em;color:#fff}
.review .stars{color:var(--gold-bright);letter-spacing:3px;font-size:1.1rem}
.review cite{display:block;margin-top:14px;font-style:normal;font-weight:600;color:#C9BFA6;font-size:.95rem}

/* Samenspelen */
.together{background:var(--soft)}
.together__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
@media(max-width:860px){.together__grid{grid-template-columns:1fr;gap:30px}}
.upgrade{margin-top:18px;display:flex;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:16px 18px}
.upgrade strong{color:var(--gold)}
.rekentool{margin-top:20px;border:1px solid var(--gold);border-radius:12px;padding:16px 18px;background:var(--surface)}
.rekentool__q{display:block;font-weight:700;margin-bottom:10px}
.rekentool__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rekentool__row input{width:120px;font:inherit;font-weight:600;padding:.55em .7em;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums}
.rekentool__row input:focus{outline:2px solid var(--gold-bright);border-color:var(--gold)}
.rekentool__hint{color:var(--muted);font-size:.92rem}
.rekentool__out{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.98rem;line-height:1.55}
.rekentool__out .big{font-family:var(--serif);font-weight:600;font-size:1.18rem;color:var(--gold)}
.rekentool__out .price{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rekentool__out .muted{display:block;color:var(--muted);font-size:.88rem;margin-top:4px}
.feat__head{margin:30px 0 12px;font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:0}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.feat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.feat{grid-template-columns:1fr}}
.feat__item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.feat__item .ic{width:48px;height:48px;border-radius:13px;background:var(--dark);
  display:grid;place-items:center;margin-bottom:12px;
  box-shadow:inset 0 0 0 1px rgba(217,165,74,.22)}
.feat__item .ic svg{width:30px;height:30px}
.feat__item h3{font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:0}

/* Finder */
.finder__controls{display:flex;flex-direction:column;gap:16px;margin-bottom:26px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-row .lbl{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-right:6px;min-width:64px}
.chip{font-family:var(--sans);font-size:.86rem;font-weight:600;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);padding:.42em .85em;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5em;transition:.14s}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--muted))}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip[aria-pressed="true"] .dot{outline:2px solid var(--paper);outline-offset:1px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;position:relative;
  border-top:3px solid var(--c,var(--gold));transition:transform .14s,box-shadow .14s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -22px rgba(0,0,0,.5)}
.card__stad{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:1.28rem;line-height:1.15}
.card__tv{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;font-size:.76rem;
  font-weight:600;color:var(--c,var(--gold));background:color-mix(in srgb,var(--c,var(--gold)) 12%,transparent);
  padding:.32em .7em;border-radius:999px}
.card__tv .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--gold))}
.card p{font-size:.95rem;color:var(--muted);flex:1}
.card__also{font-size:.82rem;color:var(--muted);font-style:italic}
.card__link{font-weight:600;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:.4em}
.card__link:hover{color:var(--gold)}
.card__link svg{width:15px;height:15px;transition:transform .14s}
.card__link:hover svg{transform:translateX(3px)}
.card[hidden]{display:none!important}
.finder__empty{color:var(--muted);padding:30px 0;font-style:italic}

/* Steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.step__head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.step__n{line-height:1;flex:0 0 auto}
.step__n::before{counter-increment:step;content:counter(step);
  font-family:var(--sans);font-weight:800;font-size:2.4rem;line-height:1;color:var(--ink);letter-spacing:-.02em}
.step h3{font-family:var(--sans);font-size:1.08rem;font-weight:700;letter-spacing:0;margin:0}
.step p{color:var(--muted);font-size:.96rem}
.pay-note{margin-top:20px;font-weight:600;color:var(--ink);display:inline-flex;gap:.5em;align-items:center}
.pay-note svg{width:18px;height:18px;color:var(--gold)}

/* FAQ */
.faq{display:grid;gap:6px;max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:9px 14px;font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:1 1 auto;min-width:0} /* vraag als één blok, zodat <mark> bij zoeken de tekst niet uit elkaar trekt */
.faq summary .pm{flex:none;width:18px;height:18px;position:relative;transition:.2s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--gold);
  border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:14px;height:2px}
.faq summary .pm::after{width:2px;height:14px;transition:.2s}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--gold)}
.faq p{padding:0 14px 11px;color:var(--muted);font-size:.95rem;line-height:1.5}
.faq p strong{color:var(--ink)}

/* Closing CTA */
.closing{background:radial-gradient(120% 130% at 20% 0%,var(--dark-2),var(--dark) 62%);color:#F6F2E8}
.closing .wrap{text-align:center;max-width:720px;padding:10px 22px 14px}
.closing h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:#fff}
.closing p{color:#C9BFA6;margin:.7em auto 0;max-width:52ch}
.closing .hero__cta{justify-content:center;margin-top:26px}

.closing__credit{margin-top:28px;color:#C9BFA6;font-size:.85rem}
.foot{background:var(--paper);padding:0;border-top:1px solid var(--line)}

/* Fotolint (footer): schermvullend, even grote thumbnails, beperkte hoogte, swipe */
.fotolint{position:relative;width:100%;padding:20px 0}
.fotolint__track{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  justify-content:safe center;
  padding:0 8px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fotolint__track::-webkit-scrollbar{display:none}
.fotolint__item{flex:0 0 auto;width:230px;height:150px;padding:0;border:0;cursor:pointer;
  border-radius:8px;overflow:hidden;scroll-snap-align:start;background:var(--soft)}
.fotolint__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.fotolint__item:hover img{transform:scale(1.05)}
.fotolint__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;
  border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;display:grid;place-items:center}
.fotolint__nav:hover{background:rgba(0,0,0,.8)}
.fotolint__prev{left:8px}.fotolint__next{right:8px}
@media(max-width:640px){.fotolint__item{width:180px;height:120px}.fotolint__nav{display:none}}

/* Lightbox */
.djs-lb{position:fixed;inset:0;z-index:9999;background:rgba(8,7,3,.93);display:none;
  align-items:center;justify-content:center;touch-action:pan-y;overflow:hidden}
.djs-lb img{will-change:transform,opacity}
.djs-lb.open{display:flex}
.djs-lb img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-drag:none}
.djs-lb__close{position:absolute;top:14px;right:20px;font-size:2.2rem;line-height:1;color:#fff;
  background:none;border:0;cursor:pointer;z-index:2}
.djs-lb__nav{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem;line-height:1;color:#fff;
  background:none;border:0;cursor:pointer;padding:8px 20px;z-index:2}
.djs-lb__prev{left:4px}.djs-lb__next{right:4px}
@media(max-width:640px){.djs-lb__nav{font-size:2.2rem;padding:6px 10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.btn:hover,.card:hover{transform:none}}


/* ---- Hero-beeld: subtiel motief dat in de donkere achtergrond overvloeit ---- */
:root{--hero-img:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20760%20520%22%20fill%3D%22none%22%20stroke%3D%22%23D9A54A%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Ccircle%20cx%3D%22612%22%20cy%3D%22120%22%20r%3D%2246%22%20stroke-opacity%3D%22.55%22%2F%3E%0A%3Cpath%20d%3D%22M612%2084v14M612%20142v14M574%20120h14M636%20120h14%22%20stroke-opacity%3D%22.55%22%2F%3E%0A%3Cpath%20d%3D%22M612%20120l20-26%22%20stroke-opacity%3D%22.7%22%2F%3E%0A%3Cpath%20d%3D%22M120%20470%20C%20220%20430%2C%20250%20360%2C%20340%20356%20S%20470%20400%2C%20520%20340%20S%20600%20250%2C%20680%20262%22%20stroke-dasharray%3D%222%2012%22%20stroke-opacity%3D%22.8%22%2F%3E%0A%3Cpath%20d%3D%22M336%20350a12%2012%200%201%200%20.01%200M332%20356c-2%2010%204%2020%204%2020s6-10%204-20%22%20stroke-opacity%3D%22.9%22%2F%3E%0A%3Cpath%20d%3D%22M676%20256a11%2011%200%201%200%20.01%200M672%20262c-2%209%204%2018%204%2018s6-9%204-18%22%20stroke-opacity%3D%22.9%22%2F%3E%0A%3Cg%20stroke-opacity%3D%22.7%22%3E%0A%3Cpath%20d%3D%22M470%20470V372l34-24%2034%2024v98%22%2F%3E%0A%3Cpath%20d%3D%22M504%20348v-22M496%20326h16%22%2F%3E%0A%3Cpath%20d%3D%22M556%20470V392l28-20%2028%2020v78%22%2F%3E%0A%3Cpath%20d%3D%22M612%20470V360l30-22%2030%2022v110%22%2F%3E%0A%3Cpath%20d%3D%22M642%20338v-20M634%20318h16%22%2F%3E%0A%3Cpath%20d%3D%22M700%20470V400l24-16%2024%2016v70%22%2F%3E%0A%3Cpath%20d%3D%22M452%20470h330%22%2F%3E%0A%3Cpath%20d%3D%22M486%20470v-40h36v40M574%20470v-34h30v34M628%20470v-52h34v52%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E")}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--hero-img) no-repeat right center/cover;opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 56%);
  mask-image:linear-gradient(90deg,transparent 2%,#000 56%)}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--dark) 30%,transparent 94%),
    linear-gradient(0deg,var(--dark) 1%,transparent 44%)}
.hero__in{z-index:2}
.hero::after{z-index:1}
@media(max-width:640px){.hero__bg{opacity:.5;background-position:center center;
  -webkit-mask-image:none;mask-image:none}}
/* Groepsuitje-hero: egale dimming over de hele breedte, net als de fotobanden
   ("De stad als speelveld"). Geen links-naar-rechts masker meer; de foto staat op
   ~55% dekking en een gelijkmatige, iets naar boven donkerdere sluier houdt de
   titel/tekst goed leesbaar. */
.hero--flat .hero__bg{background:var(--hero-img) center/cover no-repeat;opacity:.55;
  -webkit-mask-image:none;mask-image:none}
.hero--flat .hero__scrim{background:linear-gradient(180deg,
  color-mix(in srgb,var(--dark) 68%,transparent) 0%,
  color-mix(in srgb,var(--dark) 52%,transparent) 52%,
  color-mix(in srgb,var(--dark) 40%,transparent) 100%)}
@media(max-width:640px){.hero--flat .hero__bg{opacity:.5}}

/* ---- Collage: foto-impressie die met transparantie in de pagina opgaat ---- */
.collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:96px;gap:12px;margin-top:6px}
@media(max-width:860px){.collage{grid-template-columns:repeat(4,1fr);grid-auto-rows:84px}}
@media(max-width:520px){.collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:100px}}
.collage__cell{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:var(--soft)}
.collage__cell img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;mix-blend-mode:luminosity;filter:saturate(.85)}
.collage__cell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 28%,transparent),color-mix(in srgb,var(--gold) 16%,transparent))}
.collage__cell--tall{grid-row:span 2}
.collage__cell--wide{grid-column:span 2}
.collage__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);opacity:.6}
.collage__ph svg{width:26px;height:26px}
.collage__note{margin-top:12px;font-size:.85rem;color:var(--muted);font-style:italic}

/* ---- Foto-blokken: foto die met transparantie in de (donkere) achtergrond overvloeit ---- */
.photoband{position:relative;overflow:hidden}
.photoband>.wrap{position:relative;z-index:2}
.band__bg{position:absolute;inset:0;z-index:0;background:var(--band-img) center/cover no-repeat;opacity:.55}
/* Review-band ("Ervaringen van andere teams"): uitsnede iets omhoog zodat de
   koppen van de spelers volledig in beeld komen (niet te hoog: dan domineert het
   plafond; niet te laag: dan worden de koppen afgesneden). */
.review .band__bg{background-position:center 30%}
.band__scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.band__scrim--dark{background:linear-gradient(180deg,
  color-mix(in srgb,var(--dark) 72%,transparent) 0%,
  color-mix(in srgb,var(--dark) 48%,transparent) 52%,
  color-mix(in srgb,var(--dark) 26%,transparent) 100%)}
@media(max-width:640px){
  .band__bg{opacity:.62}
  .band__scrim--dark{background:linear-gradient(180deg,
    color-mix(in srgb,var(--dark) 56%,transparent) 0%,
    color-mix(in srgb,var(--dark) 34%,transparent) 55%,
    color-mix(in srgb,var(--dark) 16%,transparent) 100%)}
}

/* ---- Manifest-blok (donker, met transparante foto) ---- */
.manifest{background:var(--dark);color:#F6F2E8}
.manifest .wrap{max-width:780px;text-align:center;padding:54px 22px}
.manifest .eyebrow{color:var(--gold-bright)}
.manifest h2{font-size:clamp(1.7rem,3.6vw,2.5rem);color:#fff;margin:.3em 0 .5em}
.manifest p{color:#DBD2BE;font-size:1.1rem;line-height:1.6;margin:0 auto;max-width:60ch}

/* ---- Aansluiting op de gedeelde site-footer (chrome) ----
   De chrome-footer heeft standaard margin-top:40px; op de schooluitje-pagina
   staat de fotolint er direct boven, dus dat wordt een lege lichte band.
   We laten de donkere footer hier vlak op de fotolint aansluiten. */
.djt-body .djc-footer{margin-top:0}

/* ---- Locatiezoeker + kaart (djt-map/djt-nearby uit de Templates-plugin) ----
   We borgen de EX-accentkleur (goud) voor de knoppen/links van de kaart, zodat
   die bij de huisstijl van deze pagina past, ongeacht de spelcontext. */

.djs-locaties{margin-top:6px}
.djs-locaties .djt-map{margin-bottom:0}

/* ---- Over-ons: drie pijlers (3 kolommen) met beschrijving onder de kop ---- */
.feat--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.feat--3{grid-template-columns:1fr}}
.feat__item p{color:var(--muted);font-size:.95rem;line-height:1.5;margin-top:6px}

/* ---- Hero met foto-blokbehandeling (over-ons): zelfde transparantie/effect
   als de donkere fotoblokken. De foto is beter zichtbaar (geen linker-masker),
   met een donker-naar-lichter verloop van boven naar onder; een subtiel
   linker-verloop houdt de tekst goed leesbaar. ---- */
.hero--photo .hero__bg{opacity:.62;-webkit-mask-image:none;mask-image:none;background-position:center}
.hero--photo .hero__scrim{background:
  linear-gradient(180deg,
    color-mix(in srgb,var(--dark) 74%,transparent) 0%,
    color-mix(in srgb,var(--dark) 50%,transparent) 54%,
    color-mix(in srgb,var(--dark) 30%,transparent) 100%),
  linear-gradient(90deg,
    color-mix(in srgb,var(--dark) 52%,transparent) 0%,
    transparent 72%)}

/* ===== Veelgestelde vragen (FAQ) ===== */
.hero--compact .hero__in{padding:32px 0 30px}
.hero--compact h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.hero__lead a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:2px}

.faq-controls{padding:30px 0 22px}
.faq-controls .wrap{max-width:900px}

/* Zoekbalk */
.faq-search{position:relative;display:flex;align-items:center;margin:0 0 16px}
.faq-search__ic{position:absolute;left:16px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.faq-search__input{width:100%;font:inherit;font-size:1.02rem;padding:.85em 2.6em .85em 2.9em;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.03);transition:border-color .15s,box-shadow .15s}
.faq-search__input::-webkit-search-cancel-button{display:none}
.faq-search__input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 30%,transparent)}
.faq-search__input::placeholder{color:var(--muted)}
.faq-search__clear{position:absolute;right:10px;width:30px;height:30px;border:0;border-radius:50%;
  background:var(--soft);color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.faq-search__clear:hover{background:var(--gold);color:#1a1305}
.faq-search__clear[hidden]{display:none}

/* Categorie-filterknoppen */
.faq-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.faq-cat{appearance:none;-webkit-appearance:none;font-family:var(--sans);font-weight:600;font-size:.9rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);line-height:1.1;
  padding:.5em .95em;border-radius:999px;transition:.15s;cursor:pointer}
.faq-cat:hover{border-color:var(--gold);color:var(--gold)}
.faq-cat.is-active{background:var(--gold);border-color:var(--gold);color:#1a1305}

/* Paginabrede categoriebanden — kleuren uit de EX-huisstijl (zoals de andere pagina's) */
.faq-group{padding:34px 0;margin:0;border:0;background:var(--cat-bg,var(--paper))}
.faq-group>.wrap{max-width:var(--maxw)}
.faq-group__title{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:0 0 14px;color:var(--ink)}
.faq-group[hidden]{display:none}

/* Achtergrondkleuren per categorie, cyclisch uit de huisstijl-tokens (past zich aan licht/donker aan) */
.faq-group:nth-child(4n+1){--cat-bg:var(--soft)}
.faq-group:nth-child(4n+2){--cat-bg:var(--surface)}
.faq-group:nth-child(4n+3){--cat-bg:var(--dark)}
.faq-group:nth-child(4n+4){--cat-bg:var(--paper)}

/* Kaartjes iets laten liften zodat ze op elke lichte band opvallen */
.faq-group .faq details{box-shadow:0 1px 3px rgba(20,17,9,.06)}

/* Donkere band (zoals de fotobanden/afsluiter): tekst, kaartjes en accenten omgekeerd */
.faq-group:nth-child(4n+3) .faq-group__title{color:#fff}
.faq-group:nth-child(4n+3) .faq details{background:var(--dark-2);border-color:rgba(255,255,255,.14);box-shadow:none}
.faq-group:nth-child(4n+3) .faq summary{color:#F6F2E8}
.faq-group:nth-child(4n+3) .faq details[open] summary{color:var(--gold-bright)}
.faq-group:nth-child(4n+3) .faq summary .pm::before,
.faq-group:nth-child(4n+3) .faq summary .pm::after{background:var(--gold-bright)}
.faq-group:nth-child(4n+3) .faq .ans p{color:#CFC7B4}
.faq-group:nth-child(4n+3) .faq .ans p strong{color:#fff}
.faq-group:nth-child(4n+3) .faq .ans p a:not(.btn){color:var(--gold-bright)}
.faq-group:nth-child(4n+3) .faq .ans-list{color:#CFC7B4}
.faq-group:nth-child(4n+3) .faq .ans-list li::marker{color:var(--gold-bright)}
.faq-group:nth-child(4n+3) .faq .ans-cta .btn--ghost{color:#F6F2E8;border-color:rgba(255,255,255,.4)}
.faq-group:nth-child(4n+3) .faq .ans-cta .btn--ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}

/* Rijke antwoorden */
.faq .ans{padding:2px 0 4px}
.faq .ans p{padding:0 14px 11px;color:var(--muted);font-size:.95rem;line-height:1.55;margin:0}
.faq .ans p strong{color:var(--ink)}
.faq .ans p a:not(.btn){color:var(--gold);font-weight:600}
.faq .ans-list{margin:0 0 11px;padding:0 14px 0 34px;color:var(--muted);font-size:.95rem;line-height:1.55}
.faq .ans-list li{margin:0 0 5px}
.faq .ans-list li::marker{color:var(--gold);font-weight:700}
.faq .ans-cta{display:flex;flex-wrap:wrap;gap:10px;padding:4px 14px 12px}
.faq .ans-cta .btn{font-size:.92rem;padding:.6em 1.1em}

/* Zoek-highlight + geen resultaten */
.faq mark{background:color-mix(in srgb,var(--gold-bright) 42%,transparent);color:inherit;
  border-radius:3px;padding:0 .1em}
.faq-item[hidden]{display:none}
.faq-noresults{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;color:var(--muted);font-size:.98rem}
.faq-noresults b{color:var(--ink)}


/* ---- Gedeelde lightbox (window.DJTGallery uit de templates-plugin) ----
   Deze regels zijn een kopie van .djt-lightbox in de templates-plugin, zodat de
   fotolint op de landingspagina's exact dezelfde veeg-/slide-lightbox toont zonder
   dat de volledige templates-CSS hoeft te laden. */
.djt-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);padding:24px}
.djt-lightbox[aria-hidden="false"]{display:flex}
body.djt-lightbox-open{overflow:hidden}
.djt-lightbox__stage{position:relative;flex:1 1 auto;width:100%;height:100%;overflow:hidden;touch-action:pan-y;cursor:grab}
.djt-lightbox__stage:active{cursor:grabbing}
.djt-lightbox__track{position:absolute;inset:0;will-change:transform}
.djt-slide{position:absolute;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.djt-slide--prev{left:-100%}.djt-slide--cur{left:0}.djt-slide--next{left:100%}
.djt-slide img{width:auto;height:auto;max-width:100%;max-height:92vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.djt-lightbox__close{position:absolute;top:14px;right:16px;z-index:3;width:44px;height:44px;padding:0;border:none;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.djt-lightbox__close:hover{background:rgba(255,255,255,.28)}
.djt-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;padding:0;border:none;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.djt-lightbox__nav:hover{background:rgba(255,255,255,.28)}
.djt-lightbox__nav--prev{left:14px}.djt-lightbox__nav--next{right:14px}
.djt-lightbox__nav[hidden]{display:none}


/* ===== Parkpagina-specifiek (bovenop de schooluitje-basis) ===== */
/* Praktische info: twee kolommen (deflist + echte kaart) */
.pg-info{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;margin-top:6px}
@media(max-width:860px){.pg-info{grid-template-columns:1fr;gap:26px}}
.pg-deflist{margin:0;padding:0}
.pg-deflist .row{display:grid;grid-template-columns:190px 1fr;gap:10px 18px;padding:13px 0;border-bottom:1px solid var(--line)}
.pg-deflist .row:first-child{padding-top:0}
.pg-deflist .row:last-child{border-bottom:0}
@media(max-width:560px){.pg-deflist .row{grid-template-columns:1fr;gap:2px}}
.pg-deflist dt{font-weight:700;color:var(--ink);margin:0}
.pg-deflist dd{margin:0;color:var(--muted)}
.pg-deflist dd a{color:var(--gold);font-weight:600}
/* Echte kaart (Leaflet .djt-map uit front.css) */
.pg-mapwrap .djt-map{height:340px;margin:0;border:1px solid var(--line);border-radius:var(--radius)}
.pg-mapwrap .btn{margin-top:14px}
/* Terugval-kaartkaart zonder coordinaten */
.pg-mapcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center;
  background-image:linear-gradient(color-mix(in srgb,var(--gold) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--gold) 8%,transparent) 1px,transparent 1px);background-size:26px 26px}
.pg-mapcard__pin{width:40px;height:40px;margin:0 auto 8px;color:var(--gold)}
.pg-mapcard__pin svg{width:100%;height:100%}
.pg-mapcard__place{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.pg-mapcard__adres{color:var(--muted);font-size:.92rem;margin:.3em 0 14px}
/* Facts-icoontjes al identiek aan schooluitje; galerij-hoeken bijwerken */
.djt-gallery__img{border-radius:10px}
/* Kaartjes (andere spellen/plekken): titel serif, nettere hoogte */
.card h3{font-size:1.28rem;line-height:1.15}
/* Prose + smalle leesbreedte voor de tekstsecties */
.pg-narrow{max-width:840px}
.pg-prose{max-width:72ch;color:var(--ink);font-size:1.05rem;line-height:1.72}
.pg-prose p{margin:0 0 1em}
.pg-prose :last-child{margin-bottom:0}
.pg-prose a{color:var(--gold);font-weight:600}
/* Stappen: tekst zonder titel netjes uitlijnen naast het nummer */
.step__text{color:var(--muted);font-size:.98rem}

/* ===== Aanpassingen na review (contrast, centrering, witte randen) ===== */
/* Kruimelpad bovenaan gecentreerd */
.djt-park-nieuw .djt-breadcrumb{text-align:center}
/* Facts-chips + hun rand wit i.p.v. goud/oranje (leest beter op elk merk-accent) */
.fact{border-color:rgba(255,255,255,.32)}
.fact svg{color:#fff}
/* Primaire knop: licht accentvlak met donkere accenttekst — hoog contrast op de
   donkere hero/CTA, en merk-veilig (werkt voor groen én goud). Vervangt het
   metallic goudverloop met donkerbruine tekst dat op groen te weinig contrast gaf. */
.btn--gold{
  background:color-mix(in srgb, var(--gold) 46%, #ffffff);
  color:color-mix(in srgb, var(--gold) 72%, #000000);
  border-color:transparent;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.btn--gold:hover{
  filter:brightness(1.04);
  color:color-mix(in srgb, var(--gold) 72%, #000000);
  transform:translateY(-1px);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.55)}
/* Secundaire knop op donker: iets duidelijker contrast */
.btn--onDark{border-color:rgba(255,255,255,.5);color:#fff}
.btn--onDark:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
/* Knop-icoontjes een vaste (kleine) maat — anders rendert een losse SVG enorm */
.djt-park-nieuw .btn svg{width:16px;height:16px;flex:none}
/* Kaartknop compact en op één regel (was groot met een reuzenpijl) */
.pg-mapwrap__btn{margin-top:14px;padding:.55em 1.05em;font-size:.9rem;gap:.45em;white-space:nowrap;align-self:start}
.pg-mapwrap{display:flex;flex-direction:column;align-items:flex-start}
.pg-mapwrap .djt-map{width:100%}

/* ===== Extra parkelementen + hero-foto beter zichtbaar ===== */
/* Hero-foto: vrijwel vol zichtbaar, geen linkermasker; sluier alleen links
   (achter de tekst) donker genoeg, naar rechts steeds transparanter. */
.djt-park-nieuw .hero__bg{
  opacity:.92; -webkit-mask-image:none; mask-image:none; background-position:center;
}
.djt-park-nieuw .hero__scrim{
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--dark) 84%, transparent) 0%,
      color-mix(in srgb, var(--dark) 60%, transparent) 42%,
      color-mix(in srgb, var(--dark) 28%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--dark) 55%, transparent) 0%,
      transparent 52%);
}
/* Iets meer donker onder de facts/knoppen bij smalle schermen (leesbaarheid) */
@media(max-width:640px){
  .djt-park-nieuw .hero__scrim{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--dark) 55%, transparent) 0%,
      color-mix(in srgb, var(--dark) 42%, transparent) 55%,
      color-mix(in srgb, var(--dark) 60%, transparent) 100%);
  }
}

/* Hero-aside: beoordelingssterren + prijssticker naast de tekst */
.djt-park-nieuw .hero__aside{margin-top:24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.djt-park-nieuw .hero__rating{color:var(--gold-bright)}
.djt-park-nieuw .hero__sticker{flex:none}
.djt-park-nieuw .hero__sticker .djt-price{margin:0}

/* Stap-afbeeldingen bij "Zo werkt het" */
.djt-park-nieuw .step{display:flex;flex-direction:column}
.djt-park-nieuw .step__media{margin-top:12px}
.djt-park-nieuw .step__media img{width:100%;height:auto;border-radius:10px;display:block}

/* Fotolint-sectie: kop in de container, strip schermbreed (schooluitje) */
.djt-park-nieuw .pg-fotos{padding-bottom:20px}
.djt-park-nieuw .pg-fotos .fotolint{margin-top:4px}

/* ===== Hero-foto als echte afbeelding + zwarte sluier links → transparant rechts =====
   Geldt voor alle merken (Escape Xperience én Drakenjacht): de gekozen hero-foto
   (eigen _1 of de alleparken-terugval) vult de hero; links zwart voor leesbare
   tekst, naar rechts transparant zodat de foto goed doorkomt. */
.djt-park-nieuw .hero{position:relative;overflow:hidden}
.djt-park-nieuw .hero__photo{
  position:absolute;inset:0;z-index:0;margin:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* Placeholder-hero's (alleparken): personen staan bovenin, dus de bovenkant
   altijd in beeld houden i.p.v. midden (voorkomt afgesneden hoofden op breed). */
.djt-park-nieuw .hero__photo--top{object-position:center top}
.djt-park-nieuw .hero--photo::after{display:none} /* geen goud-glow over een foto */
.djt-park-nieuw .hero__scrim{
  background:linear-gradient(90deg,
    rgba(0,0,0,.94) 0%,
    rgba(0,0,0,.80) 26%,
    rgba(0,0,0,.45) 58%,
    rgba(0,0,0,.08) 100%);
}
@media(max-width:640px){
  .djt-park-nieuw .hero__scrim{
    background:linear-gradient(180deg,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.48) 48%,
      rgba(0,0,0,.70) 100%);
  }
}
.djt-park-nieuw .hero__in{position:relative;z-index:2}

/* ===== Leesbaarheid op de foto-hero: frosted-glass chips/knop + tekstschaduw =====
   Alleen wanneer er een foto is (.hero--photo). Zo blijven de elementen leesbaar op
   zowel donkere als lichte delen van de foto, terwijl de foto goed zichtbaar blijft. */
.djt-park-nieuw .hero--photo .eyebrow,
.djt-park-nieuw .hero--photo h1,
.djt-park-nieuw .hero--photo .hero__lead{
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.djt-park-nieuw .hero--photo .fact{
  background:rgba(12,15,12,.44);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border-color:rgba(255,255,255,.34);color:#fff;
}
.djt-park-nieuw .hero--photo .fact svg{color:#fff}
.djt-park-nieuw .hero--photo .btn--onDark{
  background:rgba(12,15,12,.42);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border-color:rgba(255,255,255,.5);color:#fff;
}
.djt-park-nieuw .hero--photo .btn--onDark:hover{
  background:rgba(12,15,12,.60);border-color:var(--gold-bright);color:var(--gold-bright);
}
/* Primaire "Boek …"-knop: hetzelfde matglas als de knoppen eromheen, maar
   getint met de thema-/accentkleur (groen bij Drakenjacht, goud bij EX). */
.djt-park-nieuw .hero--photo .btn--gold{
  background:color-mix(in srgb, var(--djt-accent,#2f5233) 60%, transparent);
  -webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);
  border:1.5px solid color-mix(in srgb, var(--djt-accent,#2f5233) 38%, rgba(255,255,255,.62));
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45);
  box-shadow:0 6px 22px -6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2);
  filter:none;
}
.djt-park-nieuw .hero--photo .btn--gold:hover{
  background:color-mix(in srgb, var(--djt-accent,#2f5233) 76%, transparent);
  border-color:color-mix(in srgb, var(--djt-accent,#2f5233) 26%, rgba(255,255,255,.85));
  color:#fff;transform:translateY(-1px);filter:none;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
/* Mobiel: iets meer diepte in de content-zone (naast de tekstschaduw) */
@media(max-width:640px){
  .djt-park-nieuw .hero--photo .hero__scrim{
    background:linear-gradient(180deg,
      rgba(0,0,0,.66) 0%,
      rgba(0,0,0,.42) 42%,
      rgba(0,0,0,.30) 70%,
      rgba(0,0,0,.55) 100%);
  }
}

/* ===== Kruimelpad verticaal gelijk + plaatsnaam beter zichtbaar op de foto ===== */
/* Gelijke ruimte boven/onder het kruimelpad (was 16px boven, 4px onder) */
.djt-park-nieuw .djt-breadcrumb{padding-top:14px;padding-bottom:14px}
/* Plaatsnaam (eyebrow) op een foto-hero: wit i.p.v. licht accent, met schaduw */
.djt-park-nieuw .hero--photo .eyebrow{color:#fff;opacity:.95}

/* ===================================================================
   WIT + GROEN — schoon kleursysteem (vervangt het perkament-canvas)
   Bijna-witte hoofdvlakken ↔ lichtgroene tussenvlakken, witte kaarten
   die "liften", donkergroene banden. Tekst donker op licht, wit op
   donker. Alles afgeleid uit het spel-accent (groen bij Drakenjacht,
   goud bij Escape Xperience), dus merk-veilig.
   =================================================================== */
:root{
  --paper:   color-mix(in srgb, var(--djt-accent,#2f5233) 8%,  #ffffff);
  --soft:    color-mix(in srgb, var(--djt-accent,#2f5233) 14%, #ffffff);
  --surface: #ffffff;
  --line:    color-mix(in srgb, var(--djt-accent,#2f5233) 18%, #e7e9e2);
  --muted:   color-mix(in srgb, var(--djt-accent,#2f5233) 32%, #545a4b);
  --ink:     color-mix(in srgb, var(--djt-accent,#2f5233) 20%, #141810);
}
body.djt-paginastijl{background:var(--paper)}

/* Witte kaarten "liften" op de lichte vlakken (rustige schaduw + rand) */
.djt-park-nieuw .card,
.djt-park-nieuw .step,
.djt-park-nieuw .pg-mapcard,
.djt-park-nieuw .djt-card{box-shadow:0 2px 12px -7px rgba(18,36,18,.28)}

/* Kruimelpad-band: eigen lichtgroene themakleur, volle breedte, leesbaar contrast */
.djt-park-nieuw .pg-crumbband{background:var(--soft);border-bottom:1px solid var(--line)}
.djt-park-nieuw .pg-crumbband .djt-breadcrumb{padding-top:14px;padding-bottom:14px;color:var(--ink)}
.djt-park-nieuw .pg-crumbband .djt-breadcrumb a{color:color-mix(in srgb,var(--djt-accent) 64%,#000);text-decoration:none}
.djt-park-nieuw .pg-crumbband .djt-breadcrumb a:hover{color:var(--djt-accent);text-decoration:underline}
.djt-park-nieuw .pg-crumbband .djt-breadcrumb span{color:color-mix(in srgb,var(--djt-accent) 45%,#8a8f80)}
.djt-park-nieuw .pg-crumbband .djt-breadcrumb__current{color:var(--ink);font-weight:600}

/* ===== Hero tot de menubalk (immersief) + dun wit lijntje + kruimelpad op de foto =====
   Zoals de landingspagina's: geen aparte kruimelpad-band; de foto loopt door tot de
   menubalk met een dun wit scheidingslijntje, en het kruimelpad staat subtiel bovenin
   de hero (over de foto) — navigatie en SEO blijven behouden. */
.djt-park-nieuw .hero{border-top:1px solid rgba(255,255,255,.5)}
.djt-park-nieuw .hero__in{padding-top:24px}
.djt-park-nieuw .hero .djt-breadcrumb{
  max-width:none;padding:0;margin:0 0 20px;font-size:.82rem;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.djt-park-nieuw .hero .djt-breadcrumb a{color:rgba(255,255,255,.86);text-decoration:none}
.djt-park-nieuw .hero .djt-breadcrumb a:hover{color:#fff;text-decoration:underline}
.djt-park-nieuw .hero .djt-breadcrumb span{color:rgba(255,255,255,.55)}
.djt-park-nieuw .hero .djt-breadcrumb__current{color:#fff;font-weight:600}

/* ===== Donkergroene "together"-banden — sterk contrast met de witte secties =====
   De together-secties (praktische informatie, feit & fictie, andere plekken)
   krijgen een diepe themagroene achtergrond met lichte tekst, zodat de pagina
   duidelijk afwisselt tussen licht (wit / zeer lichtgroen) en donker (groen).
   Alles is afgeleid van --djt-accent, dus merk-veilig (groen bij Drakenjacht,
   diep goud-bruin bij Escape Xperience). De reviewband (.review-wrap) heeft eigen
   donkere kaarten en blijft daarom bewust op de lichte ondergrond. */
:root{
  --band-dark:      color-mix(in srgb, var(--djt-accent,#2f5233) 44%, #16241a);
  --band-dark-2:    color-mix(in srgb, var(--djt-accent,#2f5233) 54%, #1b2b1e);
  --on-dark:        rgba(255,255,255,.90);
  --on-dark-soft:   rgba(255,255,255,.80);
  --on-dark-bright: color-mix(in srgb, var(--djt-accent,#2f5233) 30%, #ffffff);
}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft){
  background:linear-gradient(180deg,var(--band-dark-2),var(--band-dark));
  color:var(--on-dark);
}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .sec-head h2{color:#fff}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .sec-head p{color:var(--on-dark-soft)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .eyebrow{color:var(--on-dark-bright)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-prose{color:var(--on-dark)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-prose strong{color:#fff}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-prose a{color:var(--on-dark-bright);text-decoration-color:color-mix(in srgb,var(--on-dark-bright) 55%,transparent)}
/* Definitielijst (praktische info) */
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-deflist .row{border-bottom-color:rgba(255,255,255,.16)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-deflist dt{color:var(--on-dark-bright)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-deflist dd{color:var(--on-dark-soft)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-deflist dd a{color:var(--on-dark-bright)}
/* Mapcard: lichte "glas"-kaart die op de donkere band oplicht */
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-mapcard{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);
  box-shadow:none;color:var(--on-dark);
}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-mapcard__pin{color:var(--on-dark-bright)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-mapcard__place{color:#fff}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .pg-mapcard__adres{color:var(--on-dark-soft)}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .djt-map{border-color:rgba(255,255,255,.16)}
/* Witte kaarten (bijv. "andere plekken") liften met wat meer diepte op donker */
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .card{box-shadow:0 16px 34px -24px rgba(0,0,0,.75)}

/* ===== Witte "Zo werkt het"-sectie (afwisseling met de lichtgroene secties) =====
   De stappen-sectie krijgt een volledig witte achtergrond, zodat twee opeenvolgende
   lichte blokken (beschrijving = zacht groen, stappen = wit) duidelijk verschillen.
   De stap-kaarten zijn normaal wit; op de witte sectie zouden ze wegvallen, dus
   krijgen ze hier een zacht-groene vulling zodat ze blijven "liften". */
.djt-park-nieuw .sec-white{background:var(--surface)}
/* Stap-kaarten op de donkere band: witte kaarten die "liften" (zoals de andere
   kaarten op donker). Het stapnummer en de tekst blijven donker op wit. */
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .step{
  background:var(--surface);
  border-color:color-mix(in srgb,var(--djt-accent,#2f5233) 14%,#e7e9e2);
  box-shadow:0 16px 34px -24px rgba(0,0,0,.8);
}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .step__n::before,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .step h3,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .step p,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .step__text{color:var(--ink)}

/* ===== Knopcontrast op de donkergroene banden =====
   Ghost/onDark-knoppen (bv. "Bekijk op de kaart") staan op de donkere band met te
   weinig contrast. Hier een lichte rand + lichte tekst, en bij hover een volle
   lichte vulling met donkere tekst — goed leesbaar in beide toestanden. */
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--ghost,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--onDark{
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--ghost svg,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--onDark svg{color:#fff}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--ghost:hover,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--onDark:hover{
  background:#fff;
  border-color:#fff;
  color:color-mix(in srgb,var(--djt-accent,#2f5233) 78%,#000);
}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--ghost:hover svg,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--onDark:hover svg{
  color:color-mix(in srgb,var(--djt-accent,#2f5233) 78%,#000);
}
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--ghost:focus-visible,
.djt-park-nieuw .together:not(.review-wrap):not(.together--soft) .btn--onDark:focus-visible{
  outline:3px solid #fff;outline-offset:2px;
}

/* ===== Lichte "together"-band (together--soft) — grenst aan de donkere footer =====
   Bewust lichtgroen (niet donker), zodat de band "Drakenjacht op andere plekken"
   duidelijk scheidt van de donkergroene footer eronder. Tekst en kaarten vallen
   terug op het lichte palet (donkere tekst op licht = goed leesbaar); de witte
   kaarten liften met een zachte schaduw op het groen. */
.djt-park-nieuw .together--soft{background:var(--soft)}
.djt-park-nieuw .together--soft .sec-head h2{color:var(--ink)}
.djt-park-nieuw .together--soft .eyebrow{color:color-mix(in srgb,var(--djt-accent,#2f5233) 68%,#000)}
.djt-park-nieuw .together--soft .card{
  background:var(--surface);
  border-color:color-mix(in srgb,var(--djt-accent,#2f5233) 16%,#e7e9e2);
  box-shadow:0 14px 30px -22px rgba(18,36,18,.55);
}
.djt-park-nieuw .together--soft .card h3{color:var(--ink)}
.djt-park-nieuw .together--soft .card .card__link{color:color-mix(in srgb,var(--djt-accent,#2f5233) 72%,#000)}
.djt-park-nieuw .together--soft .card:hover{box-shadow:0 20px 40px -22px rgba(18,36,18,.65)}

/* ===== Stappen-band met subtiele achtergrondfoto + gradient-glas blokken (optie 4) =====
   De "Zo speel je …"-band toont per spel een achtergrondfoto (steps_bg) met een
   groene waas eroverheen; de stap-blokken zijn doorschijnend matglas (backdrop-blur)
   zodat je de foto er doorheen ziet, maar goed leesbaar blijven. Compact: cijfer en
   tekst naast elkaar, smaller raster. Alles merk-gedreven via --band-dark(2). */
.djt-park-nieuw .sec-steps{position:relative;isolation:isolate;overflow:hidden}
.djt-park-nieuw .sec-steps__bg{position:absolute;inset:0;z-index:0;
  background-position:center 42%;background-size:cover;background-repeat:no-repeat}
.djt-park-nieuw .sec-steps.has-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--band-dark-2) 60%,transparent),
    color-mix(in srgb,var(--band-dark) 56%,transparent))}
.djt-park-nieuw .sec-steps > .wrap{position:relative;z-index:2}
.djt-park-nieuw .sec-steps.has-bg .sec-head h2,
.djt-park-nieuw .sec-steps.has-bg .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.5)}

/* Smaller raster + horizontale, compacte blokken */
.djt-park-nieuw .sec-steps .steps{max-width:720px;gap:12px}
/* Gradient-glas (6-klasse selector zodat hij wint van de witte-kaart-regel) */
.djt-park-nieuw .together.sec-steps:not(.review-wrap):not(.together--soft) .step{
  display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 14px;
  padding:12px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(17,35,23,.68),rgba(17,35,23,.24));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.7)}
/* Tekst wit op het glas (i.p.v. de donkere tekst van de witte kaarten) */
.djt-park-nieuw .together.sec-steps:not(.review-wrap):not(.together--soft) .step__head{margin:0}
.djt-park-nieuw .together.sec-steps:not(.review-wrap):not(.together--soft) .step__n::before{
  color:#fff;font-size:1.5rem;line-height:1}
.djt-park-nieuw .together.sec-steps:not(.review-wrap):not(.together--soft) .step h3{color:#fff}
.djt-park-nieuw .together.sec-steps:not(.review-wrap):not(.together--soft) .step p,
.djt-park-nieuw .together.sec-steps:not(.review-wrap):not(.together--soft) .step__text{
  color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.4)}
/* Eventuele stap-afbeelding netjes op een eigen regel binnen het blok */
.djt-park-nieuw .sec-steps .step__media{flex:1 0 100%;margin-top:2px}
/* Terugval zonder backdrop-filter: dichtere vulling zodat tekst leesbaar blijft */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .djt-park-nieuw .together.sec-steps:not(.review-wrap):not(.together--soft) .step{
    background:linear-gradient(180deg,rgba(17,35,23,.92),rgba(17,35,23,.74))}
}
/* ===== Escape Xperience: neutraal-zwart matglas (zoals de "Bekijk op de kaart"-knop)
   i.p.v. de groenige tint, en een subtielere goud/oranje waas over de foto. ===== */
.djt-park-nieuw.is-ex .together.sec-steps:not(.review-wrap):not(.together--soft) .step{
  background:linear-gradient(180deg,rgba(12,15,12,.60),rgba(12,15,12,.20));
  border-color:rgba(255,255,255,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .djt-park-nieuw.is-ex .together.sec-steps:not(.review-wrap):not(.together--soft) .step{
    background:linear-gradient(180deg,rgba(12,15,12,.90),rgba(12,15,12,.72))}
}
.djt-park-nieuw.is-ex .sec-steps.has-bg::after{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--band-dark-2) 45%,transparent),
    color-mix(in srgb,var(--band-dark) 40%,transparent))}

/* ===== Escape Xperience: compacte, halfhoge afsluit-CTA — zwarte balk, kop links
   (serif met goud-cursief accent, zoals de schooluitje-hero) en de knop rechts
   ernaast, goud-omrand op donker ("Bekijk de Xperiences"-stijl). Drakenjacht
   (groen) blijft ongewijzigd. ===== */
.djt-park-nieuw.is-ex .closing{background:#0f0d09;color:#f4ecd9;padding:22px 0}
.djt-park-nieuw.is-ex .closing .wrap{max-width:var(--maxw,1120px);display:flex;align-items:center;
  justify-content:flex-start;gap:12px 26px;text-align:left;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.djt-park-nieuw.is-ex .closing h2{margin:0;color:#fff;font-size:clamp(1.45rem,2.7vw,2.05rem);line-height:1.15}
/* Accent in de kop: volle, verzadigde goudtint (zoals de schooluitje-kop), niet de
   bleke --gold-bright. Springt er duidelijk uit op het zwart. */
.djt-park-nieuw.is-ex .closing h2 em{font-style:italic;color:#D9A54A;color:var(--djt-accent,#D9A54A)}
/* Knop pal achter de vraag; goud-omrand op donker, maar levendig (verzadigd goud
   + zachte goudgloed) i.p.v. vaal. */
.djt-park-nieuw.is-ex .closing .hero__cta{margin:0;flex:none;justify-content:flex-start}
.djt-park-nieuw.is-ex .closing .btn--gold{
  background:linear-gradient(180deg,#2a2114,#171009);
  color:#e9bf6a;color:color-mix(in srgb,var(--djt-accent,#D9A54A) 80%,#ffffff);
  border:1.6px solid #D9A54A;border-color:var(--djt-accent,#D9A54A);
  box-shadow:0 6px 22px -8px color-mix(in srgb,var(--djt-accent,#D9A54A) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.14);
  text-shadow:none;filter:none}
.djt-park-nieuw.is-ex .closing .btn--gold:hover{
  background:linear-gradient(180deg,var(--djt-accent,#D9A54A),color-mix(in srgb,var(--djt-accent,#D9A54A) 82%,#000));
  color:#241a05;border-color:var(--djt-accent,#D9A54A);filter:none;transform:translateY(-1px);
  box-shadow:0 10px 28px -8px color-mix(in srgb,var(--djt-accent,#D9A54A) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
@media(max-width:640px){
  .djt-park-nieuw.is-ex .closing .wrap{justify-content:center;text-align:center}
  .djt-park-nieuw.is-ex .closing .hero__cta{justify-content:center;width:100%}
}

/* ===== EX review-band: subtiele, gedimde achtergrondfoto (standaard de _5-foto).
   Een crème-waas (denser bovenaan, achter de kop) dimt de foto tot een rustige
   achtergrond; de review-kaart staat er ondoorzichtig voor. Focuspunt van de foto
   houdt het belangrijkste in beeld. ===== */
.djt-park-nieuw .review-wrap{position:relative;isolation:isolate;overflow:hidden}
.djt-park-nieuw .review-wrap__bg{position:absolute;inset:0;z-index:0;
  background-size:cover;background-repeat:no-repeat}
.djt-park-nieuw .review-wrap.has-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--soft) 66%,transparent),
    color-mix(in srgb,var(--soft) 48%,transparent))}
.djt-park-nieuw .review-wrap > .wrap{position:relative;z-index:2}

/* ===== Suggestiekaarten met beeld (park-hero) — sleek =====
   De kaarten onder "Andere speurtochten …" en "… op andere plekken" tonen nu de
   hero-foto van het betreffende park/spel bovenaan, met een net tekstblok eronder.
   Bij hover zoomt de foto subtiel in en licht de kaart op. */
.djt-park-nieuw .card--media{padding:0;overflow:hidden;gap:0;border-top:1px solid var(--line)}
.djt-park-nieuw .card__media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  background:color-mix(in srgb,var(--djt-accent,#2f5233) 12%,#e9ece6)}
.djt-park-nieuw .card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease}
.djt-park-nieuw .card--media:hover .card__media img{transform:scale(1.05)}
.djt-park-nieuw .card__body{padding:16px 18px 17px;display:flex;flex-direction:column;gap:8px}
/* op de lichte "op andere plekken"-band: iets diepere schaduw zodat het beeldkaartje lift */
.djt-park-nieuw .together--soft .card--media{box-shadow:0 16px 34px -22px rgba(18,36,18,.6)}
.djt-park-nieuw .together--soft .card--media:hover{box-shadow:0 22px 44px -22px rgba(18,36,18,.7)}