/* quaffinquagga.arimpex.nl - kaart #26513 - zie design.md */
@font-face{font-family:Anton;src:url(fonts/anton-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Bodoni;src:url(fonts/bodoni-moda-latin-wght-italic.woff2) format("woff2");font-style:italic;font-weight:400 900;font-display:swap}
@font-face{font-family:Bodoni;src:url(fonts/bodoni-moda-latin-wght-normal.woff2) format("woff2");font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-wdth-wght.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --noir:#0c0a0b;--ink:#1b1718;--ink2:#26201f;--bone:#f2ece1;--bone2:#d9d1c3;
  --crimson:#c8102e;--crimson2:#e8274a;--gold:#c9a23a;--gold2:#f0d27a;
  --line:rgba(242,236,225,.14);--muted:rgba(242,236,225,.62);
  --loud:Anton,Impact,"Arial Narrow",sans-serif;
  --chic:Bodoni,"Didot","Bodoni 72",Georgia,serif;
  --body:Archivo,"Helvetica Neue",Arial,sans-serif;
  --wrap:1320px;--pad:clamp(18px,5vw,72px);
  --zebra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M-10 14 C20 4 40 26 70 12 S110 4 130 16'/%3E%3Cpath d='M-10 40 C14 30 44 52 64 38 S104 30 130 44'/%3E%3Cpath d='M-10 66 C24 56 40 78 72 64 S112 56 130 70'/%3E%3Cpath d='M-10 92 C18 82 46 104 68 90 S100 82 130 96'/%3E%3Cpath d='M-10 118 C22 108 42 130 70 116 S108 108 130 122'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-thema=noir]{--crimson:#e9e4da;--crimson2:#fff;--gold:#bdb6a8;--gold2:#fff}
html[data-thema=neon]{--noir:#07070d;--ink:#12121c;--ink2:#1c1c2a;--crimson:#ff2e63;--crimson2:#ff5c86;--gold:#08d9d6;--gold2:#7ff7f5}
html[data-font=klassiek]{--loud:Bodoni,Georgia,serif}
html[data-font=strak]{--loud:Archivo,Arial,sans-serif}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--noir);color:var(--bone);font:400 17px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--crimson);color:#fff;padding:8px 14px;z-index:999}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.grain:after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:300;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}

/* typografie */
.loud{font-family:var(--loud);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.9}
.chic{font-family:var(--chic);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}
h1,h2,h3{margin:0}
.h2{font-family:var(--loud);text-transform:uppercase;font-size:clamp(40px,7vw,96px);line-height:.9}
.h2 .chic{color:var(--crimson2);font-size:.92em}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:14px 22px;border:0;cursor:pointer;text-decoration:none;
  font:600 13px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;background:var(--crimson);color:#fff;
  position:relative;transition:transform .2s,background .2s}
.btn:before{content:"";position:absolute;inset:4px;border:1.5px dashed rgba(255,255,255,.55);pointer-events:none}
.btn:hover{background:var(--crimson2);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px var(--bone)}
.btn.ghost:before{border-color:transparent}
.btn.ghost:hover{background:var(--bone);color:var(--noir)}
.btn.gold{background:var(--gold);color:var(--noir)}
.btn.klein{padding:10px 14px;font-size:11px}
.btn.klein:before{inset:3px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--gold2);text-decoration:underline;text-underline-offset:3px}

/* stiklijn */
.stik{position:relative;background:var(--ink);padding:26px}
.stik:before{content:"";position:absolute;inset:7px;border:2px dashed color-mix(in srgb,var(--crimson) 75%,transparent);pointer-events:none}
.stik.bone{background:var(--bone);color:var(--noir)}

