/* MaxiMystery — huisstijl
   Bureau bij kaarslicht: nachtzwart hout, perkament, bladgoud uit het logo, rode lak voor Pro.
   Eén donkere stijl, bewust (zoals het logo). */
:root{
  --nacht:#0d0a07; --hout:#17120c; --hout2:#211910; --rand:#3a2d1c;
  --perkament:#ecdfc4; --perkament-zacht:#b8a888; --perkament-dim:#857862;
  --goud:#cf9f45; --goud-licht:#ecc77d; --goud-donker:#8d6a28;
  --lak:#a3352a; --lak-licht:#d0624f; --mos:#7f9a6a;
  --kop:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --label:"Cinzel",Georgia,serif;
  --tekst:"Spectral",Georgia,"Times New Roman",serif;
  --maat:min(1180px,100%);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--nacht);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--perkament);font:400 17px/1.6 var(--tekst);
  min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:var(--goud-licht);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff1cf}
:focus-visible{outline:2px solid var(--goud-licht);outline-offset:3px}
h1,h2,h3{font-family:var(--kop);font-weight:600;line-height:1.1;text-wrap:balance;margin:0;color:var(--perkament)}
h1{font-size:clamp(2.4rem,6vw,3.8rem)}
h2{font-size:clamp(1.8rem,4vw,2.5rem)}
h3{font-size:1.45rem}
p{margin:0}
.label{font:600 .74rem/1.2 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--goud)}
.zacht{color:var(--perkament-zacht)}
.binnen{width:var(--maat);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{flex:1}
.sectie{padding-block:clamp(44px,7vw,84px)}
.sectie + .sectie{padding-top:0}
.sectiekop{display:grid;gap:10px;margin-bottom:28px;max-width:62ch}

/* ---------- kopbalk ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:#0d0a07f2}
.kopbalk{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#0d0a07e6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #2a2015}
.kopbalk .binnen{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.merk{display:block;flex:none}
.merk img{height:40px;width:auto}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.menu a{font:600 .78rem var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--perkament-zacht);text-decoration:none;padding:10px 10px;border-bottom:1px solid transparent}
.menu a:hover{color:var(--perkament)}
.menu a[aria-current="page"]{color:var(--goud-licht);border-bottom-color:var(--goud)}
.menu a.pro{color:var(--lak-licht)}
.taalwissel{display:flex;border:1px solid var(--rand);margin-left:6px}
.taalwissel a,.taalwissel span{font:600 .72rem var(--label);letter-spacing:.12em;padding:7px 9px;text-decoration:none;border:0}
.taalwissel span{background:var(--hout2);color:var(--goud-licht)}
.taalwissel a{color:var(--perkament-dim)}
@media (max-width:760px){
  .kopbalk .binnen{gap:6px}
  .merk img{height:32px}
  .menu{width:100%;margin-left:0;justify-content:space-between;gap:0}
  .menu a{padding:8px 6px;font-size:.68rem;letter-spacing:.08em}
}

/* ---------- held ---------- */
.held{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #2a2015}
.held picture,.held .beeld{position:absolute;inset:0;z-index:-2}
.held picture img,.held .beeld img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.held::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#0d0a07f0 0%,#0d0a07b8 38%,#0d0a0700 70%),linear-gradient(0deg,#0d0a07 0%,#0d0a0700 30%)}
.held .binnen{padding-block:clamp(70px,12vw,150px) clamp(60px,9vw,110px);display:grid;gap:22px;justify-items:start}
.held .logo{width:min(560px,92%);filter:drop-shadow(0 8px 24px #000c)}
.held .zin{font-size:clamp(1.1rem,2.4vw,1.35rem);max-width:34ch;color:var(--perkament)}
.held.klein .binnen{padding-block:clamp(56px,9vw,100px) clamp(40px,6vw,64px)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}
.knop{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;font:600 .82rem var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#1b130a;background:linear-gradient(180deg,var(--goud-licht),var(--goud));border:1px solid var(--goud-donker);box-shadow:0 1px 0 #fff4 inset,0 6px 18px #0008}
.knop:hover{color:#1b130a;filter:brightness(1.08)}
.knop.lijn{background:#0d0a0799;color:var(--perkament);border-color:var(--perkament-dim);box-shadow:none}
.knop.lijn:hover{color:#fff;border-color:var(--perkament)}
.knop.lak{background:linear-gradient(180deg,var(--lak-licht),var(--lak));color:#fbefe2;border-color:#6e2219}
@media (max-width:640px){
  .held::after{background:linear-gradient(0deg,#0d0a07 0%,#0d0a07d9 45%,#0d0a0766 100%)}
  .held .binnen{padding-top:48vw}
}

/* ---------- dossierkaarten ---------- */
.rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:22px}
.dossier{position:relative;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--perkament);
  background:linear-gradient(180deg,#e9dcc1,#d9c9a6);border-radius:2px;box-shadow:0 14px 30px #000a,0 1px 0 #fff5 inset;transition:transform .25s ease,box-shadow .25s ease}
.dossier::before{content:"";position:absolute;left:16px;top:-9px;width:86px;height:10px;background:#d9c9a6;border-radius:3px 3px 0 0}
.dossier:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 22px 40px #000c;color:var(--perkament)}
.dossier .foto{margin:12px 12px 0;aspect-ratio:4/3;overflow:hidden;background:#1a140d;border:1px solid #00000033}
.dossier .foto img{width:100%;height:100%;object-fit:cover;filter:sepia(.18) contrast(1.05);transition:transform .5s ease}
.dossier:hover .foto img{transform:scale(1.05)}
.dossier .tekst{padding:14px 16px 18px;display:grid;gap:6px;align-content:start;color:#2a2117}
.dossier h3{color:#1f170e;font-size:1.4rem}
.dossier p{font-size:.95rem;line-height:1.45;color:#4d4131}
.dossier .soort{font:600 .64rem var(--label);letter-spacing:.18em;text-transform:uppercase;color:#7a6440}
.stempel{position:absolute;top:22px;right:20px;transform:rotate(8deg);font:700 .7rem var(--label);letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border:2px solid currentColor;background:#efe3c9e6}
.stempel.gratis{color:#3f6a35}
.stempel.pro{color:#a3352a}
.stempel.nieuw{color:#8d6a28;top:auto;bottom:auto;right:auto;left:20px;top:22px;transform:rotate(-7deg)}

/* ---------- deuren: drie manieren, elk met eigen kleur ---------- */
.deuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.deur{--k:var(--goud);display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--perkament);background:var(--hout);border:1px solid var(--rand);border-top:4px solid var(--k);transition:transform .25s ease,border-color .25s ease}
.deur.online{--k:#c9a45c}.deur.buiten{--k:#7f9a6a}.deur.papier{--k:#d0624f}
.deur:hover{transform:translateY(-4px);border-color:var(--k);color:var(--perkament)}
.deurbeeld{aspect-ratio:16/9;overflow:hidden;background:#000}
.deurbeeld img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .7s ease}
.deur:hover .deurbeeld img{transform:scale(1.05)}
.deurtekst{display:grid;gap:10px;padding:20px 22px 22px;align-content:start}
.wijze{display:inline-flex;align-items:center;gap:8px;font:600 .72rem var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--k)}
.wijze svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.deur h3{font-size:2.1rem}
.deur .kop{font-family:var(--kop);font-size:1.25rem;font-style:italic;color:var(--perkament);margin-top:-6px}
.deur p{color:var(--perkament-zacht);max-width:40ch}
.feiten{margin:6px 0 0;padding:0;display:grid;gap:6px;border-top:1px solid var(--rand);padding-top:12px}
.feiten div{display:grid;grid-template-columns:5.2em 1fr;gap:10px;font-size:.92rem}
.feiten dt{font:600 .66rem/1.7 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--k)}
.feiten dd{margin:0;color:var(--perkament-zacht)}
.deur .pijl{font:600 .76rem var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--k);margin-top:6px}

/* ---------- planken (spellen) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.filters button{font:600 .74rem var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--perkament-zacht);background:transparent;border:1px solid var(--rand);padding:10px 14px;cursor:pointer;min-height:42px}
.filters button[aria-pressed="true"]{color:#1b130a;background:var(--goud);border-color:var(--goud)}
.plank{padding-block:36px;border-top:1px solid #2a2015}
.plank:first-of-type{border-top:0}
.plank .sectiekop{margin-bottom:22px}
.plank[hidden]{display:none}
.leeg{color:var(--perkament-dim);font-style:italic}

/* ---------- tekstblokken ---------- */
.twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px}
.blok{background:var(--hout);border:1px solid var(--rand);padding:24px;display:grid;gap:12px;align-content:start}
.blok ul{margin:0;padding-left:1.1em;display:grid;gap:6px;color:var(--perkament-zacht)}
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:22px;counter-reset:s}
.stappen li{counter-increment:s;display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--goud-donker)}
.stappen li::before{content:counter(s,upper-roman);font:600 1rem var(--label);color:var(--goud)}
.stappen p{color:var(--perkament-zacht)}

/* ---------- boeken ---------- */
.boek{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;padding-block:30px;border-top:1px solid #2a2015;align-items:start}
.boek:first-child{border-top:0}
.boek .omslag{aspect-ratio:2/3;background:linear-gradient(160deg,#2a1f13,#120d08);border:1px solid var(--rand);display:grid;place-items:center;text-align:center;padding:18px;box-shadow:10px 14px 30px #000b}
.boek .omslag span{font:600 1.5rem/1.1 var(--kop);color:var(--goud-licht)}
.boek .omslag small{display:block;margin-top:10px;font:600 .62rem var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--perkament-dim)}
.boek .info{display:grid;gap:12px;max-width:62ch}
.status{display:inline-block;font:600 .66rem var(--label);letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;border:1px solid currentColor;justify-self:start}
.status.uit{color:var(--mos)} .status.binnenkort{color:var(--goud)} .status.maak{color:var(--perkament-dim)}
@media (max-width:560px){.boek{grid-template-columns:1fr}.boek .omslag{max-width:180px}}

/* ---------- pro ---------- */
.pas{background:linear-gradient(175deg,#e9dcc1,#d6c5a0);color:#2a2117;padding:28px;display:grid;gap:14px;max-width:520px;box-shadow:0 20px 40px #000b;transform:rotate(-.3deg)}
.pas h2,.pas h3{color:#1f170e}
.pas label{font:600 .7rem var(--label);letter-spacing:.18em;text-transform:uppercase;color:#5a4b36}
.pas input{width:100%;font:500 1.2rem ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;padding:12px;border:1px solid #9d9072;background:#fff8;color:#1f170e}
.pas .melding{min-height:1.4em;font-size:.95rem}
.pas .melding.ok{color:#2f5d27}.pas .melding.fout{color:#8e2b20}
.pas .knop{justify-content:center}

/* ---------- voet ---------- */
.voet{border-top:1px solid #2a2015;background:#0a0805;padding-block:34px calc(34px + env(safe-area-inset-bottom,0px));color:var(--perkament-dim);font-size:.92rem}
.voet .binnen{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.voet img{height:30px;width:auto;opacity:.85}
.voet nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.voet a{color:var(--perkament-zacht);text-decoration:none}
.voet a:hover{color:var(--perkament)}
.voet .klein{width:100%;font-size:.82rem}

/* ---------- notitie ---------- */
.formulier{display:grid;gap:12px;max-width:560px}
.formulier label{font:600 .7rem var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--perkament-zacht)}
.formulier input,.formulier textarea{width:100%;font:400 1rem var(--tekst);color:var(--perkament);background:var(--hout);border:1px solid var(--rand);padding:12px}
.formulier textarea{min-height:140px;resize:vertical}
.formulier .verborgen{position:absolute;left:-9999px}
.formulier .melding.ok{color:var(--mos)}.formulier .melding.fout{color:var(--lak-licht)}

/* ---------- taalkeuze ---------- */
.kies{min-height:100vh;display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden;padding:32px max(16px,env(safe-area-inset-left,0px)) 32px max(16px,env(safe-area-inset-right,0px))}
.kies picture{position:absolute;inset:0;z-index:-2}
.kies picture img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;animation:drijf 30s ease-in-out infinite alternate}
.kies::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 50% 50%,#0d0a07a6,#0d0a07f2)}
.kies .kaart{display:grid;gap:26px;justify-items:center;text-align:center;width:min(720px,100%)}
.kies .logo{width:min(640px,100%);filter:drop-shadow(0 10px 30px #000)}
.kies .knoppen{justify-content:center}
.kies .knop{min-width:190px;justify-content:center}
.kies p{color:var(--perkament-zacht)}
@keyframes drijf{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.1) translateX(-2%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.pro-actief .stempel.pro{display:none}
.probalk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
/* logo nooit vervormen: hoogte volgt de breedte */
.held .logo,.kies .logo,.voet img{height:auto}
@media (max-width:640px){.held .logo{width:min(420px,86%)}}