/* dvcgraphics.com
   Inktzwart met vlakke, felle kleuren: wat je op een folierol vindt, geen verlopen.
   Foto's zijn gestanste stickers: witte contour, een beetje scheef. */
@font-face{font-family:Zwaar;src:url(/font/black.woff2) format("woff2");font-weight:900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Zwaar;src:url(/font/black-ext.woff2) format("woff2");font-weight:900;font-display:swap;unicode-range:U+0100-02AF}
@font-face{font-family:Tekst;src:url(/font/tekst.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Tekst;src:url(/font/tekst-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF}

:root{
  --inkt:#0c0c10;--papier:#f4f1ea;--geel:#ffd400;--roze:#ff2d87;--blauw:#00b7ff;--oranje:#ff6a13;--groen:#16a34a;--paars:#7c3aed;--rood:#e5002b;
  --zwaar:Zwaar,"Arial Black",system-ui,sans-serif;
  --tekst:Tekst,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gat:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip}
body{margin:0;background:var(--inkt);color:#fff;font:400 17px/1.5 var(--tekst);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--zwaar);font-weight:900;margin:0;line-height:1.02;letter-spacing:-.01em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,:lang(ar) h1{letter-spacing:0;line-height:1.25}
:lang(ja) h1,:lang(zh) h1,:lang(hi) h1,:lang(ja) h2,:lang(zh) h2,:lang(hi) h2,:lang(ja) h3,:lang(zh) h3,:lang(hi) h3{line-height:1.25;letter-spacing:0}
:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}

.drukstrook{display:grid;grid-template-columns:repeat(8,1fr);height:7px}
.drukstrook i:nth-child(1){background:#00b7ff}.drukstrook i:nth-child(2){background:#ff2d87}.drukstrook i:nth-child(3){background:#ffd400}.drukstrook i:nth-child(4){background:#fff}
.drukstrook i:nth-child(5){background:#ff6a13}.drukstrook i:nth-child(6){background:#16a34a}.drukstrook i:nth-child(7){background:#7c3aed}.drukstrook i:nth-child(8){background:#e5002b}

.kop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:22px;padding:12px var(--gat);background:var(--inkt);border-bottom:1px solid #2a2a33}
.merk{display:block;background:#fff;padding:7px 12px 6px;border-radius:12px;transform:rotate(-1deg);flex:none;line-height:0}
.merk img{width:clamp(190px,20vw,270px)}
.menu{display:flex;gap:20px;margin-inline-start:auto;font-weight:600;font-size:15px}
.menu a{text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
.menu a:hover{border-color:var(--geel)}
.tel{font-weight:800;color:var(--geel);text-decoration:none;white-space:nowrap;direction:ltr}
.taal{position:relative}
#taalknop{background:none;border:1px solid #454552;border-radius:4px;padding:5px 6px;cursor:pointer;display:block}
#taalknop img{width:26px;height:19px}
.taalmenu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#fff;color:var(--inkt);border:2px solid var(--inkt);box-shadow:6px 6px 0 var(--geel);padding:6px;width:190px;max-height:70vh;overflow:auto}
.taalmenu a{display:flex;gap:10px;align-items:center;padding:6px 8px;text-decoration:none;font-size:15px}
.taalmenu a:hover,.taalmenu a.aan{background:var(--geel)}
.taalmenu img{width:24px;height:18px}

.held{overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(32px,6vw,80px) var(--gat) clamp(48px,7vw,96px);max-width:1520px;margin:auto}
.kicker{font-weight:700;color:var(--geel);margin:0 0 16px;font-size:16px}
.held h1{font-size:clamp(44px,6.1vw,104px)}
.held.lang-kop h1{font-size:clamp(36px,4.9vw,84px);overflow-wrap:anywhere}
.held.azie-kop h1{font-size:clamp(32px,3.9vw,66px)}
.held h1 span{display:block}
.geel{color:var(--geel)}.roze{color:var(--roze)}.blauw{color:var(--blauw)}.oranje{color:var(--oranje)}
.uitleg{margin:24px 0 0;font-size:clamp(18px,1.6vw,21px);max-width:38em}

.knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.knop{display:inline-block;padding:11px 18px;font-weight:800;font-size:15.5px;text-decoration:none;border:2.5px solid transparent;transition:transform .12s,box-shadow .12s}
.knop:hover{transform:translate(-2px,-2px)}
.geelknop{background:var(--geel);color:var(--inkt);box-shadow:5px 5px 0 var(--roze)}
.lijnwit{border-color:#fff;color:#fff}
.vol{background:var(--i,var(--inkt));color:var(--k,#fff)}
.lijn{border-color:var(--i);color:var(--i)}

.collage{position:relative;aspect-ratio:1/1;min-height:320px;max-width:100%}
.st{position:absolute;object-fit:cover;border:clamp(6px,.8vw,11px) solid #fff;border-radius:16px;box-shadow:0 12px 26px rgba(0,0,0,.55)}
.st-a{width:66%;height:52%;left:0;top:2%;transform:rotate(-4deg);z-index:2}
.st-b{width:58%;height:40%;right:0;top:14%;transform:rotate(5deg);z-index:1}
.st-c{width:50%;height:44%;left:7%;bottom:0;transform:rotate(3deg);z-index:3}
.st-d{width:52%;height:38%;right:1%;bottom:6%;transform:rotate(-5deg);z-index:2}

.doen{background:var(--papier);color:var(--inkt);padding:clamp(48px,7vw,96px) var(--gat)}
.sectiekop{max-width:1520px;margin:0 auto 34px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.sectiekop h2,.waar h2{font-size:clamp(38px,5.4vw,76px)}
.sectiekop p{margin:0;max-width:30em;font-size:18px}
.kaarten{max-width:1520px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kaart{position:relative;background:var(--k);color:var(--i);padding:22px 22px 24px;display:flex;flex-direction:column;min-height:400px;border:2.5px solid var(--inkt);box-shadow:7px 7px 0 var(--inkt);transition:transform .14s,box-shadow .14s;overflow:hidden}
.kaart:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--inkt)}
.icoon{display:block;width:72px;height:72px;color:var(--i)}
.icoon svg{width:100%;height:100%;display:block}
.kaart h3{font-size:clamp(22px,1.7vw,27px);margin-top:auto;padding-top:96px;overflow-wrap:anywhere}
.kaart p{margin:10px 0 0;font-size:16px;font-weight:500}
.kaart .knoppen{margin-top:18px}
.kaart .knop{padding:9px 13px;font-size:14.5px}
.sticker{position:absolute;top:18px;inset-inline-end:-22px;width:62%;height:130px;object-fit:cover;border:6px solid #fff;border-radius:12px;transform:rotate(6deg);box-shadow:0 7px 14px rgba(0,0,0,.35);transition:transform .2s}
[dir=rtl] .sticker{transform:rotate(-6deg)}
.kaart:hover .sticker{transform:rotate(1deg) scale(1.05)}

.buzzz{background:var(--geel);color:var(--inkt);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.62fr) minmax(0,.9fr);gap:clamp(16px,3vw,48px);align-items:end;padding:clamp(48px,6vw,84px) max(var(--gat),calc((100vw - 1520px)/2))}
.buzzz h2{font-size:clamp(50px,7vw,108px)}
.sub{font:900 clamp(22px,2.5vw,36px)/1.15 var(--zwaar);margin:10px 0 18px;color:var(--rood)}
.buzzztekst p:last-child{font-size:19px;margin:0}
.bij{margin:0;text-align:center}
.bij figcaption{display:inline-block;background:var(--inkt);color:#fff;font-weight:800;padding:4px 12px;margin-top:10px;font-size:15px}
.bij.oud img{filter:none;transform:rotate(-4deg)}

.waar{padding:clamp(48px,7vw,96px) max(var(--gat),calc((100vw - 1520px)/2));background:var(--inkt)}
.adressen{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.adres{padding:clamp(22px,3vw,38px);color:var(--inkt);display:flex;flex-direction:column;align-items:flex-start;--i:var(--inkt)}
.winkel{background:var(--blauw);--k:var(--blauw)}
.fabriek{background:var(--roze);--k:var(--roze)}
.adres h3{font-size:clamp(28px,3vw,44px)}
.adres address{font-style:normal;font-size:clamp(20px,2vw,26px);font-weight:700;margin:14px 0 0;line-height:1.3;direction:ltr;text-align:start}
.uren{display:flex;flex-wrap:wrap;gap:4px 14px;margin:18px 0 0;font-size:19px}
.tag{background:var(--inkt);color:#fff;font-weight:800;padding:4px 12px;margin:14px 0 22px}
.adres .knop{margin-top:auto}

.voet{background:#000;padding:36px var(--gat) 76px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:#c9c9d2;font-size:15px}
.voet p{margin:0;text-align:end}
.voet a{color:var(--geel)}

.vkop{background:var(--k);color:var(--i);padding:clamp(28px,5vw,64px) var(--gat)}
.vkop h1{font-size:clamp(42px,7vw,100px);margin-top:12px}
.vkop p{font-size:clamp(18px,1.6vw,21px);margin:14px 0 0;font-weight:500}
.terug{font-weight:700;display:inline-block;margin-bottom:18px}
.galerij{background:var(--papier);padding:clamp(28px,5vw,60px) var(--gat);color:var(--inkt)}
.raster{max-width:1520px;margin:auto;columns:4 280px;column-gap:18px}
.foto{display:block;break-inside:avoid;margin-bottom:18px;border:7px solid #fff;border-radius:12px;box-shadow:0 5px 14px rgba(0,0,0,.26);overflow:hidden;cursor:zoom-in;transition:transform .15s}
.foto:nth-child(3n){transform:rotate(-1deg)}.foto:nth-child(4n+1){transform:rotate(1deg)}
.foto:hover{transform:scale(1.02) rotate(0)}
.leeg{font:900 clamp(24px,3.4vw,44px)/1.2 var(--zwaar);margin:30px 0}
.ook{padding:40px var(--gat) 50px}
.ook h2{font-size:clamp(24px,3vw,34px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chips a{background:var(--k);color:var(--i);padding:8px 14px;font-weight:800;text-decoration:none}

#bak{border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh}
#bak::backdrop{background:rgba(0,0,0,.88)}
#bak img{max-width:94vw;max-height:92vh;width:auto;height:auto;border:8px solid #fff;border-radius:12px}
#baksluit{position:absolute;top:14px;inset-inline-end:14px;width:44px;height:44px;font-size:28px;line-height:1;border:0;background:var(--geel);color:var(--inkt);cursor:pointer}

@media (max-width:1180px){.kaarten{grid-template-columns:repeat(3,minmax(0,1fr))}.menu{gap:14px;font-size:14px}}
@media (max-width:980px){
  .menu{display:none}
  .tel{margin-inline-start:auto}
  .held{grid-template-columns:minmax(0,1fr)}
  .collage{aspect-ratio:4/3.4}
  .kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buzzz{grid-template-columns:1fr 1fr}
  .buzzztekst{grid-column:1/-1}
  .adressen{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .kop{gap:12px}
  .merk{padding:5px 8px 4px}.merk img{width:150px}
  .tel{font-size:14px}
  .kaarten{grid-template-columns:minmax(0,1fr)}.kaart{box-shadow:5px 5px 0 var(--inkt)}.held .knoppen{gap:12px}.st-b{right:2%}.st-d{right:3%}
  .kaart{min-height:0}
  .kaart h3{padding-top:64px}
  .sticker{height:120px;width:56%;inset-inline-end:-12px}
  .voet p{text-align:start}
  html{scroll-padding-top:70px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}