/* Stadsberoemd: één stijl voor de website, het klantendashboard en de Studio.
   Affiche-geel, inkt en wit. Koppen in Bricolage Grotesque (smal en vet), tekst in Onest. */
@font-face{font-family:"Bricolage";src:url("/fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Onest";src:url("/fonts/onest.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --geel:#ffc629;--geel-d:#e0a700;--geel-l:#fff3c2;
  --inkt:#15171c;--tekst:#2c2f37;--zacht:#676c7a;--lijn:#e5e2d9;--lijn-d:#cdc9bc;--vlak:#fff;--bg:#f6f5f0;--bg2:#eceae1;
  --rood:#e8412a;--rood-l:#fde6e1;--blauw:#2647c8;--blauw-l:#e3e9ff;--groen:#1a7a45;--groen-l:#dbf2e2;
  --r:16px;--r-s:11px;
  --kop:"Bricolage","Arial Narrow",system-ui,sans-serif;
  --font:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--tekst);font:400 1rem/1.55 var(--font);-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{color:var(--inkt);text-wrap:balance}
h1,h2,.kopfont{font-family:var(--kop);font-weight:800;font-stretch:78%;letter-spacing:-.015em;line-height:.98}
h1{font-size:clamp(2.9rem,9.4vw,5.9rem);line-height:.92}
h2{font-size:clamp(2rem,5vw,3.3rem)}
h3{font-size:1.15rem;font-weight:700;line-height:1.25}
h4{font-size:1rem;font-weight:700;line-height:1.3}
a{color:var(--inkt);text-underline-offset:.2em;text-decoration-thickness:.08em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blauw);outline-offset:2px;border-radius:6px}
::selection{background:var(--geel);color:var(--inkt)}
.num{font-variant-numeric:tabular-nums}
.zacht{color:var(--zacht)}
.klein{font-size:.9rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.rij{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tussen{justify-content:space-between}
.stapel{display:flex;flex-direction:column;gap:14px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.g2{grid-template-columns:1fr}}

/* Merk */
.merk{display:inline-flex;align-items:center;gap:.42em;font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.5rem;letter-spacing:-.02em;color:var(--inkt);text-decoration:none;line-height:1}
.merk i{width:.92em;height:.92em;background:var(--geel);clip-path:polygon(50% 0%,59.6% 8.1%,71.7% 5%,76.8% 16.4%,89.1% 18.8%,88.7% 31.3%,98.7% 38.9%,93% 50%,98.7% 61.1%,88.7% 68.7%,89.1% 81.2%,76.8% 83.6%,71.7% 95%,59.6% 91.9%,50% 100%,40.4% 91.9%,28.3% 95%,23.2% 83.6%,10.9% 81.2%,11.3% 68.7%,1.3% 61.1%,7% 50%,1.3% 38.9%,11.3% 31.3%,10.9% 18.8%,23.2% 16.4%,28.3% 5%,40.4% 8.1%);flex:none;margin-top:-.08em}
.merk.opgeel i,.held .merk i{background:var(--inkt)}
.merk i{position:relative;flex:none}
.merk i::after{content:"";position:absolute;inset:0;background:var(--inkt);clip-path:polygon(45.5% 22.8%,56% 39.6%,75.8% 38.2%,63% 53.5%,70.5% 71.9%,52.1% 64.4%,36.8% 77.2%,38.2% 57.4%,21.4% 46.9%,40.7% 42.1%)}
.merk.opgeel i::after,.held .merk i::after{background:var(--geel)}
.merk.wit{color:#fff}

/* Knoppen: stevig, als een sticker die je indrukt */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.55em 1.2em;border-radius:12px;border:2px solid var(--inkt);background:var(--vlak);color:var(--inkt);font-weight:700;text-decoration:none;line-height:1.15;box-shadow:0 3px 0 var(--inkt);transition:transform .08s ease,box-shadow .08s ease,background .12s ease;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--inkt)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--inkt)}
.btn.geel{background:var(--geel)}
.btn.geel:hover{background:#ffd04d}
.btn.donker{background:var(--inkt);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.28)}
.btn.donker:hover{box-shadow:0 4px 0 rgba(0,0,0,.28)}
.btn.plat{box-shadow:none;border-width:1.5px;border-color:var(--lijn-d);font-weight:650}
.btn.plat:hover{transform:none;border-color:var(--inkt);box-shadow:none}
.btn.plat:active{transform:none;background:var(--bg)}
.btn.stil{border-color:transparent;background:transparent;box-shadow:none;padding-inline:.7em}
.btn.stil:hover{background:var(--bg2);transform:none;box-shadow:none}
.btn.rood{color:var(--rood);border-color:var(--rood);box-shadow:none}
.btn.klein{min-height:38px;font-size:.92rem;padding:.35em .85em;border-radius:10px;box-shadow:0 2px 0 var(--inkt)}
.btn.klein.plat,.btn.klein.stil,.btn.klein.rood{box-shadow:none}
.btn.breed{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn svg{width:1.15em;height:1.15em;flex:none}

/* Kaarten, labels, formulieren */
.kaart{background:var(--vlak);border:1.5px solid var(--lijn);border-radius:var(--r);padding:20px}
.kaart.affiche{border:2px solid var(--inkt);box-shadow:5px 5px 0 var(--inkt)}
.kaart.geel{background:var(--geel-l);border-color:var(--geel-d)}
.chip{display:inline-flex;align-items:center;gap:.4em;font-size:.8rem;font-weight:700;line-height:1;padding:.5em .75em;border-radius:99px;background:var(--bg2);color:var(--tekst);white-space:nowrap}
.chip.film{background:var(--vlak);box-shadow:inset 0 0 0 1.5px var(--inkt);color:var(--inkt)}
.chip.maak{background:var(--blauw-l);color:var(--blauw)}
.chip.kijk{background:var(--geel);color:var(--inkt)}
.chip.ok{background:var(--groen-l);color:var(--groen)}
.chip.uit{color:var(--zacht)}
.chip.fout{background:var(--rood-l);color:var(--rood)}
.veld{display:flex;flex-direction:column;gap:6px}
.veld>span,.veld>label{font-weight:650;color:var(--inkt);font-size:.95rem}
.veld small{color:var(--zacht)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{width:100%;min-height:48px;padding:.6em .85em;border:1.5px solid var(--lijn-d);border-radius:var(--r-s);background:var(--vlak);color:var(--inkt)}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--inkt);box-shadow:0 0 0 3px var(--geel)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--inkt)}
.melding{padding:12px 14px;border-radius:var(--r-s);background:var(--bg2);color:var(--inkt);font-weight:550}
.melding.ok{background:var(--groen-l)}
.melding.fout{background:var(--rood-l);color:#9b2414}
.melding.let{background:var(--geel-l)}
.wissel{display:inline-flex;padding:4px;background:var(--vlak);border:2px solid var(--inkt);border-radius:14px;gap:4px;max-width:100%}
.wissel button{border:0;background:transparent;min-height:42px;padding:.45em 1.15em;border-radius:9px;font-weight:700;color:var(--inkt)}
.wissel button[aria-pressed=true]{background:var(--inkt);color:#fff}
hr.lijn{height:1.5px;background:var(--lijn);border:0;margin:0}
dl.feiten{display:grid;grid-template-columns:auto 1fr;gap:7px 18px}
dl.feiten dt{color:var(--zacht)}
dl.feiten dd{color:var(--inkt);font-weight:600;text-align:right}
.blokjes{display:flex;gap:4px}
.blokjes i{flex:1;height:12px;border-radius:4px;background:var(--bg2)}
.blokjes i.film{background:var(--vlak);box-shadow:inset 0 0 0 1.5px var(--lijn-d)}
.blokjes i.maak{background:#8ea2f0}
.blokjes i.kijk{background:var(--geel)}
.blokjes i.ok{background:var(--groen)}
.sticker{display:grid;place-items:center;text-align:center;aspect-ratio:1;background:var(--rood);color:#fff;font-family:var(--kop);font-weight:800;font-stretch:80%;line-height:.95;clip-path:polygon(50% 0%,59.6% 8.1%,71.7% 5%,76.8% 16.4%,89.1% 18.8%,88.7% 31.3%,98.7% 38.9%,93% 50%,98.7% 61.1%,88.7% 68.7%,89.1% 81.2%,76.8% 83.6%,71.7% 95%,59.6% 91.9%,50% 100%,40.4% 91.9%,28.3% 95%,23.2% 83.6%,10.9% 81.2%,11.3% 68.7%,1.3% 61.1%,7% 50%,1.3% 38.9%,11.3% 31.3%,10.9% 18.8%,23.2% 16.4%,28.3% 5%,40.4% 8.1%)}
.sticker small{display:block;font-family:var(--font);font-weight:650;font-size:.3em;letter-spacing:0;font-stretch:100%;margin-top:.35em}
.lint{display:inline-block;background:var(--inkt);color:var(--geel);font-weight:700;font-size:.82rem;padding:.4em .75em;border-radius:8px;transform:rotate(-2deg)}

/* Venster en bericht */
.sluier{position:fixed;inset:0;background:rgba(21,23,28,.55);display:grid;place-items:end center;z-index:50}
.venster{background:var(--vlak);width:min(560px,100%);max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;border:2px solid var(--inkt);border-bottom:0;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
@media (min-width:700px){.sluier{place-items:center;padding:24px}.venster{border-radius:22px;border-bottom:2px solid var(--inkt);padding:26px;box-shadow:6px 6px 0 var(--inkt)}}
.toost{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--inkt);color:#fff;padding:.8em 1.15em;border-radius:12px;font-weight:650;z-index:60;max-width:min(92vw,520px);text-align:center}
.toost.fout{background:var(--rood)}
.draai{width:1.1em;height:1.1em;border:.18em solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:draai .7s linear infinite;vertical-align:-.15em}
@keyframes draai{to{transform:rotate(360deg)}}

/* ---------- Website ---------- */
.kop{position:sticky;top:0;z-index:20;background:var(--geel);border-bottom:2px solid var(--inkt)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px}
.kop nav{display:flex;gap:4px;align-items:center}
.kop nav a.l{color:var(--inkt);text-decoration:none;font-weight:650;padding:.5em .75em;border-radius:9px}
.kop nav a.l:hover{background:rgba(21,23,28,.09)}
@media (max-width:820px){.kop nav a.wel{display:none}}
.sec{padding-block:clamp(60px,9vw,112px)}
.sec.wit{background:var(--vlak)}
.sec.geel{background:var(--geel)}
.sec.inkt{background:var(--inkt);color:#d9dbe1}
.sec.inkt h2,.sec.inkt h3{color:#fff}
.sec.rand{border-block:2px solid var(--inkt)}
.sec-kop{max-width:720px;margin-bottom:clamp(28px,4.5vw,52px);display:flex;flex-direction:column;gap:14px}
.sec-kop p{font-size:1.14rem;max-width:34em}
.held{background:var(--geel);border-bottom:2px solid var(--inkt);padding-block:clamp(34px,6vw,76px) clamp(44px,7vw,88px);overflow:hidden}
.held .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,70px);align-items:center}
.held .tekst{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px);align-items:flex-start}
.held p.groot{font-size:clamp(1.1rem,1.7vw,1.32rem);color:var(--inkt);max-width:31em;line-height:1.45}
.held .krabbel{position:relative;white-space:nowrap}
.held .krabbel svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.3em;overflow:visible}
.beloftes{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--inkt);font-weight:650;font-size:.98rem}
.beloftes li{display:flex;align-items:center;gap:.45em}
.beloftes svg{width:1.15em;height:1.15em}
.toneel{position:relative;justify-self:center;width:min(340px,78vw)}
.toneel .sticker{position:absolute;right:-17%;top:-5%;width:42%;font-size:clamp(1.9rem,3.6vw,2.7rem);transform:rotate(11deg);z-index:3}
.toneel .pijltje{position:absolute;left:-46%;bottom:20%;width:38%;color:var(--inkt);z-index:3}
.toneel .pijltje span{display:block;font-weight:700;font-size:.95rem;line-height:1.15;transform:rotate(-7deg);margin-bottom:4px}
@media (max-width:920px){.held .wrap{grid-template-columns:1fr}.toneel{margin-top:10px}.toneel .pijltje{display:none}.toneel .sticker{right:-7%;top:-6%}}
.telefoon{width:100%;aspect-ratio:9/18.4;border-radius:44px;background:var(--inkt);padding:10px;position:relative;transform:rotate(2.5deg);box-shadow:10px 12px 0 rgba(21,23,28,.9)}
.telefoon.recht{transform:none;box-shadow:8px 9px 0 var(--inkt)}
.telefoon iframe,.telefoon .scherm{width:100%;height:100%;border:0;border-radius:35px;background:var(--bg);display:block;overflow:hidden}
.telefoon::before{content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);width:27%;height:19px;border-radius:12px;background:var(--inkt);z-index:2}
.mini{font-size:12.5px;line-height:1.35;display:flex;flex-direction:column;color:var(--tekst);height:100%;background:var(--bg)}
.telefoon .scherm.mini{display:flex}
.telefoon.recht::before{display:none}
@media (max-width:1180px){.toneel .pijltje{display:none}}
.mini>*{flex:none}
.mini .m-top{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border-bottom:1px solid var(--lijn);padding:42px 13px 9px;font-weight:650;color:var(--inkt);font-size:.9em;white-space:nowrap}
.mini .m-top .merk{font-size:1.3em}
.mini .m-top .merk i{background:var(--geel)}
.mini .m-top .merk i::after{background:var(--inkt)}
.mini .m-in{display:flex;flex-direction:column;gap:9px;padding:13px 13px 0;flex:1;min-height:0;overflow:hidden}
.mini .m-in>*{flex:none}
.mini .m-kop{font-family:var(--kop);font-weight:800;font-stretch:78%;font-size:2em;line-height:1;color:var(--inkt)}
.mini .m-nu{background:var(--geel);border:1.5px solid var(--inkt);border-radius:12px;padding:10px 11px 11px;box-shadow:3px 3px 0 var(--inkt);display:flex;flex-direction:column;gap:4px;margin:2px 3px 4px 0}
.mini .m-nu small{font-weight:700;font-size:.85em;color:var(--inkt)}
.mini .m-nu b{font-family:var(--kop);font-weight:800;font-stretch:78%;font-size:1.4em;color:var(--inkt);line-height:1.05}
.mini .m-knop{align-self:flex-start;background:var(--inkt);color:#fff;font-weight:700;border-radius:7px;padding:.5em .85em;margin-top:4px}
.mini .m-rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:11px;padding:8px 9px}
.mini .m-rij i{width:2em;height:2em;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--inkt);font-family:var(--kop)}
.mini .m-rij b{color:var(--inkt);font-weight:650;line-height:1.2}
.mini .chip{font-size:.78em;padding:.42em .6em}
.mini .blokjes i{height:8px}
.mini .m-tabs{display:flex;background:#fff;border-top:1px solid var(--lijn);padding:7px 6px 13px}
.mini .m-tabs span{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.74em;font-weight:650;color:var(--zacht)}
.mini .m-tabs i{width:36px;height:19px;border-radius:8px;background:var(--bg2)}
.mini .m-tabs .aan{color:var(--inkt)}
.mini .m-tabs .aan i{background:var(--geel)}
.ticker{background:var(--inkt);color:var(--geel);overflow:hidden;white-space:nowrap;font-family:var(--kop);font-weight:700;font-stretch:84%;font-size:clamp(1.05rem,2vw,1.35rem)}
.ticker .band{display:inline-flex;padding:.7em 0;animation:schuif 46s linear infinite}
.ticker span{padding-inline:1.1em;position:relative}
.ticker span::after{content:"";position:absolute;right:-.28em;top:50%;width:.5em;height:.5em;margin-top:-.25em;background:currentColor;opacity:.75;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ticker:hover .band{animation-play-state:paused}
@keyframes schuif{to{transform:translateX(-50%)}}
.stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.stappen li{display:flex;flex-direction:column;gap:10px;position:relative}
.stappen .beeld{aspect-ratio:1.15;border-radius:20px;background:var(--bg);border:2px solid var(--inkt);display:grid;place-items:center;margin-bottom:8px;position:relative}
.stappen li:nth-child(even) .beeld{background:var(--geel)}
.stappen .beeld svg{width:56%;height:auto;color:var(--inkt)}
.stappen .n{position:absolute;left:-10px;top:-12px;width:40px;height:40px;border-radius:50%;background:var(--inkt);color:#fff;display:grid;place-items:center;font-family:var(--kop);font-weight:800;font-size:1.25rem;transform:rotate(-6deg)}
.stappen h3{font-family:var(--kop);font-weight:800;font-stretch:82%;font-size:1.5rem;letter-spacing:-.01em;line-height:1.05}
@media (max-width:940px){.stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}.stappen .beeld{aspect-ratio:2.1}.stappen .beeld svg{width:30%}}
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(30px,6vw,90px);align-items:center}
.demo ul.punten{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.demo ul.punten li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:1.06rem}
.demo ul.punten li svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--geel);color:var(--inkt);margin-top:1px}
@media (max-width:860px){.demo{grid-template-columns:1fr}.demo .telefoon{max-width:320px;margin-inline:auto}}
.prijzen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.prijzen.twee{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px}
@media (max-width:940px){.prijzen,.prijzen.twee{grid-template-columns:1fr;max-width:520px}}
.prijs{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--vlak);border:2px solid var(--inkt);border-radius:22px;padding:26px 24px 24px}
.prijs.top{background:var(--geel);box-shadow:7px 7px 0 var(--inkt)}
.prijs .lint{position:absolute;top:-15px;right:18px;transform:rotate(3deg)}
.prijs h3{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.9rem;line-height:1}
.prijs .bedrag{display:flex;align-items:baseline;gap:.35em;color:var(--inkt)}
.prijs .bedrag b{font-family:var(--kop);font-size:3.7rem;font-weight:800;font-stretch:78%;letter-spacing:-.02em;line-height:.9}
.prijs .per{font-weight:600;color:var(--tekst)}
.prijs .pv{font-weight:650;color:var(--inkt)}
.prijs ul{display:flex;flex-direction:column;gap:9px;margin-block:4px 10px}
.prijs li{display:grid;grid-template-columns:1.25em 1fr;gap:.55em;align-items:start}
.prijs li svg{width:1.15em;height:1.15em;margin-top:.22em}
.prijs .btn{margin-top:auto}
.reclame{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.reclame .doek{aspect-ratio:16/9;border-radius:18px;border:2px solid #fff;background:#23262e;display:grid;place-items:center;position:relative;overflow:hidden}
.reclame .doek video,.reclame .doek img{width:100%;height:100%;object-fit:cover}
.zoeker{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:30px 34px;color:#fff}
.zoeker::before,.zoeker::after,.zoeker .h1,.zoeker .h2{content:"";position:absolute;width:34px;height:34px;border:3px solid var(--geel)}
.zoeker::before{left:14px;top:14px;border-right:0;border-bottom:0}
.zoeker::after{right:14px;bottom:14px;border-left:0;border-top:0}
.zoeker .h1{right:14px;top:14px;border-left:0;border-bottom:0}
.zoeker .h2{left:14px;bottom:14px;border-right:0;border-top:0}
.zoeker .rec{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums}
.zoeker .rec i{width:11px;height:11px;border-radius:50%;background:var(--rood)}
.zoeker b{display:block;font-family:var(--kop);font-weight:800;font-stretch:78%;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:.95;max-width:9em;margin-bottom:8px}
.zoeker small{font-weight:600;color:#c9ccd6}
@media (max-width:860px){.reclame{grid-template-columns:1fr}}
.vragen details{border-bottom:1.5px solid var(--lijn-d)}
.vragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:19px 2px;font-weight:700;color:var(--inkt);font-size:1.1rem}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";font-family:var(--kop);font-size:1.7rem;line-height:.8;font-weight:500;flex:none;width:34px;height:34px;border-radius:50%;background:var(--geel);display:grid;place-items:center}
.vragen details[open] summary::after{content:"–"}
.vragen details p{padding:0 2px 20px;max-width:62ch}
.aanvraag{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,5vw,70px);align-items:start}
@media (max-width:860px){.aanvraag{grid-template-columns:1fr}}
.voet{background:var(--inkt);color:#b9bcc6;padding-block:48px 36px}
.voet a{color:#fff}
.voet .wrap{display:flex;flex-wrap:wrap;gap:28px 64px;justify-content:space-between}
.voet h4{color:var(--geel);margin-bottom:10px}
.voet ul{display:flex;flex-direction:column;gap:7px}

/* ---------- De app (klant en Studio) ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:15;background:var(--vlak);border-bottom:1.5px solid var(--lijn);padding-top:env(safe-area-inset-top,0px)}
.app-top .in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.app-top .merk{font-size:1.3rem}
.app-top .wie{font-weight:650;color:var(--inkt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.app-main{flex:1;width:100%;max-width:760px;margin-inline:auto;padding:22px max(16px,env(safe-area-inset-right,0px)) calc(108px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:16px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:16;background:var(--vlak);border-top:1.5px solid var(--lijn);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs .in{display:flex;width:min(760px,100%)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;text-decoration:none;color:var(--zacht);font-size:.74rem;font-weight:650;position:relative;min-width:0}
.tabs a svg{width:24px;height:24px;padding:0;box-sizing:content-box;border-radius:10px;padding:3px 14px}
.tabs a[aria-current=page]{color:var(--inkt)}
.tabs a[aria-current=page] svg{background:var(--geel)}
.tabs .stip{position:absolute;top:4px;left:calc(50% + 12px);min-width:18px;height:18px;border-radius:9px;background:var(--rood);color:#fff;font-size:.7rem;display:grid;place-items:center;padding:0 5px}
@media (min-width:1000px){
  .app.zij{flex-direction:row;flex-wrap:wrap}
  .app.zij .app-top{flex:0 0 100%}
  .app.zij .tabs{position:sticky;top:61px;bottom:auto;align-self:flex-start;border-top:0;border-right:1.5px solid var(--lijn);width:228px;height:calc(100dvh - 61px);justify-content:flex-start;padding:16px 12px;background:var(--vlak)}
  .app.zij .tabs .in{flex-direction:column;gap:4px;width:100%}
  .app.zij .tabs a{flex:none;flex-direction:row;gap:10px;font-size:.98rem;padding:9px 12px;border-radius:11px;justify-content:flex-start}
  .app.zij .tabs a svg{padding:0;background:transparent}
  .app.zij .tabs a[aria-current=page]{background:var(--geel)}
  .app.zij .tabs a:not([aria-current=page]):hover{background:var(--bg)}
  .app.zij .tabs .stip{position:static;margin-left:auto}
  .app.zij .app-main{padding-bottom:48px;margin-inline:0;flex:1;min-width:0;max-width:1040px;padding-left:32px;padding-right:32px}
  .app.zij.donker .tabs{background:var(--inkt);border-right:0}
  .app.zij.donker .tabs a{color:#b9bcc6}
  .app.zij.donker .tabs a:not([aria-current=page]):hover{background:#23262e;color:#fff}
  .app.zij.donker .tabs a[aria-current=page]{color:var(--inkt)}
}
.groet h1{font-size:clamp(2rem,6.4vw,2.9rem);line-height:.98}
.nu{background:var(--geel);border:2px solid var(--inkt);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:5px 5px 0 var(--inkt);align-items:flex-start}
.nu h2{font-size:clamp(1.5rem,4.6vw,1.95rem)}
.nu p{color:var(--inkt)}
.kopje{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px}
.kopje h2{font-family:var(--font);font-size:1.02rem;font-weight:700;letter-spacing:0;font-stretch:100%;line-height:1.3}
.scriptrij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--vlak);border:1.5px solid var(--lijn);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:inherit;transition:border-color .12s ease}
a.scriptrij:hover{border-color:var(--inkt)}
.scriptrij .nr{width:2.3em;height:2.3em;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-family:var(--kop);font-weight:800;color:var(--inkt)}
.scriptrij.kijk .nr{background:var(--geel)}
.scriptrij .t{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.scriptrij .t b{color:var(--inkt);font-weight:650;line-height:1.25}
.scriptrij>svg{width:20px;height:20px;color:var(--zacht)}
.terug{display:inline-flex;align-items:center;gap:.35em;font-weight:650;text-decoration:none;color:var(--inkt);padding:.3em 0;align-self:flex-start}
.terug svg{width:1.1em;height:1.1em}
.titel{font-size:clamp(1.9rem,6vw,2.6rem);line-height:.98}
.hook{font-size:1.14rem;color:var(--inkt);font-weight:550;border-left:4px solid var(--geel);padding:.15em 0 .15em .75em}
.scenes{counter-reset:sc;display:flex;flex-direction:column;gap:10px}
.scenes li{counter-increment:sc;display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;background:var(--vlak);border:1.5px solid var(--lijn);border-radius:var(--r);padding:15px 16px}
.scenes li::before{content:counter(sc);width:2em;height:2em;border-radius:9px;background:var(--inkt);color:#fff;display:grid;place-items:center;font-family:var(--kop);font-weight:800}
.scenes dl{display:flex;flex-direction:column;gap:9px;min-width:0}
.scenes dt{font-size:.8rem;font-weight:700;color:var(--zacht)}
.scenes dd{color:var(--inkt)}
.scenes dd.zeg{font-weight:600}
.scenes dd.zeg::before{content:"“"}
.scenes dd.zeg::after{content:"”"}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:2px dashed var(--inkt);border-radius:var(--r);padding:28px 16px;background:var(--geel-l);color:var(--inkt);font-weight:700;cursor:pointer;transition:background .12s ease}
.drop:hover,.drop.over{background:var(--geel)}
.drop svg{width:36px;height:36px}
.drop small{font-weight:500;color:var(--tekst)}
.clip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:var(--r-s);background:var(--vlak)}
.clip .ic{width:40px;height:40px;border-radius:9px;background:var(--bg2);display:grid;place-items:center;color:var(--zacht)}
.clip .ic svg{width:20px;height:20px}
.clip .ic.ok{background:var(--groen-l);color:var(--groen)}
.clip .ic.fout{background:var(--rood-l);color:var(--rood)}
.clip .n{min-width:0}
.clip .n b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--inkt);font-weight:600}
.clip .n small{color:var(--zacht)}
.clip progress{width:100%;height:7px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:var(--bg2);display:block;margin-top:6px}
.clip progress::-webkit-progress-bar{background:var(--bg2)}
.clip progress::-webkit-progress-value{background:var(--inkt)}
.clip progress::-moz-progress-bar{background:var(--inkt)}
.clip button{border:0;background:transparent;width:40px;height:40px;border-radius:9px;color:var(--zacht);display:grid;place-items:center}
.clip button:hover{background:var(--bg2);color:var(--rood)}
.clip button svg{width:20px;height:20px}
.videovak{background:#000;border-radius:20px;border:2px solid var(--inkt);overflow:hidden;aspect-ratio:9/16;max-height:68dvh;margin-inline:auto;width:min(100%,330px);display:grid;place-items:center;position:relative}
.videovak video{width:100%;height:100%;object-fit:contain;background:#000}
.nep{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:radial-gradient(120% 80% at 30% 20%,#3a3f4d,#15171c 70%);color:#fff;gap:10px}
.nep::before{content:"Voorbeeld";position:absolute;top:14px;left:14px;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.16);padding:.3em .6em;border-radius:6px}
.nep b{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.7rem;line-height:1}
.nep span{align-self:flex-start;background:var(--geel);color:var(--inkt);font-weight:700;padding:.3em .55em;border-radius:6px}
.praat{display:flex;flex-direction:column;gap:8px}
.praat li{max-width:88%;padding:10px 13px;border-radius:14px 14px 14px 4px;background:var(--bg2);color:var(--inkt)}
.praat li.ik{align-self:flex-end;background:var(--geel-l);border-radius:14px 14px 4px 14px}
.praat li small{display:block;color:var(--zacht);margin-top:2px}
.bijschrift{white-space:pre-wrap;background:var(--bg);border:1.5px dashed var(--lijn-d);border-radius:var(--r-s);padding:12px 14px;color:var(--inkt)}
.raster-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.vkaart{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.vkaart .beeld{aspect-ratio:9/16;border-radius:14px;border:2px solid var(--inkt);background:var(--inkt);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:#fff;position:relative;overflow:hidden}
.vkaart .beeld svg{position:absolute;top:12px;right:12px;width:30px;height:30px;color:var(--geel)}
.vkaart .beeld b{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.15rem;line-height:1.02;color:#fff}
.vkaart:hover .beeld{box-shadow:4px 4px 0 var(--geel)}
.plan{border:1.5px solid var(--lijn-d);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;background:var(--vlak);text-align:left;width:100%}
button.plan:hover{border-color:var(--inkt)}
.plan.nu{border:2px solid var(--inkt);background:var(--geel-l)}
.plan b{color:var(--inkt);font-size:1.08rem}
.plan .p{font-family:var(--kop);font-weight:800;color:var(--inkt);font-size:1.5rem;text-align:right;line-height:1}
.plan small{color:var(--zacht);grid-column:1/-1}
.tabel{width:100%;border-collapse:collapse}
.tabel th{text-align:left;font-size:.82rem;color:var(--zacht);font-weight:650;padding:10px 12px;border-bottom:1.5px solid var(--lijn);white-space:nowrap}
.tabel td{padding:12px;border-bottom:1.5px solid var(--lijn);vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel td.r,.tabel th.r{text-align:right}
.tabel tr.klik{cursor:pointer}
.tabel tr.klik:hover td{background:var(--bg)}
.tabel-wrap{overflow-x:auto;border:1.5px solid var(--lijn);border-radius:var(--r);background:var(--vlak)}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tegel{display:flex;flex-direction:column;gap:6px;background:var(--vlak);border:1.5px solid var(--lijn);border-radius:var(--r);padding:16px;text-decoration:none;color:inherit}
a.tegel:hover{border-color:var(--inkt)}
.tegel b{font-family:var(--kop);font-size:2.6rem;font-weight:800;font-stretch:80%;color:var(--inkt);line-height:.9}
.tegel span{color:var(--tekst);font-weight:600;line-height:1.25}
.tegel.aan{border:2px solid var(--inkt);box-shadow:4px 4px 0 var(--inkt)}
.tegel.aan b{align-self:flex-start;background:linear-gradient(transparent 60%,var(--geel) 60%);padding:0 .1em}
.leeg{text-align:center;padding:36px 18px;color:var(--zacht);border:2px dashed var(--lijn-d);border-radius:var(--r);display:flex;flex-direction:column;gap:10px;align-items:center}
.leeg svg{width:54px;height:54px;color:var(--inkt)}
.leeg b{color:var(--inkt);font-size:1.08rem}
.midden{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--geel)}
.midden .kaart{width:min(450px,100%);display:flex;flex-direction:column;gap:18px;padding:28px;border:2px solid var(--inkt);box-shadow:7px 7px 0 var(--inkt);border-radius:22px}
.kolommen{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px;align-items:start}
@media (max-width:900px){.kolommen{grid-template-columns:1fr}}
.script-edit{border:1.5px solid var(--lijn);border-radius:var(--r);background:var(--vlak);padding:16px;display:flex;flex-direction:column;gap:12px}
.script-edit.af{border-left:6px solid var(--groen)}
.script-edit.leegte{border-style:dashed}
.scene-edit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px;border-radius:var(--r-s);background:var(--bg)}
.scene-edit .velden{display:flex;flex-direction:column;gap:6px}
.scene-edit input{min-height:40px}
.scene-edit>b{width:1.8em;height:1.8em;border-radius:8px;background:var(--inkt);color:#fff;display:grid;place-items:center;font-family:var(--kop);margin-top:6px}

/* Factuur */
.factuur{background:#fff;color:#111;max-width:800px;margin:24px auto;padding:52px;border-radius:10px;border:1.5px solid var(--lijn);font-size:.98rem}
.factuur h1{font-size:2.6rem;color:#111}
.factuur table{width:100%;border-collapse:collapse;margin-top:30px}
.factuur th{text-align:left;border-bottom:2px solid #111;padding:8px 6px;font-size:.85rem}
.factuur td{padding:11px 6px;border-bottom:1px solid #ddd;vertical-align:top}
.factuur .r{text-align:right;white-space:nowrap}
.factuur .tot td{border-bottom:0;padding-block:5px}
.factuur .tot tr:last-child td{font-weight:800;font-size:1.14rem;border-top:2px solid #111;padding-top:10px}
.factuur .adres{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.factuur .adres p{line-height:1.5}
@media print{body{background:#fff}.niet-print{display:none!important}.factuur{border:0;margin:0;padding:0;max-width:none}}
@media (max-width:640px){.factuur{padding:22px;margin:0;border-radius:0;border:0}.factuur .adres{grid-template-columns:1fr;gap:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.ticker .band{animation:none}}

/* ---------- Aanvullingen ---------- */
.i{width:1.2em;height:1.2em;flex:none}
.demoband{flex:0 0 100%;margin:0;background:var(--inkt);color:#fff;text-align:center;font-size:.86rem;font-weight:550;padding:7px 14px}
.demoband a{color:var(--geel);font-weight:700}
.scriptrij .nr svg{width:1.15em;height:1.15em}
.vkaart{align-items:flex-start}
.vkaart .beeld{width:100%}
.drop:focus-within{outline:3px solid var(--blauw);outline-offset:2px}
.inalles{margin-top:22px;border:2px solid var(--inkt);border-radius:22px;padding:22px 24px;background:var(--bg);display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:14px 28px;align-items:start}
.inalles h3{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.6rem;line-height:1}
.inalles ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px}
.inalles li{display:grid;grid-template-columns:1.25em 1fr;gap:.55em;align-items:start}
.inalles li svg{width:1.15em;height:1.15em;margin-top:.22em}
@media (max-width:760px){.inalles{grid-template-columns:1fr}.inalles ul{grid-template-columns:1fr}}
.waarom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.redenen{display:flex;flex-direction:column;margin-top:22px}
.redenen li{padding:16px 0;border-top:1.5px solid var(--lijn-d);font-size:1.06rem}
.redenen li:last-child{border-bottom:1.5px solid var(--lijn-d)}
.redenen b{color:var(--inkt)}
.vergelijk{display:flex;flex-direction:column;gap:18px;padding:26px}
.vergelijk h3{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.6rem;line-height:1}
.balk{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.balk span{font-weight:600;color:var(--inkt)}
.balk b{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.35rem;color:var(--inkt);white-space:nowrap}
.balk i{grid-column:1/-1;height:22px;border-radius:7px;background:var(--bg2);border:2px solid var(--inkt);min-width:26px}
.balk.wij i{background:var(--geel)}
.nep svg{position:absolute;left:50%;top:42%;width:64px;height:64px;transform:translate(-50%,-50%);color:rgba(255,255,255,.9)}
@media (min-width:1000px){.app.zij.smal .app-main{max-width:820px}}
[data-scenes]{counter-reset:se}
.scene-edit>b::before{counter-increment:se;content:counter(se)}
input[type=file]{font-size:.95rem;max-width:100%}
progress{accent-color:var(--inkt)}
.proza{max-width:70ch;display:flex;flex-direction:column;gap:14px;font-size:1.05rem}
.proza h1{font-size:clamp(2.4rem,7vw,3.6rem);margin-bottom:6px}
.proza h2{font-size:1.55rem;margin-top:20px}
.proza ul{list-style:disc;padding-left:1.25em;display:flex;flex-direction:column;gap:7px}
.proza b{color:var(--inkt)}
@media (max-width:860px){.waarom{grid-template-columns:1fr}}


/* 10 november: scripts met tijd per scène, uitleg, grote tekst, over mij, voorbeelden en groter dan je stad */
.scenes dt.sc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.scenes dt.sc-top small{font-weight:600;white-space:nowrap}
.scenes dd.stil{color:var(--zacht)}
.feitjes{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--inkt)}
.feitjes>span{display:flex;align-items:flex-start;gap:.45em}
.feitjes>span>svg{margin-top:.2em}
.feitjes svg{color:var(--zacht)}
.kaart.uitleg{background:var(--geel-l);border-color:var(--geel-d)}
.tipvak summary{cursor:pointer;font-weight:700;color:var(--inkt);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.tipvak summary::-webkit-details-marker{display:none}
.tipvak summary::after{content:"+";font-family:var(--kop);font-size:1.6rem;line-height:.8;font-weight:500;flex:none;width:30px;height:30px;border-radius:50%;background:var(--geel);display:grid;place-items:center}
.tipvak[open] summary::after{content:"–"}
.tipvak li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.tipvak li svg{margin-top:.2em;color:var(--groen)}
.stappenkort{counter-reset:st;display:flex;flex-direction:column;gap:9px}
.stappenkort li{counter-increment:st;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.stappenkort li::before{content:counter(st);width:1.75em;height:1.75em;border-radius:50%;background:var(--geel);border:1.5px solid var(--inkt);color:var(--inkt);display:grid;place-items:center;font-weight:800;font-size:.88rem}
.stappenkort b{color:var(--inkt)}
.venster.groot{width:min(700px,100%)}
.filmregel{color:var(--zacht);font-weight:600}
.zegroot{font-family:var(--kop);font-weight:800;font-stretch:84%;font-size:clamp(1.9rem,7vw,2.9rem);line-height:1.08;color:var(--inkt);text-wrap:balance;min-height:3.3em}
.zegroot.stil{color:var(--zacht);font-size:1.5rem;min-height:0}
.groter{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--inkt);color:#d9dbe1;border-radius:var(--r);padding:22px 24px}
.groter>div{flex:1 1 440px;display:flex;flex-direction:column;gap:6px}
.groter h3{color:#fff;font-family:var(--kop);font-weight:800;font-stretch:82%;font-size:1.7rem;line-height:1.05}
.groter p{max-width:48em}
.overmij{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,84px);align-items:center}
.overmij .portret{position:relative;justify-self:center;width:min(100%,340px)}
.overmij .portret img{aspect-ratio:4/5;object-fit:cover;width:100%;border:2px solid var(--inkt);border-radius:20px;box-shadow:8px 9px 0 var(--inkt);transform:rotate(-2deg)}
.overmij .uitspraak{background:var(--geel);border:2px solid var(--inkt);border-radius:20px;box-shadow:8px 9px 0 var(--inkt);padding:30px 26px;transform:rotate(-2deg);font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.04;color:var(--inkt);text-wrap:balance}
.overmij .uitspraak small{display:block;font-family:var(--font);font-stretch:100%;font-weight:650;font-size:.95rem;margin-top:16px}
.overmij .portret.metfoto .uitspraak{position:absolute;left:-7%;bottom:-8%;width:80%;font-size:1.22rem;padding:14px 16px;border-radius:14px;box-shadow:5px 5px 0 var(--inkt);transform:rotate(3deg)}
.overmij .portret.metfoto .uitspraak small{font-size:.82rem;margin-top:8px}
.overmij .tekst{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.overmij .tekst p{font-size:1.1rem;max-width:34em}
@media (max-width:860px){.overmij{grid-template-columns:1fr}.overmij .portret{order:2;margin-top:6px;width:min(100%,300px)}}
.voorbeelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,230px));gap:20px}
.voorbeelden figure{display:flex;flex-direction:column;gap:9px}
.voorbeelden video{aspect-ratio:9/16;width:100%;object-fit:cover;background:#000;border:2px solid #fff;border-radius:18px}
.voorbeelden figcaption{font-weight:650;color:#fff}
.scene-edit input.sec{width:5.4em;flex:none}
.duurmeter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--inkt);font-weight:650}
.vbrij{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1.5px solid var(--lijn);border-radius:var(--r-s)}
.vbrij video{width:54px;aspect-ratio:9/16;object-fit:cover;border-radius:7px;background:var(--inkt)}
.vbrij input{min-height:40px}
.overfoto{width:92px;aspect-ratio:4/5;object-fit:cover;border-radius:10px;border:1.5px solid var(--inkt)}

/* Klaarzetten voor montage */
.kz-rij{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding-top:12px;border-top:1.5px solid var(--lijn)}
.kz-wie{display:flex;flex-direction:column;min-width:0}
.kz-wie b{color:var(--inkt)}
.kz-wie small{color:var(--zacht)}
.kz-stappen{list-style:decimal;padding-left:1.3em;display:grid;gap:4px}
.venster progress{height:10px;appearance:none;border:0;border-radius:5px;overflow:hidden;background:var(--bg2)}
.venster progress::-webkit-progress-bar{background:var(--bg2)}
.venster progress::-webkit-progress-value{background:var(--inkt)}
.venster progress::-moz-progress-bar{background:var(--inkt)}

/* ---------- Dienstpagina's ---------- */
.kop nav a.l[aria-current=page]{background:rgba(21,23,28,.12)}
.held.dienst h1{font-size:clamp(2.5rem,7.2vw,4.7rem);line-height:.94}
.held.dienst .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:920px){.held.dienst .wrap{grid-template-columns:1fr}}
a.meer{font-weight:650}
.sec.inkt a.meer{color:#fff}
/* Bedrijfsvideo: de twee formaten die je krijgt */
.formaten{position:relative;justify-self:center;width:min(100%,440px);padding-bottom:16%}
.formaten .lig{position:relative;aspect-ratio:16/9;border-radius:18px;background:var(--inkt);box-shadow:9px 10px 0 rgba(21,23,28,.9);transform:rotate(-2deg);overflow:hidden}
.formaten .lig .zoeker{padding:24px 28px}
.formaten .zoeker b{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:4px}
.formaten .sta{position:absolute;right:2%;bottom:0;width:29%;aspect-ratio:9/16;border-radius:16px;background:var(--vlak);border:2px solid var(--inkt);box-shadow:5px 6px 0 var(--inkt);transform:rotate(5deg);display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:12px 11px;color:var(--inkt)}
.formaten .sta b{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1}
.formaten .sta small{font-weight:600;font-size:.78rem;line-height:1.2;color:var(--tekst)}
.formaten .sta::before{content:"";width:44%;aspect-ratio:1;border-radius:50%;background:var(--geel);border:2px solid var(--inkt);margin:auto;clip-path:none}
.formaten .sticker{position:absolute;right:-7%;top:-16%;width:35%;font-size:clamp(1.5rem,3vw,2.15rem);transform:rotate(10deg);z-index:3}
@media (max-width:920px){.formaten{margin-top:44px}.formaten .sticker{right:-2%}}
.krijg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:start}
.krijg>div:first-child{display:flex;flex-direction:column;gap:16px}
.lijstje{display:flex;flex-direction:column;gap:13px;margin-top:6px}
.lijstje li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:1.06rem}
.lijstje li svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--geel);color:var(--inkt);margin-top:1px}
.prijskaart{background:var(--geel);padding:28px 26px;display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.prijskaart h3{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.6rem;line-height:1}
.prijskaart .bedrag{font-family:var(--kop);font-weight:800;font-stretch:78%;font-size:clamp(3.4rem,7vw,4.6rem);line-height:.9;color:var(--inkt);letter-spacing:-.02em}
.prijskaart p{color:var(--inkt)}
@media (max-width:860px){.krijg{grid-template-columns:1fr}.prijskaart{position:static}}
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.drie>div{border-top:2px solid var(--inkt);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.drie h3{font-family:var(--kop);font-weight:800;font-stretch:82%;font-size:1.5rem;line-height:1.05}
@media (max-width:820px){.drie{grid-template-columns:1fr}}
.rijstappen{counter-reset:st;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.rijstappen li{counter-increment:st;display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--inkt);padding-top:18px}
.rijstappen li::before{content:counter(st);width:40px;height:40px;border-radius:50%;background:var(--inkt);color:#fff;display:grid;place-items:center;font-family:var(--kop);font-weight:800;font-size:1.25rem;transform:rotate(-6deg);margin-bottom:4px}
.rijstappen h3{font-family:var(--kop);font-weight:800;font-stretch:82%;font-size:1.5rem;letter-spacing:-.01em;line-height:1.05}
@media (max-width:940px){.rijstappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.rijstappen{grid-template-columns:1fr}}
/* Video's per maand: zo ziet een script eruit, en zo is een video opgebouwd */
.scriptkaart{position:relative;justify-self:center;width:min(100%,430px);background:var(--vlak);border:2px solid var(--inkt);border-radius:22px;box-shadow:9px 10px 0 var(--inkt);padding:20px;display:flex;flex-direction:column;gap:12px;transform:rotate(1.5deg)}
.scriptkaart .boven{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:700;font-size:.86rem;color:var(--zacht)}
.scriptkaart .naam{font-family:var(--kop);font-weight:800;font-stretch:80%;font-size:1.65rem;line-height:1;color:var(--inkt)}
.scriptkaart ol{counter-reset:sc;display:flex;flex-direction:column;gap:8px}
.scriptkaart li{counter-increment:sc;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;border:1.5px solid var(--lijn);border-radius:13px;padding:10px 12px;background:var(--bg)}
.scriptkaart li::before{content:counter(sc);width:1.9em;height:1.9em;border-radius:8px;background:var(--inkt);color:#fff;display:grid;place-items:center;font-family:var(--kop);font-weight:800}
.scriptkaart li span{display:block;font-size:.92rem;line-height:1.35}
.scriptkaart li b{display:block;color:var(--inkt);font-weight:650;font-size:.95rem;line-height:1.3;margin-top:3px}
.scriptkaart li small{font-weight:700;color:var(--inkt);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:2px}
.scriptkaart .rest{font-size:.9rem;color:var(--zacht);font-weight:600}
.scriptkaart .sticker{position:absolute;right:-8%;bottom:-13%;width:31%;font-size:clamp(1.5rem,2.6vw,2rem);transform:rotate(11deg)}
.scriptkaart .rest{max-width:68%}
@media (max-width:920px){.scriptkaart{margin:20px 0 34px}.scriptkaart .sticker{right:-3%}}
.prijs .bedrag .van{font-weight:600;color:var(--tekst)}
.opbouw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(28px,6vw,84px);align-items:center}
.opbouw dl{display:flex;flex-direction:column;margin-top:22px}
.opbouw dt{font-family:var(--kop);font-weight:800;font-stretch:82%;font-size:1.5rem;color:var(--inkt);line-height:1.05;padding-top:16px;border-top:1.5px solid var(--lijn-d)}
.opbouw dd{padding:6px 0 16px;font-size:1.06rem;max-width:34em}
.staand{position:relative;justify-self:center;width:min(100%,280px);aspect-ratio:9/16;border-radius:28px;background:var(--inkt);box-shadow:9px 10px 0 var(--geel);overflow:hidden;color:#fff;font-family:var(--kop);font-weight:800;font-stretch:80%;text-align:center}
.staand::before{content:"";position:absolute;left:50%;top:45%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:#23262e;clip-path:polygon(50% 0%,59.6% 8.1%,71.7% 5%,76.8% 16.4%,89.1% 18.8%,88.7% 31.3%,98.7% 38.9%,93% 50%,98.7% 61.1%,88.7% 68.7%,89.1% 81.2%,76.8% 83.6%,71.7% 95%,59.6% 91.9%,50% 100%,40.4% 91.9%,28.3% 95%,23.2% 83.6%,10.9% 81.2%,11.3% 68.7%,1.3% 61.1%,7% 50%,1.3% 38.9%,11.3% 31.3%,10.9% 18.8%,23.2% 16.4%,28.3% 5%,40.4% 8.1%)}
.staand p{position:absolute;left:8%;right:8%;margin:0;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.55)}
.staand .h{top:26%;font-size:1.95rem;line-height:1}
.staand .o{top:63%;font-size:1.4rem;line-height:1.05}
.staand mark{background:none;color:var(--geel)}
.staand .loop{position:absolute;left:8%;right:8%;bottom:5%;height:5px;border-radius:3px;background:rgba(255,255,255,.25)}
.staand .loop i{display:block;width:34%;height:100%;border-radius:3px;background:#fff}
@media (max-width:860px){.opbouw{grid-template-columns:1fr}}

/* ---------- Persoonlijke scripts: de tien vragen en de cijfers per video ---------- */
.vragen-in{display:flex;flex-direction:column;gap:8px}
.vraag{border:1.5px solid var(--lijn-d);border-radius:var(--r-s);background:var(--vlak)}
.vraag.af{border-color:var(--groen);background:var(--groen-l)}
.vraag summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;font-weight:650;color:var(--inkt);list-style:none;line-height:1.3}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary .i{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--geel)}
.vraag.af summary .i{background:var(--groen);color:#fff}
.vraag textarea{display:block;width:calc(100% - 28px);margin:0 14px 14px}
.cijferregel{font-size:1.06rem;color:var(--inkt)}
.meercijfers summary{cursor:pointer;font-weight:650;color:var(--inkt)}
.werkt{display:flex;flex-direction:column;gap:8px}
.werkt li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
.werkt li i{grid-column:1/-1;height:8px;border-radius:4px;background:var(--bg2);overflow:hidden;display:block}
.werkt li i b{display:block;height:100%;background:var(--inkt);border-radius:4px}
.werkt li.top i b{background:var(--groen)}
.werkt li span{min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){.wissel button{padding-inline:.72em;font-size:.93rem;white-space:nowrap}}

/* ---------- Ideeënruimte: bedenken, één idee bewerken en onderzoek naar een zaak ---------- */
.wissel.breed{display:flex;flex-wrap:wrap}
.wissel.breed button,.wissel a{flex:1 1 auto;text-align:center}
.wissel a{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:42px;padding:.45em 1.1em;border-radius:9px;font-weight:700;color:var(--inkt);text-decoration:none;white-space:nowrap}
.wissel a[aria-current=page]{background:var(--inkt);color:#fff}
.wissel .telling{min-width:1.55em;height:1.55em;border-radius:99px;background:var(--rood);color:#fff;font-size:.74rem;display:inline-grid;place-items:center;padding:0 .35em}
.zeef{display:flex;flex-direction:column;gap:8px}
.zeef>div{display:flex;flex-wrap:wrap;gap:6px}
.zeef button{display:inline-flex;align-items:center;gap:.35em;min-height:38px;padding:.3em .9em;border-radius:99px;border:1.5px solid var(--lijn-d);background:var(--vlak);font-weight:650;font-size:.9rem;color:var(--tekst)}
.zeef button:hover{border-color:var(--inkt)}
.zeef button[aria-pressed=true]{background:var(--inkt);border-color:var(--inkt);color:#fff}
.zeef button svg{width:1em;height:1em}
.ideerij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px;align-items:center;background:var(--vlak);border:1.5px solid var(--lijn);border-radius:var(--r);padding:8px 14px 8px 6px}
.ideerij:hover{border-color:var(--inkt)}
.ideerij a.t{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0;text-decoration:none;color:inherit;padding:6px 4px}
.ideerij a.t b{color:var(--inkt);font-weight:650;line-height:1.25;overflow-wrap:anywhere}
.ideerij .zin{color:var(--tekst);font-size:.95rem;line-height:1.35;overflow-wrap:anywhere}
.ideerij>svg{width:20px;height:20px;color:var(--zacht)}
.sterknop{border:0;background:transparent;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--lijn-d);flex:none;padding:0}
.sterknop:hover{background:var(--bg2);color:var(--inkt)}
.sterknop[aria-pressed=true]{color:var(--geel-d)}
.sterknop svg{width:22px;height:22px}
details.meer>summary{cursor:pointer;font-weight:650;color:var(--inkt)}
details.kaart.meer>summary{font-weight:700}
.inleiding{font-size:1.12rem;color:var(--inkt);line-height:1.5}
dl.dossier{display:grid;gap:14px}
dl.dossier dt{font-size:.8rem;font-weight:700;color:var(--zacht)}
dl.dossier dd{color:var(--inkt);white-space:pre-wrap;overflow-wrap:anywhere}
@media (min-width:760px){dl.dossier{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}}
.punten{display:flex;flex-direction:column;gap:9px}
.punten li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;color:var(--inkt)}
.punten li::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--geel);border:1.5px solid var(--inkt);margin-top:.5em}
.haakjes{display:flex;flex-direction:column;gap:12px}
.haakjes li{display:flex;gap:10px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.haakjes .hook{flex:1 1 240px;min-width:0}
.bronnen{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.bronnen li{display:flex;flex-direction:column;gap:1px;min-width:0}
.bronnen a{font-weight:650;overflow-wrap:anywhere}
form[inert]{opacity:.55}
@media (max-width:560px){.scene-edit{row-gap:8px}.scene-edit .velden{grid-column:1/-1;grid-row:2}.scene-edit>b{margin-top:0;align-self:center}.scene-edit>button{grid-column:3;grid-row:1}}
@media (max-width:560px){.wissel a{padding-inline:.55em;font-size:.93rem}.wissel.hoog{flex-direction:column}}