@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{--geel:rgb(255,217,0);--bg:rgb(19,27,24);--paneel:rgb(31,61,51);--rand:rgb(49,88,76);--zacht:rgb(192,222,212);--r:10px;--rail:76px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:#fff;font:400 16px/1.6 Inter,Arial,sans-serif}
body.vast{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--geel)}
a:hover{color:#fff}
h1,h2,h3{font-weight:900;line-height:1.2;margin:0}
h1{font-size:34px;letter-spacing:-.01em}
h2{font-size:24px;margin-bottom:12px}
h3{font-size:17px;font-weight:800;margin:20px 0 8px}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px;padding-left:20px}
li{margin-bottom:6px}
.breed{width:min(1200px,100% - 32px);margin-inline:auto}
.kolom{margin-left:var(--rail);min-width:0;display:flex;flex-direction:column;min-height:100vh}
main{flex:1;padding:22px 0 40px}
main section{padding-top:36px}

/* icon rail */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);background:var(--paneel);border-right:1px solid var(--rand);padding:12px 6px;display:flex;flex-direction:column;gap:6px;z-index:30}
.rail a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0 7px;border-radius:var(--r);color:var(--zacht);text-decoration:none;font-size:9.5px;font-weight:700;line-height:1.1}
.rail svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.rail a:hover{color:#fff;background:rgba(49,88,76,.5)}
.rail a.nu{background:var(--rand);color:#fff}

/* top bar */
.balk{position:sticky;top:0;z-index:20;background:var(--paneel);border-bottom:1px solid var(--rand)}
.balk-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.merk{display:block;flex:none}
.balk-acties{display:flex;align-items:center;gap:8px}
.knop{display:inline-block;background:var(--geel);color:#000;border:1px solid var(--geel);border-radius:var(--r);padding:10px 16px;font-weight:700;font-size:14px;line-height:1.3;text-decoration:none;text-align:center}
.knop:hover{background:rgba(255,217,0,.8);color:#000}
.knop-lijn{background:transparent;color:#fff}
.knop-lijn:hover{background:transparent;color:var(--geel)}
.jaren{font-size:13px;font-weight:700;color:var(--zacht)}
.gorij{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}
.burger{display:none;width:42px;height:42px;background:transparent;border:1px solid var(--rand);border-radius:var(--r);padding:9px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:4px 0;transition:transform .15s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* lobby head */
.kop-lobby{margin-bottom:16px}
.kop-lobby p{margin-bottom:8px}
.kop-lobby .gorij{margin:14px 0 0}
.stempel{font-size:13px;color:var(--zacht);margin:6px 0 10px}
.acties{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.actie{position:relative;background:var(--paneel);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:#fff}
.actie:hover{color:#fff}
.actie img{width:100%;aspect-ratio:2/1}
.actie-tag{position:absolute;top:0;left:0;background:var(--geel);color:#000;font-size:12px;font-weight:700;padding:4px 12px;border-bottom-right-radius:12px}
.actie-tekst{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;font-size:14px;line-height:1.4;flex:1}
.pijl{flex:none;width:32px;height:32px;border-radius:50%;background:var(--geel);position:relative}
.pijl:after{content:"";position:absolute;left:10px;top:11px;width:8px;height:8px;border:solid #000;border-width:2px 2px 0 0;transform:rotate(45deg)}
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;padding:0;list-style:none}
.tegels li{background:var(--paneel);border-radius:var(--r);padding:14px 16px;margin:0}
.tegels b{display:block;font-size:22px;font-weight:900;color:var(--geel);line-height:1.2}
.tegels span{font-size:13px;color:var(--zacht);line-height:1.35;display:block;margin-top:4px}

/* page head */
.paneelkop{background:var(--paneel);border-radius:var(--r);overflow:hidden}
.paneelkop-in{padding:20px 24px 18px}
.paneelkop-in .gorij{margin-bottom:0}
.paneelkop-zij>.gorij{grid-column:1/-1;margin:0;padding:16px 24px 18px}
.paneelkop-zij{display:grid;grid-template-columns:480px 1fr;align-items:stretch}
.paneelkop-zij img{width:100%;height:auto;align-self:center}

/* content */
.tafel{overflow-x:auto;margin:12px 0 16px;border:1px solid var(--rand);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.4}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rand)}
thead th{background:var(--paneel);font-weight:800}
tbody th{font-weight:700}
tbody tr:last-child>*{border-bottom:0}
.inhoud{background:var(--paneel);border-radius:var(--r);margin:14px 0 0}
.inhoud summary{cursor:pointer;padding:12px 16px;font-weight:700;font-size:14px}
.inhoud ol{margin:0;padding:0 16px 14px 36px;columns:2;font-size:14px}
.plank{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0;padding:0;list-style:none}
.plank li{margin:0}
.plank img{border-radius:var(--r);width:100%;aspect-ratio:3/4;object-fit:cover}
.merken{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:12px 0;padding:0;list-style:none}
.merken li{background:var(--paneel);border-radius:var(--r);margin:0;padding:6px}
.kassa{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0;padding:0;list-style:none}
.kassa li{background:var(--paneel);border-radius:var(--r);padding:10px;margin:0;text-align:center;font-size:13px;font-weight:700;line-height:1.3}
.kassa img{margin:0 auto 6px;max-width:110px}
.valkuil{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0;padding:0;list-style:none}
.valkuil li{background:var(--paneel);border-radius:var(--r);padding:12px 16px;margin:0;font-size:15px}
.valkuil b{display:block;margin-bottom:2px;color:var(--geel)}
.dagen img{width:96px;border-radius:6px;margin-bottom:6px}
.stappen{list-style:none;counter-reset:s;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.stappen li{counter-increment:s;background:var(--paneel);border-radius:var(--r);padding:12px 14px 12px 50px;position:relative;margin:0;font-size:15px}
.stappen li:before{content:counter(s);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--geel);color:#000;font-weight:900;font-size:14px;line-height:28px;text-align:center}
.vragen details{background:var(--paneel);border-radius:var(--r);margin-bottom:8px}
.vragen summary{cursor:pointer;padding:12px 16px;font-weight:700}
.vragen p{padding:0 16px 14px;margin:0}
.grens{display:flex;gap:16px;background:var(--paneel);border:1px solid var(--rand);border-radius:var(--r);padding:16px 20px;margin-top:36px}
.grens img{flex:none}
.grens-kop,.gezien-kop{font-weight:900;font-size:17px;margin-bottom:6px}
.grens p:last-child{margin-bottom:0}
.grens-lijn{font-size:14px}
.gezien{border:1px solid var(--rand);border-radius:var(--r);padding:16px 20px;margin-top:12px;font-size:14px}
.gezien p:last-child{margin-bottom:0}
.regel{border:1px solid var(--rand);border-radius:var(--r);padding:12px 16px;margin:12px 0}

/* footer */
.voet{background:var(--paneel);border-top:1px solid var(--rand);padding:26px 0 30px;font-size:14px}
.voet-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0}
.voet-links a{color:#fff}
.voet-tekst{color:var(--zacht);margin-bottom:8px}
.voet-tekst a{color:var(--zacht)}
.voet-18{display:inline-block;vertical-align:middle;margin-right:6px}
.voet-klein{font-size:13px;margin:0}
.plak{display:none}

@media (max-width:1100px){
.paneelkop-zij{grid-template-columns:360px 1fr}
.plank{grid-template-columns:repeat(4,1fr)}
.merken{grid-template-columns:repeat(4,1fr)}
.kassa{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
:root{--rail:0px}
html{scroll-padding-top:70px}
body{padding-bottom:64px;font-size:15.5px}
.rail{inset:60px 0 0 0;width:auto;transform:translateX(-100%);visibility:hidden;border-right:0;padding:12px 16px;z-index:40}
.rail.open{transform:none;visibility:visible}
.rail a{flex-direction:row;gap:14px;font-size:16px;padding:14px 12px;justify-content:flex-start}
.balk-in{height:60px}
.merk img{width:130px;height:auto}
.balk-go{display:none}
.burger{display:block}
.knop-lijn{padding:9px 14px}
h1{font-size:26px}
h2{font-size:21px}
main{padding-top:16px}
main section{padding-top:28px}
.acties{grid-template-columns:1fr 1fr}
.actie:first-child{grid-column:1/3}
.actie:not(:first-child) .pijl{display:none}
.actie:not(:first-child) .actie-tekst{padding:10px 12px;font-size:13px}
.actie:not(:first-child) .actie-tag{font-size:11px;padding:3px 8px}
.tegels{grid-template-columns:1fr 1fr}
.paneelkop-zij{display:block}
.paneelkop-in{padding:16px}
.plank{grid-template-columns:repeat(3,1fr)}
.kassa{grid-template-columns:1fr 1fr}
.valkuil{grid-template-columns:1fr}
.inhoud ol{columns:1}
.grens{padding:14px;gap:12px}
.grens img{width:34px;height:34px}
th,td{padding:8px}
table{font-size:13px}
.plak{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--paneel);border-top:1px solid var(--rand);padding:9px 16px;gap:12px;align-items:center;justify-content:center}
.plak .knop{flex:1;max-width:300px}
}