:root{
  --paper:#F6F2E8; --surface:#FFFFFF; --ink:#1A1710; --muted:#6C6555;
  --line:#E6DFCE; --soft:#EFEADC;
  --gold:#B07A1E; --gold-bright:#D9A54A; --dark:#141109; --dark-2:#1F1A0F;
  --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:#D9A54A; --dark:#0E0C07; --dark-2:#181309;
}}
:root[data-theme="dark"]{
  --paper:#14120C; --surface:#1C1810; --ink:#F4EFE2; --muted:#A99F89;
  --line:#332C1D; --soft:#221D12; --gold:#D9A54A; --dark:#0E0C07; --dark-2:#181309;
}
*,*::before,*::after{box-sizing:border-box}
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 .djs-body + !important wint altijd. */
.djs-body .wrap{padding-left:22px!important;padding-right:22px!important}
@media(max-width:640px){.djs-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. */
.djs-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-body{--djt-accent:#B07A1E;--djt-accent-dark:#8A5F16}
.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)}
/* FAQ-hero met subtiele achtergrondfoto: extra gedimd (foto rechts, links donker
   voor leesbare kop/tekst). De basis-.hero__bg maskeert al links weg. */
.hero--compact.hero--haspic .hero__bg{opacity:.4}
@media(max-width:640px){.hero--compact.hero--haspic .hero__bg{opacity:.32}}
.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}

/* ==========================================================================
   Drakenjacht-merkvariant (groen kleurschema) — gebruikt op de Drakenjacht
   veelgestelde-vragen-pagina (body.djs-brand-dj). Vervangt de gouden EX-accenten
   door Drakenjacht-groen; overige tokens (papier/donker/tekst) blijven het
   licht/donker-gedrag van de basis volgen.
   ========================================================================== */
/* Merk-tokens alleen op de paginainhoud (main): de gedeelde menubalk/chrome
   blijft ongemoeid en houdt zijn eigen (gouden) accenten — "zoals die was". */
.djs-brand-dj main{
  --gold:#2f5233;        /* Drakenjacht-accent (groen) i.p.v. goud */
  --gold-bright:#3f8a34; /* feller groen voor highlights/hero-em */
  --dark:#16301c;        /* donkere band → diep groen */
  --dark-2:#1e3d26;
}
/* Hero-eyebrow ("VEELGESTELDE VRAGEN") leesbaar op de diepgroene achtergrond. */
.djs-brand-dj .hero .eyebrow{color:#9ed684;}
/* Actieve categorie-chip én gouden knoppen: witte tekst op groen. */
.djs-brand-dj .faq-cat.is-active{color:#fff;}
.djs-brand-dj .btn--gold,
.djs-brand-dj .btn--gold:hover{color:#fff;}
/* Afsluitblok ("Staat je vraag er niet tussen?"): witte achtergrond met
   donkere, goed leesbare tekst. */
.djs-brand-dj .closing{background:#fff;color:#2a2a2a;}
.djs-brand-dj .closing h2{color:#141414;}
.djs-brand-dj .closing p{color:#3f3f3f;}
/* Menubalk (chrome): deze pagina laadt Figtree voor de inhoud, maar de rest van
   de Drakenjacht-site doet dat niet — daar toont het menu het systeemlettertype.
   Houd het menu hier identiek door voor de chrome hetzelfde systeemlettertype te
   forceren i.p.v. Figtree (de inhoud van de pagina blijft Figtree/Newsreader). */
.djs-brand-dj .djc-header,
.djs-brand-dj .djc-footer{
  --_menufont:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Menu-accent op de Drakenjacht-themakleur zetten; de chrome-plugin gebruikt deze
     variabele zelf voor het actieve item en de onderstreping. Zo blijft de rest aan de
     chrome-instellingen over en is er geen verdere CSS-override nodig. */
  --djt-accent:#2f5233;
  --djt-accent-dark:#24401f;
}
/* Hero-achtergrondfoto iets meer naar voren halen: minder dekkende groene sluier,
   zodat de foto beter doorkomt. De linker-/onderkant blijft genoeg gedimd voor
   leesbare witte tekst. */
.djs-brand-dj .hero--haspic .hero__bg{opacity:.6;}
@media(max-width:640px){.djs-brand-dj .hero--haspic .hero__bg{opacity:.5;}}
.djs-brand-dj .hero--haspic .hero__scrim{
  background:linear-gradient(90deg,color-mix(in srgb,var(--dark) 72%,transparent) 24%,transparent 92%),
    linear-gradient(0deg,color-mix(in srgb,var(--dark) 62%,transparent) 1%,transparent 46%);
}
/* FAQ: de geopende vraag-kop niet groen tonen. Op de donkere categorie wit, op de
   lichte categorieën donker (leesbaar) i.p.v. de groene accentkleur. */
.djs-brand-dj .faq details[open] summary{color:var(--ink);}
.djs-brand-dj .faq-group:nth-child(4n+3) .faq summary,
.djs-brand-dj .faq-group:nth-child(4n+3) .faq details[open] summary{color:#fff;}