/* BannerBazen · expertise.css
   De verdiepingspagina's van de vijf vakken (/expertise/<slug>/). Bouwt op site.css: de koppen,
   de sectiekoppen, .moeilijk, .stappen, .vragen, .ck en .raam komen daarvandaan. Hier staan de
   kop, de vaste delen en de vijf hoofdonderdelen. */

/* ---------- de kop ---------- */
.ex-kop{padding-top:calc(var(--kop-h) + var(--tl-h) + clamp(40px,7vw,110px))!important;padding-bottom:clamp(24px,3vw,44px)!important;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 clamp(30px,5vw,100px);align-items:end}
.ex-kop>.label{grid-column:1/-1;margin-bottom:18px}
/* het hoofdonderdeel sluit direct aan op de kop */
.ex-kop+.ex-hoofd{padding-top:clamp(50px,6vw,96px)}
.ex-kop__h1{max-width:13.5ch}
.ex-kop__rechts{padding-bottom:.4em}
.ex-kop__lead{max-width:48ch;font-size:clamp(19px,1.45vw,25px);line-height:1.38;letter-spacing:calc(-.012em * var(--krap) + var(--lucht));color:var(--fg-2)}
.ex-kop .knoppen{margin-top:clamp(24px,2.8vw,40px)}
/* de sectiekoppen een maat kleiner dan de kop van de pagina */
.pagina-expertise .sk>.titel{font-size:clamp(34px,4.4vw,86px);line-height:.96;letter-spacing:calc(-.04em * var(--krap) + var(--lucht))}
/* het slot: het contactblok van de site (v13, basis.contactblok) */

/* ---------- vaste delen ---------- */
.ex-sectie{border-top:1px solid var(--lijn)}
.ex-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,100px);align-items:start}
.ex-twee .sk{margin-bottom:0}
.ex-twee__links .ex-video{margin-top:clamp(36px,4.5vw,64px)}
.ex-twee .lopend p:first-child{color:var(--fg)}
.ex-punten{margin-bottom:0}
.ex-erkenning{margin-top:clamp(18px,2vw,28px);font-size:18px;line-height:1.4;color:var(--fg-2);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.ex-erkenning .label{color:var(--or-tekst)}
.ex-noot{margin-top:18px;font-size:14px;line-height:1.45;color:var(--fg-3);max-width:62ch}

/* formaten en toepassingen: kaarten op de rasterlijn */
.ex-kaarten{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:clamp(34px,4vw,60px) clamp(16px,2vw,30px)}
.ex-kaarten+.ex-kaarten{margin-top:clamp(44px,5vw,80px)}
/* kaarten met beeld: de beelden staan op één lijn onderaan, zodat de teksten gelijk beginnen */
.ex-kaarten--media{grid-template-rows:auto auto auto auto auto;row-gap:0}
.ex-kaarten--media .ex-kaart{grid-row:span 5;grid-template-rows:subgrid;gap:0}
.ex-kaarten--media .ex-kaart>*{margin-top:8px}
.ex-kaarten--media .ex-kaart>:first-child{margin-top:0;align-self:end}
.ex-kaarten--media .ex-kaart__nr{margin-top:4px}
.ex-kaart{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--lijn)}
.ex-kaart--media{border-top:0;padding-top:0}
.ex-kaart__nr{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ex-kaart h3{font-size:clamp(21px,1.6vw,28px);letter-spacing:calc(-.025em * var(--krap) + var(--lucht));line-height:1.1;font-weight:500}
.ex-kaart p{color:var(--fg-2);font-size:16px;line-height:1.45;max-width:42ch}
.ex-kaart .pijl-link{justify-self:start;margin-top:6px;font-size:15px}
.ex-kaart__beeld{display:block;width:100%;aspect-ratio:var(--w)/var(--h);overflow:hidden;border-radius:8px;background:var(--offwit);margin-bottom:12px}
.ex-kaart__beeld img,.ex-kaart__beeld video{display:block;width:100%;height:100%;object-fit:cover}
.ex-kaart__beeld--staand{width:min(240px,100%)}
.ex-kaart__live{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px;align-items:flex-end}

/* platformen: per platform wat we aanleveren en waar het schuurt */
.ex-platformen{display:grid;max-width:1180px}
.ex-platform{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.6fr);gap:10px clamp(24px,4vw,60px);padding:24px 0;border-top:1px solid var(--lijn);align-items:start}
.ex-platform:last-child{border-bottom:1px solid var(--lijn)}
.ex-platform__naam{display:flex;align-items:center;gap:12px;font-size:clamp(20px,1.5vw,26px);letter-spacing:calc(-.022em * var(--krap) + var(--lucht));line-height:1.15}
.ex-platform__logo{flex:none;width:28px;height:28px;display:grid;place-items:center}
.ex-platform__logo svg{width:28px;height:28px;display:block}
/* v14: een woordmerk (Adform) staat op de plek van beeldmerk en naam samen, ongeveer zo hoog als de letters van de naam;
   in licht in het donkerblauw van Adform, in donker in de kleur van de tekst */