/* ticker */
.ticker{overflow:hidden;background:var(--crimson);color:#fff;border-block:2px dashed rgba(255,255,255,.4)}
.ticker div{display:flex;gap:2.2em;white-space:nowrap;width:max-content;padding:12px 0;font:400 20px/1 var(--loud);letter-spacing:.06em;animation:tick 38s linear infinite}
.ticker span:nth-child(even){color:var(--gold2);font:italic 500 22px/1 var(--chic)}
@keyframes tick{to{transform:translateX(-50%)}}

/* intro-gordijn */
.gordijn{position:fixed;inset:0;z-index:500;display:grid;grid-template-columns:repeat(9,1fr);pointer-events:none}
.gordijn i{background:var(--noir);transform-origin:top;animation:gord .9s cubic-bezier(.7,0,.2,1) forwards}
.gordijn i:nth-child(odd){background:var(--bone)}
.gordijn i:nth-child(1){animation-delay:.55s}.gordijn i:nth-child(2){animation-delay:.6s}.gordijn i:nth-child(3){animation-delay:.65s}
.gordijn i:nth-child(4){animation-delay:.7s}.gordijn i:nth-child(5){animation-delay:.75s}.gordijn i:nth-child(6){animation-delay:.8s}
.gordijn i:nth-child(7){animation-delay:.85s}.gordijn i:nth-child(8){animation-delay:.9s}.gordijn i:nth-child(9){animation-delay:.95s}
.gordijn b{position:fixed;inset:0;display:grid;place-items:center;font:400 clamp(70px,16vw,220px)/1 var(--loud);color:var(--crimson);animation:gordb .5s .45s forwards;mix-blend-mode:difference}
@keyframes gord{to{transform:scaleY(0)}}
@keyframes gordb{to{opacity:0;transform:scale(1.3)}}
html.gezien .gordijn{display:none}

/* topbalk openbaar */
.top{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,backdrop-filter .3s}
.top.vast{background:rgba(12,10,11,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none}
.merk img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--crimson),0 0 0 4px var(--noir),0 0 0 5px var(--gold)}
.merk b{font:400 22px/1 var(--loud);letter-spacing:.04em}
.merk b em{font:italic 500 20px var(--chic);color:var(--crimson2);padding:0 .1em}
.top nav{display:flex;gap:22px;align-items:center}
.top nav a:not(.btn){text-decoration:none;font:600 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.top nav a:not(.btn):hover{color:var(--bone)}
@media(max-width:760px){.top nav a:not(.btn){display:none}}

/* hero */
.hero{min-height:100svh;position:relative;display:grid;align-items:center;padding:110px 0 60px;overflow:hidden;isolation:isolate}
.hero .strepen{position:absolute;inset:-10%;z-index:-2;opacity:.11;filter:invert(1);background:var(--zebra);background-size:240px;animation:drift 40s linear infinite}
@keyframes drift{to{background-position:240px 480px}}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 70% 45%,rgba(200,16,46,.28),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(201,162,58,.12),transparent 70%),linear-gradient(transparent 70%,var(--noir))}
.hero .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{font-family:var(--loud);text-transform:uppercase;font-size:clamp(64px,13.5vw,212px);line-height:.82;letter-spacing:-.005em}
.hero h1 .z{display:block;color:transparent;-webkit-text-stroke:0;background:var(--zebra),var(--bone);background-size:90px,auto;-webkit-background-clip:text;background-clip:text;animation:zebratekst 14s linear infinite}
@keyframes zebratekst{to{background-position:180px 90px,0 0}}
.hero h1 .r{display:block;color:var(--crimson);text-shadow:0 0 60px rgba(200,16,46,.45)}
.hero h1 .amp{font:italic 500 .55em/1 var(--chic);color:var(--gold);vertical-align:.25em;padding:0 .08em;text-transform:none}
.hero .sub{margin:26px 0 30px;max-width:34em;font-size:clamp(17px,1.5vw,20px);color:var(--bone2)}
.hero .sub em{font:italic 500 1.2em var(--chic);color:var(--bone)}
.hero .acties{display:flex;flex-wrap:wrap;gap:14px}
.hero .datum{margin-top:38px;display:flex;align-items:center;gap:16px;font:italic 500 22px var(--chic);color:var(--gold)}
.hero .datum:before{content:"";width:52px;height:2px;background:var(--gold)}
.badgewrap{perspective:1100px;justify-self:center;width:min(100%,520px)}
.badge3d{position:relative;transform-style:preserve-3d;transition:transform .2s ease-out;animation:zweef 7s ease-in-out infinite}
@keyframes zweef{50%{translate:0 -14px}}
.badge3d img{width:100%;aspect-ratio:900/916;object-fit:cover;
  -webkit-mask:radial-gradient(70% 68% at 50% 50%,#000 62%,transparent 100%);mask:radial-gradient(70% 68% at 50% 50%,#000 62%,transparent 100%);
  filter:contrast(1.08) saturate(1.1) drop-shadow(0 30px 60px rgba(0,0,0,.8))}
.badge3d .glans{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.65) 48%,transparent 60%);background-size:250% 100%;animation:glans 5.5s ease-in-out infinite;
  -webkit-mask:radial-gradient(60% 60% at 50% 50%,#000 60%,transparent 100%);mask:radial-gradient(60% 60% at 50% 50%,#000 60%,transparent 100%)}
@keyframes glans{0%,30%{background-position:120% 0}70%,100%{background-position:-60% 0}}
.badgewrap figcaption{text-align:center;margin-top:6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scrollhint{position:absolute;bottom:22px;left:50%;translate:-50% 0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.scrollhint:after{content:"";display:block;width:1px;height:38px;margin:10px auto 0;background:linear-gradient(var(--crimson),transparent);animation:hint 1.8s infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}.badgewrap{order:-1;width:min(70vw,340px)}.hero{padding-top:90px}.scrollhint{display:none}}

/* secties openbaar */
.sec{padding:clamp(70px,11vw,150px) 0;position:relative}
.sec.licht{background:var(--bone);color:var(--noir)}
.sec.licht .muted{color:#5d554d}
.sec.licht .eyebrow{color:var(--crimson)}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.drie .stik h3{font:400 30px/1 var(--loud);text-transform:uppercase;margin:14px 0 10px}
.drie .stik .nr{font:italic 600 54px/1 var(--chic);color:var(--crimson)}
.sec.licht .drie .stik{background:#fff}
@media(max-width:900px){.drie{grid-template-columns:1fr}}
.manifest{font:italic 500 clamp(30px,4.6vw,64px)/1.12 var(--chic);max-width:20em}
.manifest b{font:400 1.05em/1 var(--loud);font-style:normal;text-transform:uppercase;color:var(--crimson)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.jaren{display:flex;gap:clamp(18px,4vw,60px);margin-top:44px;flex-wrap:wrap}
.jaren div b{display:block;font:400 clamp(56px,8vw,110px)/.9 var(--loud);color:var(--crimson)}
.jaren div span{font-size:13px;letter-spacing:.2em;text-transform:uppercase}

/* formulier */
.veld{display:grid;gap:6px;margin-bottom:16px}
.veld label{font:600 11px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.sec.licht .veld label{color:#5d554d}
.veld input,.veld textarea,.veld select{width:100%;padding:13px 14px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-bottom:2px solid var(--crimson);outline:0;border-radius:0}
.veld input:focus,.veld textarea:focus,.veld select:focus{background:rgba(255,255,255,.08);border-color:var(--gold)}
.sec.licht .veld input,.sec.licht .veld textarea{background:#fff;border-color:#d3cabb;border-bottom-color:var(--crimson);color:var(--noir)}
.veld select option{background:var(--ink);color:var(--bone)}
.melding{padding:12px 16px;border-left:3px solid var(--gold);background:rgba(201,162,58,.1);margin:12px 0;font-size:15px}
.melding.fout{border-color:var(--crimson);background:rgba(200,16,46,.12)}
.sec.licht .melding{background:#fff}

footer.voet{border-top:1px solid var(--line);padding:46px 0 34px;font-size:14px;color:var(--muted)}
footer.voet .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer.voet a{color:var(--bone)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}
.rv.in{opacity:1;transform:none}
html.no-js .rv{opacity:1;transform:none}

/* login */
.loginpag{min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr}
.loginpag .beeld{position:relative;overflow:hidden;background:var(--ink);display:grid;place-items:center;padding:40px}
.loginpag .beeld .strepen{position:absolute;inset:-10%;opacity:.09;filter:invert(1);background:var(--zebra);background-size:200px;animation:drift 40s linear infinite}
.loginpag .beeld img{position:relative;width:min(80%,440px);-webkit-mask:radial-gradient(70% 68% at 50% 50%,#000 60%,transparent 100%);mask:radial-gradient(70% 68% at 50% 50%,#000 60%,transparent 100%)}
.loginpag .beeld p{position:absolute;bottom:28px;left:0;right:0;text-align:center;font:italic 500 22px var(--chic);color:var(--gold)}
.loginpag .form{padding:clamp(28px,6vw,90px);display:flex;flex-direction:column;justify-content:center;max-width:620px}
.loginpag h1{font:400 clamp(48px,6vw,84px)/.9 var(--loud);text-transform:uppercase;margin:16px 0 22px}
.loginpag h1 .chic{color:var(--crimson2)}
.demoacc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 24px}
.demoacc button{background:var(--ink);border:1.5px dashed var(--line);padding:14px 10px;cursor:pointer;text-align:left;transition:border-color .2s,transform .2s}
.demoacc button:hover{border-color:var(--crimson);transform:translateY(-2px)}
.demoacc b{display:block;font:400 18px/1.1 var(--loud);text-transform:uppercase}
.demoacc small{color:var(--muted);font-size:12px}
@media(max-width:860px){.loginpag{grid-template-columns:1fr}.loginpag .beeld{min-height:38vh}.demoacc{grid-template-columns:1fr}}

/* ledenomgeving */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100svh}
.zij{position:sticky;top:0;height:100svh;overflow:auto;background:var(--ink);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:18px}
.zij .merk{padding:4px 6px 14px;border-bottom:1px dashed var(--line)}
.zij nav{display:flex;flex-direction:column;gap:2px}
.zij nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;font:500 15px/1.2 var(--body);color:var(--bone2);border-left:3px solid transparent}
.zij nav a svg{width:18px;height:18px;flex:none;opacity:.7}
.zij nav a:hover{background:rgba(255,255,255,.04);color:var(--bone)}
.zij nav a[aria-current]{border-left-color:var(--crimson);background:rgba(200,16,46,.12);color:#fff}
.zij nav a[aria-current] svg{opacity:1;color:var(--crimson2)}
.zij nav a.beheer{color:var(--gold2)}
.zij .wie{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px}
.zij .wie img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.hoofd{min-width:0}
.balk{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px,3vw,40px);background:rgba(12,10,11,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.balk .pad{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.balk .rechts{display:flex;align-items:center;gap:10px}
.rolchip{font:600 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;padding:7px 10px;border:1.5px dashed var(--crimson);color:var(--bone)}
.rolchip.webmaster{border-color:var(--gold);color:var(--gold2)}
.inhoud{padding:clamp(20px,3.4vw,48px);max-width:1180px}
.kop{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.kop h1{font:400 clamp(42px,6vw,82px)/.9 var(--loud);text-transform:uppercase}
.kop h1 .chic{color:var(--crimson2);font-size:.9em}
.kop p{margin:10px 0 0;color:var(--muted);max-width:42em}
.mob{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .zij{position:fixed;inset:0 auto 0 0;width:min(84vw,300px);z-index:200;transform:translateX(-100%);transition:transform .3s}
  .zij.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.6)}
  .mob{display:inline-flex}
}

.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.kaart{background:var(--ink);border:1px solid var(--line);position:relative;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.kaart:hover{transform:translateY(-3px);border-color:rgba(200,16,46,.6)}
.kaart .in{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.kaart h3{font:400 24px/1 var(--loud);text-transform:uppercase}
.kaart a.vol{position:absolute;inset:0}
.tag{display:inline-block;font:600 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;padding:6px 8px;background:rgba(255,255,255,.06);color:var(--bone2)}
.tag.rood{background:var(--crimson);color:#fff}
.tag.goud{background:var(--gold);color:var(--noir)}
.tag.voorbeeld{background:transparent;border:1px dashed var(--muted);color:var(--muted)}

.welkom{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px}
.welkom .groot{min-height:260px;position:relative;overflow:hidden;padding:30px;background:linear-gradient(120deg,var(--crimson),#7a0a1c)}
.welkom .groot:after{content:"";position:absolute;right:-60px;top:-40px;width:340px;height:340px;opacity:.18;background:var(--zebra);background-size:110px;border-radius:50%}
.welkom .groot h2{font:400 clamp(40px,5vw,70px)/.9 var(--loud);text-transform:uppercase;position:relative}
.welkom .groot h2 .chic{color:var(--gold2)}
.teller{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.teller div{background:var(--ink);border:1px solid var(--line);padding:18px}
.teller b{display:block;font:400 54px/1 var(--loud);color:var(--bone)}
.teller span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.welkom{grid-template-columns:1fr}}

.lijst{display:flex;flex-direction:column;gap:12px}
.rij{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--ink);border:1px solid var(--line);padding:14px 16px}
.datumblok{width:66px;text-align:center;border:1.5px dashed var(--crimson);padding:6px 0}
.datumblok b{display:block;font:400 30px/1 var(--loud)}
.datumblok span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
@media(max-width:560px){.rij{grid-template-columns:auto 1fr}.rij>:last-child{grid-column:1/-1}}

/* tijdlijn */
.tijdlijn{position:relative;padding-left:34px}
.tijdlijn:before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;background:repeating-linear-gradient(var(--crimson) 0 10px,transparent 10px 16px)}
.tl{position:relative;margin-bottom:28px}
.tl:before{content:"";position:absolute;left:-31px;top:8px;width:15px;height:15px;border-radius:50%;background:var(--noir);border:3px solid var(--gold)}
.tl .jaar{font:italic 600 34px/1 var(--chic);color:var(--gold2)}
.tl h3{font:400 26px/1.05 var(--loud);text-transform:uppercase;margin:6px 0}

/* album */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.album figure{margin:0;position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink2);cursor:zoom-in}
.album figure img,.album figure svg{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.album figure:hover img,.album figure:hover svg{transform:scale(1.06)}
.album figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;font-size:12px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.album .weg{position:absolute;top:6px;right:6px;z-index:2}
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(5,4,4,.94);display:grid;place-items:center;padding:30px}
.lightbox img,.lightbox svg{max-width:92vw;max-height:80vh;width:auto;height:auto}
.lightbox svg{width:min(80vh,92vw);height:min(80vh,92vw)}
.lightbox p{text-align:center;margin-top:12px}
.lightbox button.x{position:absolute;top:16px;right:16px}

/* forum */
.post{background:var(--ink);border:1px solid var(--line);padding:18px;margin-bottom:14px}
.post .meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px}
.post .meta img{width:30px;height:30px;border-radius:50%}
.post h3{font:400 24px/1.05 var(--loud);text-transform:uppercase;margin-bottom:6px}
.reacties{margin-top:12px;padding-left:16px;border-left:2px dashed var(--line);display:flex;flex-direction:column;gap:10px}
.reactie{font-size:15px}
.reactie b{color:var(--gold2);font-weight:600}

/* adresboek */
.profiel{background:var(--ink);border:1px solid var(--line);padding:18px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:border-color .2s}
.profiel:hover{border-color:var(--crimson)}
.profiel img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--noir),0 0 0 3.5px var(--crimson)}
.profiel h3{font:400 21px/1.05 var(--loud);text-transform:uppercase}
.profiel .bij{font:italic 500 17px var(--chic);color:var(--gold2)}
.detail dl{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;margin:0}
.detail dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.detail dd{margin:0}
@media(max-width:560px){.detail dl{grid-template-columns:1fr}}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filters input,.filters select{padding:11px 13px;background:var(--ink);border:1px solid var(--line)}
.filters input{flex:1;min-width:200px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{background:none;border:0;padding:12px 14px;cursor:pointer;font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:3px solid transparent}
.tabs button[aria-selected=true]{color:var(--bone);border-bottom-color:var(--crimson)}
table.tab{width:100%;border-collapse:collapse;font-size:15px}
table.tab th,table.tab td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.tab th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tabwrap{overflow-x:auto}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:800px){.twee{grid-template-columns:1fr}}
.toast{position:fixed;bottom:22px;left:50%;translate:-50% 0;z-index:450;background:var(--bone);color:var(--noir);padding:12px 20px;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:toast .3s}
@keyframes toast{from{opacity:0;translate:-50% 10px}}
.demolint{background:repeating-linear-gradient(-45deg,var(--gold) 0 14px,#0c0a0b 14px 28px);padding:3px 0}
.demolint p{margin:0;background:var(--noir);text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;color:var(--gold2)}
.demolint a{color:#fff}
.leeg{padding:30px;text-align:center;color:var(--muted);border:1.5px dashed var(--line)}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatches button{width:150px;padding:0;border:2px solid var(--line);cursor:pointer;background:none;text-align:left}
.swatches button[aria-pressed=true]{border-color:var(--gold)}
.swatches i{display:flex;height:56px}
.swatches i s{flex:1}
.swatches span{display:block;padding:8px 10px;font-size:13px}
.pvetab td:first-child{white-space:nowrap;color:var(--gold2);font-family:var(--chic);font-style:italic}
.vink{color:#7fd88f;font-weight:700}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.gordijn{display:none}}

/* ---- serverversie (PHP) aanvullingen, 23-10 ---- */
.hero[style*="--heldbeeld"]:after{content:"";position:absolute;inset:0;z-index:-2;background:var(--heldbeeld) center/cover no-repeat;opacity:.38;filter:grayscale(.3) contrast(1.1)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inline{display:inline-block;margin:0}
.btn.rood,.btn.ghost.rood{box-shadow:inset 0 0 0 1.5px var(--crimson2);color:var(--crimson2)}
.btn.ghost.rood:hover{background:var(--crimson);color:#fff}
.kopacties{display:flex;gap:10px;flex-wrap:wrap}
.sectiekop{font:400 28px/1 var(--loud);text-transform:uppercase;letter-spacing:.02em;margin:38px 0 16px;display:flex;align-items:center;gap:14px}
.sectiekop:after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--crimson) 0 10px,transparent 10px 16px);opacity:.7}
.inhoud>section>.sectiekop:first-child,.tweekol .sectiekop:first-child{margin-top:8px}
.tweekol{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;margin-top:30px}
@media(max-width:1000px){.tweekol{grid-template-columns:1fr}}
.lijst{display:flex;flex-direction:column;gap:10px}
.rij{text-decoration:none;transition:border-color .2s,transform .2s}
a.rij:hover{border-color:var(--crimson);transform:translateX(4px)}
.rij h3{font:400 22px/1.05 var(--loud);text-transform:uppercase;margin:0 0 4px}
.rij p{margin:0}
.rij img{border-radius:50%}
.rij .rechts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pijl{font-size:22px;color:var(--crimson2)}
.gedimd{opacity:.55}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
.formgrid .vol,.formgrid .breed{grid-column:1/-1}
@media(min-width:900px){.formgrid{grid-template-columns:repeat(3,1fr)}.formgrid .breed{grid-column:span 2}}
@media(max-width:560px){.formgrid{grid-template-columns:1fr}}
.formrij{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-top:14px}
.formrij input,.formrij textarea{flex:1;min-width:200px;padding:12px 14px;background:var(--noir);border:1px solid var(--line)}
details.bewerk{margin-top:18px}
details.bewerk>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}
details.bewerk>summary.loud{font:400 24px/1 var(--loud);letter-spacing:.02em;color:var(--bone)}
details.bewerk>summary:before{content:"+";display:inline-grid;place-items:center;width:26px;height:26px;border:1.5px dashed var(--crimson);color:var(--crimson2);font:600 16px/1 var(--body);transition:transform .2s}
details.bewerk[open]>summary:before{transform:rotate(45deg)}
details.bewerk[open]>summary{margin-bottom:18px}
details.stik.bewerk{margin-top:30px}
.tabel{width:100%;border-collapse:collapse;font-size:15px;margin-top:10px}
.tabel th{text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:10px;border-bottom:2px dashed var(--line)}
.tabel td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabel td img{display:inline-block;vertical-align:middle;border-radius:50%;margin-right:6px}
.tabel input{padding:8px 10px;background:var(--noir);border:1px solid var(--line);width:100%}
@media(max-width:700px){.tabel{display:block;overflow-x:auto;white-space:nowrap}}
.tekstpag p{max-width:44em;font-size:18px}
.tekstpag p:first-child{margin-top:0}
.welkom .acties{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.mijnevents ul{margin:10px 0 0;padding-left:18px;line-height:1.9}
.mijnevents a{color:var(--gold2)}
.eventkop{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin:22px 0 30px;padding:28px;background:var(--ink);position:relative;overflow:hidden}
.eventkop:before{content:"";position:absolute;inset:0;background:var(--zebra);background-size:140px;opacity:.06;filter:invert(1)}
.eventkop>*{position:relative}
.datumgroot{width:150px;aspect-ratio:1;background:var(--crimson);color:#fff;display:grid;place-content:center;text-align:center;position:relative}
.datumgroot:before{content:"";position:absolute;inset:7px;border:2px dashed rgba(255,255,255,.55)}
.datumgroot b{font:400 72px/.85 var(--loud)}
.datumgroot span{font:600 12px/1.6 var(--body);letter-spacing:.24em;text-transform:uppercase}
.datumgroot i{font:italic 500 20px/1 var(--chic);color:var(--gold2)}
.eventtitel{font-size:clamp(40px,6vw,76px);line-height:.9;margin:8px 0}
@media(max-width:640px){.eventkop{grid-template-columns:1fr;gap:18px}.datumgroot{width:110px}.datumgroot b{font-size:52px}}
.gezichten{display:flex;flex-wrap:wrap;gap:14px}
.gezichten a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-size:12px;width:64px;text-align:center}
.gezichten img{border-radius:50%;box-shadow:0 0 0 2px var(--noir),0 0 0 3.5px var(--gold);transition:transform .2s}
.gezichten a:hover img{transform:scale(1.08) rotate(-4deg)}
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.albumkaart{display:block;text-decoration:none;background:var(--ink);position:relative;overflow:hidden;transition:transform .3s}
.albumkaart:hover{transform:translateY(-4px) rotate(-.6deg)}
.albumkaart .cover{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink2)}
.albumkaart .cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.albumkaart:hover .cover img{transform:scale(1.07)}
.albumkaart .tekst{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;border-top:3px solid var(--crimson)}
.albumkaart b{font:400 26px/1 var(--loud);text-transform:uppercase}
.albumkaart small{color:var(--muted)}
.albumkaart .tag{align-self:flex-start}
.upload{margin:6px 0 24px}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 18px;border:2px dashed var(--line);text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.dropzone:hover,.dropzone.over{border-color:var(--crimson);background:color-mix(in srgb,var(--crimson) 8%,transparent)}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone .loud{font-size:30px}
.upload progress{width:100%;height:6px;margin-top:12px;accent-color:var(--crimson)}
.fotobeheer{position:absolute;top:6px;right:6px;z-index:3}
.fotobeheer summary{list-style:none;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;background:rgba(0,0,0,.65);font-size:18px}
.fotobeheer form{position:absolute;right:0;top:34px;width:220px;background:var(--ink);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px}
.fotobeheer input{padding:8px;background:var(--noir);border:1px solid var(--line)}
.reactie{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start}
.reactie img{border-radius:50%}
.reactie p{margin:4px 0 0}
.post.groot h3{font-size:clamp(30px,4vw,46px)}
.post .meta a{color:var(--gold2)}
.profielgroot{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;margin-top:22px}
.profielgroot .foto img,.profielbewerk .foto img{border-radius:50%;width:220px;height:220px;object-fit:cover;box-shadow:0 0 0 5px var(--noir),0 0 0 8px var(--crimson),0 0 0 14px color-mix(in srgb,var(--gold) 40%,transparent)}
.profielgroot .bij{font-size:26px;color:var(--gold2);margin:0 0 10px}
.profielgroot .detail{margin-top:24px}
.profielbewerk{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start}
.profielbewerk .foto img{width:180px;height:180px}
@media(max-width:800px){.profielgroot,.profielbewerk{grid-template-columns:1fr}.profielgroot .foto img{width:150px;height:150px}}
.kaarten .profiel{text-decoration:none}
.badgeklein{max-width:240px;margin:30px 0 0}
.badgeklein img{transform:rotate(-4deg);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.tlfoto{margin:12px 0 0;max-width:280px;cursor:zoom-in}
.knoppenrij{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.keuzes{display:flex;gap:14px;flex-wrap:wrap}
.keuze input{position:absolute;opacity:0}
.keuze span{display:flex;flex-direction:column;gap:10px;padding:16px;border:2px solid var(--line);cursor:pointer;min-width:170px;transition:border-color .2s}
.keuze span i{display:inline-block;width:28px;height:28px;margin-right:4px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.keuze span em{font-style:normal;font-size:44px;line-height:1;text-transform:uppercase}
.keuze span b{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.keuze input:checked+span{border-color:var(--crimson);background:color-mix(in srgb,var(--crimson) 10%,transparent)}
.keuze input:focus-visible+span{outline:2px solid var(--gold)}
.accent{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:15px;flex-wrap:wrap}
.accent input[type=color]{width:46px;height:34px;padding:0;border:0;background:none}
.docicoon{width:52px;height:62px;display:grid;place-items:center;background:var(--bone);color:var(--noir);font:400 15px/1 var(--loud);clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%);position:relative}
.rij.doc h3 a{text-decoration:none}
.rij.doc h3 a:hover{color:var(--crimson2)}
.lightbox[hidden]{display:none}
.lightbox .vorige,.lightbox .volgende{position:absolute;top:50%;transform:translateY(-50%)}
.lightbox .vorige{left:16px}.lightbox .volgende{right:16px}
.zij .wie{text-decoration:none}
.zij .wie span{display:flex;flex-direction:column;line-height:1.25}
.zij .wie small{color:var(--muted)}
.pvetabel{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.pverij{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:center;background:var(--ink);border:1px solid var(--line);padding:16px 18px}
.pverij>b{font:400 30px/1 var(--loud);color:var(--crimson2)}
.pverij h3{font:600 17px/1.3 var(--body);margin:0}
.pverij p{margin:4px 0 0;color:var(--muted);font-size:15px}
@media(max-width:640px){.pverij{grid-template-columns:50px 1fr}.pverij .tag{grid-column:2}}
.melding{margin:0 0 18px}
body.grain>.demolint{position:fixed;left:0;right:0;bottom:0;z-index:150}
body.grain>.demolint p{font-size:11px;padding:6px 10px}
@media(max-width:560px){body.grain>.demolint p{letter-spacing:.06em}}
footer.voet{padding-bottom:60px}
.inhoud>.link{display:inline-block;margin-bottom:18px}
.tabs a{padding:10px 14px;text-decoration:none;font:600 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--bone)}
.tabs a[aria-current]{color:var(--bone);border-bottom-color:var(--crimson)}
.keuze span{display:block}
.keuze span b{display:block;margin-top:10px}
@media(max-width:700px){
 .balk{gap:8px}.balk .pad,.rolchip{display:none}
 .balk .rechts{gap:6px}.balk .btn.klein{padding:9px 10px;font-size:10px;letter-spacing:.1em}
 .demolint p{font-size:10px;letter-spacing:.04em;padding:5px 8px}
}
@media(max-width:900px){.hero .grid{display:flex;flex-direction:column}.badgewrap{order:2;max-width:300px;margin:30px auto 0}}