.ex-platform__woordmerk{display:block;line-height:0}
.ex-platform__woordmerk svg{display:block;height:1.05em;width:auto;aspect-ratio:788.5/236.2;fill:#1A1649}
:root:is([data-modus="donker"],[data-scroll="donker"]) .ex-platform__woordmerk svg{fill:currentColor}
.ex-platform p{font-size:18px;line-height:1.45;color:var(--fg-2);max-width:58ch}
.ex-platform p+.aanleveren{margin-top:12px}
.ex-platform .aanleveren{max-width:52ch}

/* video's */
.ex-video{margin:0}
.ex-video video{display:block;width:100%;height:auto;aspect-ratio:var(--w)/var(--h);background:var(--inkt);border-radius:6px;object-fit:cover}
.ex-video figcaption{margin-top:12px;font-size:14px;line-height:1.4;color:var(--fg-2);max-width:70ch}
/* v14: in donker staat het bijschrift op de donkere pagina (het eiland .ex-video houdt het palet van licht) */
:root:is([data-modus="donker"],[data-scroll="donker"]) .ex-video figcaption{color:#B8B8B4}
.ex-video--breed{max-width:1280px}
.ex-video--staand{width:min(360px,100%)}

/* de cases op een oranje band */
.ex-cases .sk{margin-bottom:clamp(28px,3.4vw,52px)}

/* vragen: één groep, met wat er te lezen is */
.ex-vragen{border-top:1px solid var(--lijn)}
.ex-lees{margin-top:clamp(28px,3vw,48px)}
.ex-lees ul{display:grid;gap:16px;margin-top:14px}
.ex-lees li{display:grid;gap:4px;justify-items:start}
.ex-lees li .pijl-link{font-size:17px;line-height:1.3}
.ex-lees li>span{font-size:13px;color:var(--fg-3)}

/* ook in Wat we maken: de andere vier */
.ex-verder{padding:clamp(50px,7vw,100px) var(--rand) clamp(60px,8vw,120px)}
.ex-verder ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-top:22px}
.ex-verder a{position:relative;display:grid;gap:8px;align-content:start;height:100%;text-decoration:none;padding:18px 34px 0 0;border-top:2px solid var(--inkt)}
.ex-verder__naam{font-size:clamp(21px,1.7vw,30px);letter-spacing:calc(-.03em * var(--krap) + var(--lucht));line-height:1.05}
.ex-verder__tekst{font-size:15px;line-height:1.42;color:var(--fg-2)}
.ex-verder a .pijl{position:absolute;right:0;top:22px;width:18px;height:18px;transition:transform .3s var(--ease)}
.ex-verder a:hover .ex-verder__naam{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.ex-verder a:hover .pijl{transform:translateX(4px)}

/* chips met een radio erin (telefoon, DOOH) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips .chip{position:relative;cursor:pointer;color:var(--fg)}
.chips .chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chips .chip>span{font-size:inherit;color:inherit}
.chips .chip i{font-style:normal;font-size:.85em;color:var(--fg-3);margin-left:.3em;font-variant-numeric:tabular-nums}
.chips .chip:has(input:checked){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chips .chip:has(input:checked) i{color:inherit;opacity:.65}
.chips .chip:has(input:focus-visible){outline:2px solid var(--focus,var(--or));outline-offset:2px}
.tel__groep{border:0;margin:0;padding:0;min-width:0}
.tel__groep+.tel__groep{margin-top:26px}

/* ---------- display: de formatenkaart ---------- */
.kaart{--s:1}
.kaart__knoppen{display:flex;flex-wrap:wrap;gap:8px}
.kaart__knop{display:inline-block;height:42px;line-height:40px;padding:0 17px;border-radius:999px;border:1px solid var(--lijn-2);background:none;font-size:15px;color:var(--fg);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.kaart__knop b{font-weight:500}
.kaart__knop span{margin-left:.45em;font-size:.86em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.kaart__knop:hover{border-color:var(--fg)}
.kaart__knop[aria-pressed="true"]{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.kaart__knop[aria-pressed="true"] span{color:inherit;opacity:.75}
.kaart{position:relative}
.kaart__paneel{margin-top:10px}
.kaart__tekst{margin-top:20px;font-size:18px;line-height:1.45;color:var(--fg);min-height:1.45em;max-width:52ch}
.kaart__doek{position:relative;width:calc(970px * var(--s));height:calc(600px * var(--s) + 28px)}
.kaart__vlak{position:absolute;left:0;top:0;width:970px;height:600px;transform:scale(var(--s));transform-origin:0 0}
.kaart__f{position:absolute;left:0;top:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);box-shadow:inset 0 0 0 1px var(--lijn-2);transition:box-shadow .25s}
.kaart__f.is-licht{box-shadow:inset 0 0 0 1px var(--fg)}
.kaart__f.is-gekozen{z-index:5;box-shadow:0 0 0 2px var(--or)}
.kaart--solo .kaart__doek{width:calc(var(--dw) * var(--s) * 1px);height:calc(var(--dh) * var(--s) * 1px + 28px)}
.kaart--solo .kaart__vlak{width:calc(var(--dw) * 1px);height:calc(var(--dh) * 1px)}
.kaart--solo .kaart__f:not(.is-gekozen){display:none}
.kaart__in{position:absolute;inset:0;overflow:hidden}
.kaart__in img,.kaart__in iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.kaart__in iframe{color-scheme:light;opacity:0}
.kaart__in iframe.is-geladen{opacity:1}
.kaart__maat{position:absolute;right:0;top:100%;margin-top:8px;font-size:12px;line-height:1;color:var(--or-tekst);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transition:opacity .2s}
.kaart__f.is-gekozen .kaart__maat,.kaart__f.is-licht .kaart__maat{opacity:1}
.kaart__f.is-licht:not(.is-gekozen) .kaart__maat{color:var(--fg-2)}
.kaart__nu{margin-top:14px;font-size:14px;line-height:1.4;color:var(--fg-2);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.kaart__nu b{color:var(--fg);font-weight:500}
.kaart__nu .pijl-link{font-size:14px}

/* ---------- rich media: de takeover en speel ermee ---------- */
.ex-takeover .sk{margin-bottom:clamp(26px,3.4vw,52px)}
.ex-speel{border-top:1px solid var(--lijn)}
.ex-speel__wand{justify-content:flex-start;align-items:flex-start}
.ex-speel__paar{display:flex;flex-wrap:wrap;gap:var(--goot);align-items:flex-start}

/* ---------- dynamic creative: de feed ---------- */
.feed{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,72px);align-items:start}
.feed__tabel-houder{overflow-x:auto;-webkit-overflow-scrolling:touch}
.feed__tabel{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.feed__tabel th{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);text-align:left;font-weight:500;padding:0 14px 12px 0;border-bottom:1px solid var(--lijn-2);white-space:nowrap}
.feed__tabel td{padding:13px 14px 13px 0;border-bottom:1px solid var(--lijn);white-space:nowrap;color:var(--fg-2);transition:background .2s}
.feed__tabel td:first-child{padding-left:12px}
.feed__tabel th:first-child{padding-left:12px}
.feed__tabel tbody tr{cursor:pointer}
.feed__tabel tbody tr:hover td{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.feed__tabel tbody tr.is-gekozen td{background:color-mix(in srgb,var(--or) 13%,transparent);color:var(--fg)}
.feed__tabel tr.is-op td:not(.feed__voorraad){text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.feed__getal{text-align:right}
.feed__kies{position:relative}
.feed__kies input{position:absolute;opacity:0;width:1px;height:1px}
.feed__kies label{cursor:pointer;color:var(--fg);font-weight:500;display:inline-flex;align-items:center;gap:10px}
.feed__kies label::before{content:"";width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--lijn-2);flex:none;transition:box-shadow .2s,background .2s}
.feed__kies input:checked+label::before{background:var(--or);box-shadow:none}
.feed__kies input:focus-visible+label{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}
.feed__voorraad input{width:66px;height:34px;border:1px solid var(--lijn-2);border-radius:8px;background:var(--wit);padding:0 6px 0 10px;font:inherit;font-size:15px;color:var(--fg);font-variant-numeric:tabular-nums}
.feed__voorraad input:focus{outline:2px solid var(--or);outline-offset:1px}
.feed__regels-kop{margin-top:clamp(28px,3vw,44px)}
.feed__regels{margin-top:14px;display:grid;gap:10px;counter-reset:regel;max-width:56ch}
.feed__regels li{position:relative;padding-left:34px;font-size:16px;line-height:1.4;color:var(--fg-2);counter-increment:regel;transition:color .25s}
.feed__regels li::before{content:counter(regel);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--lijn-2);display:grid;place-items:center;font-size:12px;color:var(--fg-3);transition:background .25s,color .25s,box-shadow .25s}
.feed__regels li.is-actief{color:var(--fg)}
.feed__regels li.is-actief::before{background:var(--or);color:var(--inkt);box-shadow:none}
.feed__banners{display:flex;gap:24px;align-items:flex-start;justify-content:flex-start}
.feed__raam .raam__in iframe{opacity:1}

/* ---------- social: de telefoon ---------- */
.tel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center}
/* v14, 20 oktober: het toestel is de telefoon van de cases (.m-tel en .m-scherm in duo.css: 300 breed, de statusbalk en het
   eiland). Het beeld van 9:16 staat over de hele breedte midden in het scherm; de zones en de stroken liggen op dat beeld. */
.tel__scherm{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:9/16;overflow:hidden;background:#000;isolation:isolate}
.tel__scherm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tel__uit{position:absolute;left:0;right:0;height:0;z-index:3;background:rgba(17,17,16,.8);display:grid;place-items:center;overflow:hidden;transition:height .55s var(--ease)}
.tel__uit span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,245,.78)}
.tel__uit--boven{top:0}
.tel__uit--onder{bottom:0}
.tel[data-verhouding="45"] .tel__uit{height:14.84%}
.tel[data-verhouding="11"] .tel__uit{height:21.875%}
.tel__zone{position:absolute;inset:0;z-index:2;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.tel[data-zone="tiktok"] .tel__zone--tiktok,.tel[data-zone="reels"] .tel__zone--reels{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.tz{position:absolute;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,rgba(251,78,41,.62) 0 7px,rgba(251,78,41,.3) 7px 14px)}
.tz span{font-size:10.5px;line-height:1.15;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-align:center;padding:4px 6px;background:rgba(17,17,16,.55);border-radius:4px;max-width:90%}
/* v14: de zones zoals wij ze aanhouden, op 1080 x 1920 (dezelfde maten als de video's erachter, telmedia.py).
   TikTok: boven 150, onder 480, links 60 en rechts 140 pixels (de knoppen). Reels: boven 250 en onder 670; de knoppen van
   Instagram staan in die onderste strook. */
:is(.tel__zone--tiktok,.sv-zone--tiktok) .tz--boven{left:0;right:0;top:0;height:7.8125%}
:is(.tel__zone--tiktok,.sv-zone--tiktok) .tz--onder{left:0;right:0;bottom:0;height:25%}
/* de strook onderin TikTok is lager: het label bovenin, de regels van de tekst eronder */
:is(.tel__zone--tiktok,.sv-zone--tiktok) .tz--onder{align-items:flex-start;padding-top:14px}
:is(.tel__zone--tiktok,.sv-zone--tiktok) .tz--rechts{right:0;top:7.8125%;bottom:25%;width:12.963%}
:is(.tel__zone--tiktok,.sv-zone--tiktok) .tz--links{left:0;top:7.8125%;bottom:25%;width:5.556%}
:is(.tel__zone--reels,.sv-zone--reels) .tz--boven{left:0;right:0;top:0;height:13.021%}
:is(.tel__zone--reels,.sv-zone--reels) .tz--onder{left:0;right:0;bottom:0;height:34.896%}
/* het label van de knoppen staat rechtop bovenin de smalle strook, boven de knoppen */
.tz--rechts{align-items:flex-start;padding-top:10px}
.tz--rechts span{writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 4px;max-width:none;max-height:90%}
/* een paar neutrale vormen voor de knoppen en de tekst, geen echte interface */
.tz-ui{position:absolute;display:grid;gap:12px}
.tz-ui b{display:block;background:rgba(255,255,255,.85)}
:is(.tel__zone--tiktok,.sv-zone--tiktok) .tz-ui--knoppen{right:2.9%;top:47%;justify-items:center}
:is(.tel__zone--reels,.sv-zone--reels) .tz-ui--knoppen{right:4%;top:69%;justify-items:center}
.tz-ui--knoppen b{width:26px;height:26px;border-radius:50%}
:is(.tel__zone--tiktok,.sv-zone--tiktok) .tz-ui--tekst{left:5%;bottom:9%;width:55%}
:is(.tel__zone--reels,.sv-zone--reels) .tz-ui--tekst{left:5%;bottom:9%;width:55%}
.tz-ui--tekst{gap:7px}
.tz-ui--tekst b{height:7px;border-radius:4px}
.tz-ui--tekst b:first-child{width:45%;height:9px}
.tz-ui--tekst b:nth-child(2){width:95%}
.tz-ui--tekst b:nth-child(3){width:70%}
.tel__uitleg{margin-top:26px;font-size:18px;line-height:1.45;color:var(--fg-2);max-width:44ch;min-height:4.35em}
.tel__uitleg b{color:var(--fg);font-weight:500}

/* ---------- DOOH: het scherm weet waar het hangt (v14, 20 oktober) ----------
   Links de abri van Boonwerk: hij blijft staan terwijl je de keuzes en de regels doorloopt. Rechts waar hij hangt (met de
   plattegrond), hoe laat het is, het weer, wat hij koos en de regels. Is Boonwerk dicht, dan wordt het podium donker. */
.ctx{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:clamp(30px,5vw,96px);align-items:start}
.ctx__podium{position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 24px);display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(560px,52vw,760px);border-bottom:1px solid var(--lijn-2);border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(to top,color-mix(in srgb,var(--fg) 5%,transparent),transparent 55%);transition:background-color .6s var(--ease)}
.ctx.is-nacht .ctx__podium{background-color:#16110D}
.ctx.is-nacht .ctx__maat{color:rgba(241,230,216,.7)}
.ctx__maat{position:absolute;left:16px;top:14px;font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ctx__abri{position:relative;width:min(100%,360px);margin-bottom:64px;padding:9px;background:var(--inkt-vast);border-radius:6px;
  box-shadow:0 30px 60px -36px rgba(17,17,16,.6),inset 0 0 0 1px rgba(255,255,255,.07)}
.ctx__abri::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:64px;background:var(--inkt-vast);transform:translateX(-50%)}
.ctx__glas{position:relative;width:100%;overflow:hidden;background:#000}
.ctx__glas{aspect-ratio:9/16}
.ctx__glas iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;display:block;max-width:none;max-height:none}
.ctx__paneel{min-width:0}
/* de plattegrond */
.ctx__kaart{width:100%;height:auto;margin-top:14px;border-radius:var(--r);background:var(--vlak);box-shadow:inset 0 0 0 1px var(--lijn)}
.k-straat{stroke:color-mix(in srgb,var(--fg) 11%,transparent);stroke-width:6;stroke-linecap:round}
.k-ring{fill:none;stroke:color-mix(in srgb,var(--fg) 15%,transparent);stroke-width:9;stroke-linecap:round}
.k-water{fill:none;stroke:color-mix(in srgb,#5B9BD5 32%,var(--vlak));stroke-width:16}
.k-blok{fill:color-mix(in srgb,var(--fg) 20%,transparent)}
.k-plein{fill:color-mix(in srgb,var(--fg) 9%,transparent)}
.k-route{stroke:var(--or);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .3s}
.k-route.is-aan{opacity:1}
.k-route.is-ver{stroke:var(--fg-3);stroke-dasharray:2 8}
.k-winkel circle{fill:#C8742B}
.k-winkel ellipse{fill:#2A1A10}
.k-winkel.is-aan circle{stroke:var(--fg);stroke-width:2.5}
.k-winkel text,.k-abri text{font-family:var(--font);font-size:11px;fill:var(--fg-2)}
.k-abri{cursor:pointer}
.k-abri rect{fill:var(--fg-3);transition:fill .2s}
.k-abri text{text-anchor:middle}
.k-abri.is-aan rect{fill:var(--or)}
.k-abri.is-aan text{fill:var(--fg);font-weight:500}
/* de tijd en het weer */
.ctx__tijd{display:flex;align-items:center;gap:16px;margin-top:10px}
.ctx__klok{flex:none;min-width:3.1em;font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ctx__schuif{flex:1;min-width:0;accent-color:var(--or)}
.ctx__nu,.ctx__weg{flex:none;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--lijn-2);font-size:14px;transition:background .2s,color .2s,border-color .2s}
.ctx__nu:hover,.ctx__weg:hover{border-color:var(--fg)}
.chips .chip:has(input:disabled){opacity:.45;cursor:not-allowed}
.chips .chip input:disabled{cursor:not-allowed}
.ctx__live{margin-top:10px;font-size:14px;line-height:1.4;color:var(--fg-3)}
.ctx__uitleg{min-height:6.8em}
.ctx .feed__regels-kop{margin-top:clamp(28px,3vw,44px)}
.ctx .feed__regels{max-width:none;margin-top:14px}
.ctx__weg{margin-top:22px}
.ctx__weg[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* de Haastmakers als bewijs */
.ex-bewijs{align-items:center}
.ex-bewijs .lopend{margin-top:clamp(22px,3vw,36px)}

/* ---------- DOOH, v16 (3 november): de abri met ons werk ----------
   Het decor zelf (de foto, het scherm, de video en de uitingen eronder) staat in decor.css; hier alleen de lijn naar
   Boonwerk eronder. */
.ex-abri+.ex-hoofd{border-top:1px solid var(--lijn)}

/* ---------- smaller ---------- */
/* breed genoeg: de knoppen staan in de lege hoek van de kaart, rechts onder de billboard */
@media (min-width:1180px){
  .kaart__paneel{position:absolute;left:380px;top:300px;width:590px;margin:0}
}
@media (max-width:1100px){
  .feed{grid-template-columns:minmax(0,1fr)}
  .ctx{grid-template-columns:minmax(0,1fr) minmax(300px,400px)}
  .ex-kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-kaarten--media{grid-template-rows:none;row-gap:clamp(34px,4vw,60px)}
  .ex-kaarten--media .ex-kaart{grid-row:auto;grid-template-rows:none;gap:8px}
  .ex-kaarten--media .ex-kaart>*{margin-top:0}
  .ex-verder ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ex-kop{grid-template-columns:minmax(0,1fr)}
  .ex-kop__rechts{margin-top:clamp(22px,4vw,36px)}
  .ex-twee{grid-template-columns:minmax(0,1fr)}
  .ex-twee__links{display:contents}
  .ex-twee__links .ex-video{order:2;margin-top:0}
  .tel{grid-template-columns:minmax(0,1fr)}
  .tel__toestel{justify-self:center}
  .ctx{grid-template-columns:minmax(0,1fr)}
  .ctx__podium{position:relative;top:auto;min-height:0;padding-top:44px}
  .ctx__abri{width:min(76vw,340px)}
}
@media (max-width:700px){
  .ex-speel__paar{display:contents}
  .ex-platform{grid-template-columns:minmax(0,1fr)}
  .ex-kaarten{grid-template-columns:minmax(0,1fr)}
  .ex-verder ul{grid-template-columns:minmax(0,1fr)}
  /* 10 november (mobiel, ronde 1): minder tekst; Ook in Wat we maken met alleen de namen (de uitleg staat op de home) */
  .ex-verder__tekst{display:none}
  .ex-verder a{padding-bottom:4px}
  .feed__banners{flex-wrap:wrap}
  /* de tabel compacter; de banners direct onder de tabel, dan zie je wat een rij doet */
  .feed__links{display:contents}
  .feed__tabel-houder{order:0;margin:0 calc(-1 * var(--rand));padding:0 var(--rand)}
  .feed__veeg{order:1;margin-top:-14px}
  .feed__banners{order:2}
  .feed__regels-kop{order:3;margin-top:0}
  .feed__regels{order:4;margin-top:-14px}
  .feed__tabel{font-size:15px}
  .feed__tabel td{padding:11px 10px 11px 0}
  .feed__tabel th{padding-right:10px}
  .feed__voorraad input{width:56px}
  .kaart__tekst{font-size:16px}
}
.rustig .tel__uit,.rustig .tel__zone,.rustig .kaart__f,.rustig .k-route,.rustig .ctx__podium{transition:none}

/* ---------- social, v16 (2 november): de kop en de feed uit social-video-preview ----------
   De kop is die van de andere vakken, met eronder hoe je kijkt en de filmstrook over de hele breedte. De feed: links de
   telefoon van de cases (.m-tel in duo.css, met de stramienen van de cases), die blijft staan terwijl je langs de tien
   campagnes scrolt; op een telefoon staat hij boven en veeg je door de campagnes. Oranje alleen als lijn: het balkje van
   de eerste seconde en de streep boven de campagne die speelt. */
.ex-kop--sv .ex-kop__h1{max-width:12ch}
.ex-kop__noot{grid-column:2;margin-top:clamp(26px,3vw,40px);padding-top:14px;border-top:1px solid var(--fg);max-width:46ch;font-size:15px;line-height:1.45;color:var(--fg-2)}
.ex-kop__noot b{color:var(--fg);font-weight:500}
/* de strook: twee keer dezelfde rij; hij schuift precies één rij op (de helft min een halve tussenruimte) en begint opnieuw */
.sv-strook{grid-column:1/-1;margin:clamp(36px,5vw,72px) calc(-1 * var(--rand)) 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sv-strook__baan{display:flex;gap:10px;width:max-content;animation:sv-strook 90s linear infinite}
.sv-strook:hover .sv-strook__baan,.sv-strook.is-stil .sv-strook__baan{animation-play-state:paused}
.sv-strook img{flex:none;width:auto;height:clamp(120px,14vw,200px);border-radius:6px;background:var(--offwit)}
@keyframes sv-strook{to{transform:translateX(calc(-50% - 5px))}}
.sv-strook__onder{grid-column:1/-1;display:flex;align-items:center;gap:12px 20px;margin-top:12px;font-size:13px;line-height:1.4;color:var(--fg-3)}
.sv-strook__onder p{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px}
.sv-strook__knop{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--lijn-2);border-radius:50%;color:var(--fg);transition:border-color .2s}
.sv-strook__knop:hover{border-color:var(--fg)}
.sv-strook__knop svg{width:12px;height:12px}
.sv-strook__knop svg+svg,.sv-strook.is-stil~.sv-strook__onder .sv-strook__knop svg:first-child{display:none}
.sv-strook.is-stil~.sv-strook__onder .sv-strook__knop svg+svg{display:block}
.rustig .sv-strook__baan{animation:none}
.rustig .sv-strook__knop{display:none}
@media (prefers-reduced-motion:reduce){.sv-strook__baan{animation:none}.sv-strook__knop{display:none}}

/* de feed: de telefoon blijft staan terwijl de campagnes langsschuiven. Hij is zo groot als het venster toelaat: --z, de
   zoom van het toestel, de kleinste van wat de hoogte (--zh) en de breedte (--zb) toelaten. Het balkje staat onder de
   telefoon, de keuzes ernaast */
.ex-sv .sk{margin-bottom:clamp(32px,4vw,64px)}
.sv{--zh:1;--zb:1;--z:min(var(--zh),var(--zb));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,100px);align-items:start}
.sv__podium{position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 16px);display:grid;grid-template-columns:auto auto;grid-template-areas:"tel bed" "onder bed";
  gap:12px 28px;align-items:end;justify-content:center}
.sv__toestel{grid-area:tel;zoom:var(--z)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .sv__toestel{--inkt:#1D1D1B}
.sv__onder{grid-area:onder;display:grid;gap:8px;width:calc(300px * var(--z));max-width:100%}
.sv__seconde{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label teller" "balk balk";align-items:baseline;gap:8px 10px}
.sv__seconde .label{grid-area:label}
.sv__seconde i{grid-area:balk;display:block;height:3px;overflow:hidden;border-radius:2px;background:var(--lijn-2)}
.sv__seconde b{display:block;height:100%;background:var(--or);transform:scaleX(0);transform-origin:0 50%}
.sv__teller{grid-area:teller;min-width:3.4em;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--fg)}
.sv__nu{min-height:2.8em;font-size:14px;line-height:1.4;color:var(--fg-2)}
.sv__nu b{color:var(--fg);font-weight:500}
.sv__nu span{white-space:nowrap}
.sv__bediening{grid-area:bed;align-self:end;display:flex;flex-direction:column;gap:22px;width:200px;padding-bottom:calc(2.8em + 8px)}
.sv__bediening .tel__groep+.tel__groep{margin-top:0}
.sv__bediening .chips{margin-top:8px}
.sv__bediening .chip{min-height:36px;padding:0 14px;font-size:14px}

/* het scherm: het beeld schuift naar de plek van het stramien (9:16 onder de kop van Reels, 1:1 in de feed, 16:9 bovenin
   de speler); wat bij een stramien hoort, komt erbij */
.sv__scherm{transition:background-color .5s var(--ease),color .5s var(--ease)}
.sv__beeld{position:absolute;left:0;right:0;top:84px;height:497.8px;overflow:hidden;z-index:1;background:#000;transition:top .7s var(--ease),height .7s var(--ease)}
.sv__scherm[data-v="11"] .sv__beeld{top:130px;height:280px}
.sv__scherm[data-v="169"] .sv__beeld{top:40px;height:157.5px}
.sv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.sv__video.is-aan{opacity:1}
.sv [data-sv-alleen]{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.sv__scherm[data-v="916"] [data-sv-alleen~="916"],.sv__scherm[data-v="11"] [data-sv-alleen~="11"],.sv__scherm[data-v="169"] [data-sv-alleen~="169"]{opacity:1;visibility:visible;transition:opacity .35s .2s,visibility 0s}
.sv__chrome{position:absolute;inset:0;z-index:3;pointer-events:none}
.sv__chrome--916{color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.22) 0,transparent 16%,transparent 62%,rgba(0,0,0,.55) 100%)}
.sv__chrome--916 .m-rail{bottom:70px}
.sv__chrome--916 .m-meta{bottom:10px}
.sv__chrome--916 .m-meta__wie b{font-weight:600}
.sv__av{font-size:11px;font-weight:700;line-height:1;color:#111}
.sv__pkop{position:absolute;top:84px;left:0;right:0}
/* de zones: die van In de telefoon; aan, dan maken ze de plek van het stramien */
.sv[data-zone="tiktok"] .sv__scherm[data-v="916"] .sv-zone--tiktok,.sv[data-zone="reels"] .sv__scherm[data-v="916"] .sv-zone--reels{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.sv:not([data-zone="uit"]) .sv__scherm .sv__chrome--916{opacity:0;visibility:hidden}
/* de speler: de advertentie, overslaan na vijf seconden, de gele balk */
.sv__chrome--169 .m-adtag{left:8px;bottom:9px;gap:6px;font-size:10px}
.sv__chrome--169 .m-adtag i{padding:2px 4px;font-size:9px}
.sv [data-sv-domein]:not(:empty)::before{content:"· "}
.sv__chrome--169 .m-skip{bottom:18px;gap:6px;padding:6px 9px 6px 11px;font-size:10.5px}
.sv__chrome--169 .m-skip svg{width:9px;height:9px}
.sv__chrome--169 .m-adbalk{height:3px}
.sv__yt{position:absolute;left:0;right:0;top:197.5px;padding:12px 12px 0;color:#0f0f0f}
.sv__yt-titel{font-size:15px;line-height:1.3;font-weight:600}
.sv__kanaal{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;line-height:1.25;color:#555}
.sv__kanaal .m-kanaal__av{flex:none;width:30px;height:30px}
.sv__kanaal b{display:block;font-weight:600;color:#111}
.sv__kanaal small{font-size:11px;color:#666}
.sv__kanaal .m-kanaal__abo{margin-left:auto;padding:6px 12px;font-size:12px}
.sv__volgende{display:grid;gap:10px;margin-top:14px}
.sv__volgend{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:start}
.sv__volgend .m-img{height:68px;border-radius:8px}
.sv__volgend b{display:block;font-size:12.5px;line-height:1.3;font-weight:600;color:#111}
.sv__volgend span{font-size:11px;color:#666}
.sv__post{position:absolute;left:0;right:0;top:410px;color:#111}
.sv__ftab{z-index:5}
/* geluid en pauze: de ronde knop van de cases, waar hij het beeld niet afdekt: bij Reels in de kopbalk (links van de
   camera), in de feed in de kop van het bericht (links van de puntjes), in de speler linksboven (rechtsboven staat vaak
   het logo, zoals bij Dekamarkt) */
.sv__knop{top:42px;transition:top .7s var(--ease)}
.sv__knop--geluid{right:50px}
.sv__knop--pauze{right:86px}
.sv__scherm[data-v="11"] .sv__knop{top:92px}
.sv__scherm[data-v="11"] .sv__knop--geluid{right:42px}
.sv__scherm[data-v="11"] .sv__knop--pauze{right:78px}
.sv__scherm[data-v="169"] .sv__knop{top:50px}
.sv__scherm[data-v="169"] .sv__knop--pauze{right:auto;left:10px}
.sv__scherm[data-v="169"] .sv__knop--geluid{right:auto;left:46px}

/* de campagnes: wat speelt, staat in de kleur van de tekst, met de oranje streep erboven; de rest een tint lichter */
.sv__rij{min-width:0}
.sv__lijst{display:grid}
.sv-item{position:relative;display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:clamp(10px,1.4vw,22px);align-content:center;
  min-height:max(52svh,380px);padding:clamp(30px,3.6vw,56px) 0;border-top:1px solid var(--lijn);color:var(--fg-3);cursor:pointer;transition:color .5s var(--ease)}
.sv-item:last-child{border-bottom:1px solid var(--lijn)}
.sv-item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.sv-item:hover{color:var(--fg-2)}
.sv-item.is-actief{color:var(--fg)}
.sv-item.is-actief::before{transform:none}
.sv-item>:not(.sv-item__nr){grid-column:2}
.sv-item__nr{grid-row:1;padding-top:.3em;font-size:13px;font-variant-numeric:tabular-nums}
.sv-item__knop{display:grid;gap:12px;width:100%;text-align:left;color:inherit}
.sv-item__wie{color:inherit}
.sv-item__titel{display:block;font-size:clamp(28px,2.6vw,48px);line-height:1;font-weight:500;letter-spacing:calc(-.035em * var(--krap) + var(--lucht));text-wrap:balance}
.sv-item__tekst{max-width:42ch;margin-top:16px;font-size:18px;line-height:1.45}
.sv-item.is-actief .sv-item__tekst{color:var(--fg-2)}
.sv-item__feiten{display:grid;gap:6px;max-width:46ch;margin-top:18px;padding-top:12px;border-top:1px solid var(--lijn);font-size:15px;line-height:1.4}
.sv-item__feiten div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:14px}
.sv-item__feiten dt{color:var(--fg-3)}
.sv-item__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.sv-item__tags li{padding:5px 9px;border:1px solid var(--lijn-2);border-radius:999px;font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--fg-3)}
.sv__veeg{display:none}
.rustig .sv-item,.rustig .sv-item::before,.rustig .sv__knop,.rustig .sv__beeld,.rustig .sv__video,.rustig .sv [data-sv-alleen]{transition:none}

/* zo hoog als het venster: de telefoon zakt in stappen, zodat hij met het balkje eronder in beeld blijft; en smaller dan
   1180 is er naast hem minder plek voor de keuzes */
@media (min-width:901px) and (max-height:886px){.sv{--zh:.92}}
@media (min-width:901px) and (max-height:834px){.sv{--zh:.84}}
@media (min-width:901px) and (max-height:782px){.sv{--zh:.76}}
@media (min-width:901px) and (max-height:730px){.sv{--zh:.68}}
@media (min-width:901px) and (max-height:678px){.sv__podium{position:relative;top:auto}}
@media (min-width:901px) and (max-width:1279px){.sv{--zb:.9}}
@media (min-width:901px) and (max-width:1099px){.sv{--zb:.76}}

/* een telefoon: het toestel boven, daaronder het balkje, dan de campagnes als veegrij (zoals de wand) en de keuzes */
@media (max-width:900px){
  .ex-kop__noot{grid-column:1}
  .sv{--zh:.8;--zb:.8;display:flex;flex-direction:column;align-items:stretch}
  .sv__podium{display:contents}
  .sv__toestel{order:1;align-self:center}
  .sv__onder{order:2;align-self:center;margin-top:14px}
  .sv__nu{text-align:center}
  .sv__rij{order:3;margin-top:16px}
  .sv__bediening{order:4;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:14px 28px;width:auto;margin-top:24px;padding-bottom:0}
  .sv__lijst{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--rand));padding:2px var(--rand) 6px;scroll-padding:0 var(--rand)}
  .sv__lijst::-webkit-scrollbar{display:none}
  .sv-item{flex:0 0 min(84%,380px);grid-template-columns:2.2em minmax(0,1fr);align-content:start;min-height:0;padding:18px 0 4px;scroll-snap-align:start}
  .sv-item:last-child{border-bottom:0}
  .sv-item__titel{font-size:clamp(24px,6.6vw,30px)}
  .sv-item__tekst{margin-top:12px;font-size:16px}
  .sv-item__feiten{margin-top:14px;font-size:14px}
  .sv-item__feiten div{grid-template-columns:6.5em minmax(0,1fr)}
  .sv__veeg{display:flex;margin-top:8px}
}
@media (max-width:380px){.sv{--zh:.72;--zb:.72}}

/* v16, 7 november: de sneakertemplate (dynamic creative, b_expertise.sjabloon). Links de banner van 336 x 280, rechts de
   sheet zoals in Excel: kolomletters, rijnummers, een formulebalk; de gekozen rij oranje, de cel waarin je typt met een rand */
.sj{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,3.6vw,56px);align-items:start}
.sj__raam{margin:0}
.sj__poster{transition:opacity .3s}
.sj__raam.is-live .sj__poster{opacity:0}
.sj__sheet{min-width:0;border:1px solid var(--lijn-2);border-radius:12px;overflow:hidden;background:var(--bg);font-size:14px}
.sj__balk{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--lijn);color:var(--fg-2);font-size:13px}
.sj__balk::before{content:"";flex:none;width:12px;height:14px;border-radius:2px;background:linear-gradient(var(--bg),var(--bg)) 3px 4px/6px 1px no-repeat,linear-gradient(var(--bg),var(--bg)) 3px 7px/6px 1px no-repeat,linear-gradient(var(--bg),var(--bg)) 3px 10px/4px 1px no-repeat,var(--or)}
.sj__fx{display:flex;align-items:center;gap:12px;min-height:40px;padding:6px 14px;border-bottom:1px solid var(--lijn)}
.sj__adres{flex:none;min-width:46px;padding:3px 8px;border:1px solid var(--lijn-2);border-radius:6px;color:var(--fg-2);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.sj__fx i{flex:none;color:var(--fg-3);font:italic 15px/1 Georgia,"Times New Roman",serif}
.sj__fx-waarde{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--fg)}
.sj__houder{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;background:linear-gradient(to right,var(--bg) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(to left,var(--bg) 30%,transparent) right/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.16),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.16),transparent) right/12px 100% no-repeat scroll}
.sj__tabel{width:100%;min-width:868px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sj__tabel th,.sj__tabel td{height:46px;padding:0 10px;border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);text-align:left;white-space:nowrap;font-weight:400;color:var(--fg-2);transition:background-color .15s}
.sj__tabel tr > :last-child{border-right:0}
.sj__tabel tbody tr:last-child > *{border-bottom:0}
.sj__letters td{height:24px;padding:0;text-align:center;font-size:11px;color:var(--fg-3);background:color-mix(in srgb,var(--fg) 4%,transparent)}
.sj__tabel thead th{height:34px;font-size:12px;letter-spacing:.04em;color:var(--fg);font-weight:500;background:color-mix(in srgb,var(--fg) 2.5%,transparent)}
.sj__tabel thead small{font-size:11px;color:var(--fg-3);letter-spacing:0}
.sj__nr{width:42px;padding:0!important;text-align:center!important;font-size:12px;color:var(--fg-3)!important;background:color-mix(in srgb,var(--fg) 4%,transparent);position:relative}
.sj__nr input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sj__nr label{display:block;line-height:46px;cursor:pointer}
.sj__nr:focus-within{outline:2px solid var(--focus);outline-offset:-2px}
.sj__tabel tbody tr{cursor:pointer}
.sj__tabel tbody tr:hover > td,.sj__tabel tbody tr.is-voorbeeld > td{background:color-mix(in srgb,var(--fg) 4.5%,transparent)}
.sj__tabel tbody tr.is-gekozen > td{background:color-mix(in srgb,var(--or) 11%,transparent);color:var(--fg)}
.sj__tabel tbody tr.is-gekozen > .sj__nr{background:var(--or);color:#1D1D1B!important}
.sj__schoen img{display:inline-block;width:44px;max-width:none;height:24px;object-fit:contain;vertical-align:middle;margin-right:10px}
.sj__schoen span{vertical-align:middle;color:var(--fg)}
.sj__prijs,.sj__sub{position:relative;cursor:text}
.sj__prijs{width:104px}
.sj__euro{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg-3)}
.sj__tabel input[type="text"]{display:block;width:100%;height:44px;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums}
.sj__prijs input{padding-left:14px!important;text-align:right}
.sj__sub{width:268px}
.sj__sub input{padding-right:48px!important}
.sj__teller{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--fg-3);pointer-events:none}
.sj__teller.is-vol{color:var(--or-tekst)}
.sj__prijs:focus-within,.sj__sub:focus-within{box-shadow:inset 0 0 0 2px var(--or);background:var(--bg)!important}
.sj__prijs.is-fout{box-shadow:inset 0 0 0 2px #D93025}
.sj__prijs.is-fout input{color:#D93025}
.sj__legal span{display:block;max-width:196px;overflow:hidden;text-overflow:ellipsis}
.sj__kleur i{display:inline-block;width:13px;height:13px;margin-right:4px;border-radius:3px;background:var(--k);vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sj__kleur code{margin-left:3px;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg-2)}
.sj__regels{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:12px 14px;border-top:1px solid var(--lijn);list-style:none;font-size:13px;line-height:1.4;color:var(--fg-2)}
.sj__regels li{position:relative;padding-left:14px}
.sj__regels li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--or)}
.sj__veeg{display:none}
@media (max-width:1100px){
  .sj{grid-template-columns:minmax(0,1fr)}
  .sj__veeg{display:flex;order:3;margin-top:-14px}
}
@media (max-width:700px){
  .sj__sheet{margin:0 calc(-1 * var(--rand));border-radius:0;border-left:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){.sj__poster,.sj__tabel th,.sj__tabel td{transition:none}}