/* ==========================================================================
   BannerBazen · v9 · rich media (/expertise/rich-media/)
   De pagina is zelf de demonstratie. Hij opent in een takeover (APTO): header,
   skins en een rectangle uit één campagne. Daarna een interscroller in een iPad,
   twee SwipeCubes, de takeovers die live staan en een lege takeover als slot.
   Eén scrollvoortgang in rich.js; vastzetten en loslaten doet de browser (sticky).
   ========================================================================== */

/* ---------- maten --------------------------------------------------------
   --apto-zij   breedte van een skin. Het procent is de breedte van wat hem gebruikt
                (de pagina, of het scherm voor de kop), dus zonder schuifbalk.
   --apto-kop   hoogte van de header: 250 op desktop, kleiner als het scherm smaller is.
   --apto-plak  hoe lang de skins blijven staan: de scrollafstand na de header.
                Staat op de sectie (teksten.py, RICH apto plak); hier kan hij ook. */
.pagina-rich{--apto-zij:max(190px,calc((100% - 960px) / 2));--apto-kop:250px;--kolom-pad:clamp(26px,3.4vw,56px)}
@media (max-width:1179px){.pagina-rich{--apto-zij:clamp(16px,3vw,32px);--apto-kop:calc(min(970px,100vw - 2 * clamp(16px,3vw,32px)) * 250 / 970)}}
@media (max-width:759px){.pagina-rich{--apto-zij:10px;--apto-kop:min(75vw,360px);--kolom-pad:18px}}

/* ---------- de kop van de site: gewoon bovenaan --------------------------
   Logo en menu staan bovenaan, zoals op elke pagina. De takeover begint eronder: --apto-top is de
   hoogte van de kop met de tijdlijn (124 px, op een telefoon 100). */
.pagina-rich{--apto-top:calc(var(--kop-h) + var(--tl-h))}

/* ---------- 1  de takeover ------------------------------------------------ */
.apto{position:relative;isolation:isolate;padding:0!important;display:flow-root;margin-top:var(--apto-top)}
.apto__wand{position:absolute;left:0;right:0;top:0;height:calc(var(--apto-kop) + 100lvh + var(--apto-plak,100lvh));pointer-events:none;z-index:0}
.apto__vast{position:sticky;top:calc(var(--apto-kop) * -1);height:calc(var(--apto-kop) + 100lvh);overflow:hidden;container-type:inline-size}
.apto__kop,.apto__skin{pointer-events:auto}
.apto__einde{position:absolute;left:0;bottom:0;width:1px;height:1px}
.apto__kolom{position:relative;z-index:2;width:calc(100% - 2 * var(--apto-zij));margin:var(--apto-kop) auto 0;min-height:calc(100lvh + var(--apto-plak,100lvh));
  background:var(--papier);padding:clamp(40px,6.5vh,84px) var(--kolom-pad) clamp(70px,10vh,130px)}

/* de gloed: de 'Glows' van Odido, één veld achter header en skins, zodat ze naadloos aansluiten */
.gloed{position:absolute;inset:0;overflow:hidden;background:rgb(171 199 255);contain:strict}
.gloed__b{position:absolute;left:var(--x);top:var(--y);width:var(--bw);height:var(--bh);border-radius:50%;
  background:radial-gradient(closest-side,rgb(var(--c)) 34%,rgb(var(--c) / 0));transform:translate(-50%,-50%);
  animation:gloed var(--t) var(--d) ease-in-out infinite alternate;will-change:transform}
.gloed__b--paars{--c:141 133 255}.gloed__b--oranje{--c:255 145 77}.gloed__b--blauw{--c:86 142 255}
@keyframes gloed{from{transform:translate(-50%,-50%) translate3d(-7%,-5%,0) scale(1)}to{transform:translate(-50%,-50%) translate3d(7%,6%,0) scale(1.14)}}
.apto:not(.is-zicht) .gloed__b,.is:not(.is-zicht) .gloed__b{animation-play-state:paused}
.rustig .gloed__b{animation:none}

/* de header: een band over de volle breedte, de uiting in het midden op ware grootte */
.apto__kop{position:absolute;left:0;right:0;top:0;height:var(--apto-kop);z-index:1;display:grid;place-items:center;overflow:hidden}
.apto__bb{display:contents}
.bb{position:relative;container-type:inline-size;user-select:none;-webkit-user-select:none}
.bb--breed{width:calc(var(--apto-kop) * 970 / 250);aspect-ratio:970/250}
.bb--smal{display:none;width:calc(var(--apto-kop) * 320 / 240);aspect-ratio:320/240;overflow:hidden}
@media (max-width:759px){.bb--breed{display:none}.bb--smal{display:block}}
.laag{position:absolute;display:block}
.laag picture{display:block}
.laag img{display:block;width:100%;height:auto;max-width:none;pointer-events:none}
.laag>svg{display:block;width:100%;height:100%}
.masker{overflow:hidden}
.odido{fill:#000;overflow:visible}
.odido-cta .cta__pil{fill:#000}

/* voor de animatie: wat binnenkomt, staat eerst klaar (rich.js speelt het af; het vangnet toont alles) */
.js:not(.rustig):not(.vangnet) .apto:not(.is-gespeeld) :is(.bb-ding,.bb-sticker,.bb-sticker-t,.bb-cta,.skn-toestel,.skn-plus,.skn-tv,.skn-sticker,.skn-sticker-t,.skn-label,.skn-cta,.skn-merk,.bb-merk){opacity:0}
.js:not(.rustig):not(.vangnet) .apto:not(.is-gespeeld) .masker img{transform:translateY(110%)}
.bb-kop img{transform:translateY(110%)}
.bb--smal .bb-sub img{transform:none}

/* de i van de uiting: de voorwaarden achter een knop */
.bb-info{position:absolute;right:.45cqw;bottom:.45cqw;width:max(16px,1.65cqw);height:max(16px,1.65cqw);border-radius:50%;background:#fff;color:#000;
  font:italic 700 max(11px,1.15cqw)/1 Georgia,serif;display:grid;place-items:center;z-index:3}
.bb-info::after{content:"";position:absolute;inset:-8px}
.bb--smal .bb-info{right:3cqw;bottom:auto;top:3cqw;width:max(18px,5cqw);height:max(18px,5cqw);font-size:max(12px,3.4cqw)}
.bb-info:focus-visible{outline:2px solid #000;outline-offset:2px}
.bb-voorwaarden{position:absolute;inset:0;z-index:4;background:rgba(17,17,16,.9);color:#fff;display:grid;align-content:center;padding:0 9cqw 0 4cqw;font:400 max(11px,1.25cqw)/1.45 Arial,sans-serif}
.bb--smal .bb-voorwaarden{font-size:max(11px,3.6cqw);padding:0 12cqw 0 6cqw}
.bb-voorwaarden[hidden]{display:none}
.bb-sluit{position:absolute;right:1.2cqw;top:50%;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;color:#fff;border-radius:50%}
.bb-sluit .plus{width:16px;height:16px;transform:rotate(45deg)}
.bb-sluit:focus-visible{outline:2px solid #fff}

/* de skins: in de goot naast de kolom, het kopieblok in het midden van wat je ziet */
.apto__skin{position:absolute;top:var(--apto-kop);height:100lvh;width:var(--apto-zij);z-index:1;display:grid;place-items:center}
.apto__skin--l{left:0}.apto__skin--r{right:0}
.skn{--skw:min(300px,calc(max(190px,(100cqw - 960px) / 2) * .86),calc((100lvh - 190px) / 1.8));width:var(--skw);container-type:inline-size;
  translate:0 calc((var(--apto-kop) + var(--apto-top)) * -.5 * (1 - var(--hp,0)))}
/* het kopieblok staat in het midden van wat je van de skin ziet: onder de kop en de header, en als de skins
   vaststaan in het midden van het scherm */
@keyframes rich-skn{from{translate:0 calc((var(--apto-kop) + var(--apto-top)) * -.5)}to{translate:0 0}}
@supports (animation-timeline:scroll()){.skn{translate:none;animation:rich-skn linear both;animation-timeline:scroll(root block);animation-range:0px calc(var(--apto-kop) + var(--apto-top))}}
.skn__blok{position:relative;width:100%;aspect-ratio:300/540}
.skn-toestel{perspective:900px}
.skn-toestel__in,.is-c__toestel .skn-toestel__in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--ry,0deg))}
.skn-toestel__in img{position:absolute;left:0;top:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.skn-toestel__achter{transform:rotateY(180deg)}
/* v16, 5 november (Frank: "het toestel in de linkerskin is te plat; wij zetten altijd verschillende images achter elkaar met
   verschillende z-index, waardoor het toestel dikker lijkt"): zoals phone.js in de uiting (nLayers 8, zOffset .9). Tussen
   voor- en achterkant staat acht keer het silhouet in de kleur van het frame (b_rich.toestel_in), elk een fractie verder naar
   achteren: samen 6,3% van de breedte, zoals in de linkerskin (9 px op een toestel van 144). De maat komt uit het toestel zelf
   (cqw). De voorkant (met de zijkant) en de achterkant staan elk in hun eigen vlak (zij), en een picture om een beeld geeft
   de diepte door (anders legt hij het plat in zijn eigen vlak). */
.skn-toestel,.is-c__toestel{container-type:size}
.skn-toestel__in{--dik:6.3cqw}
.skn-toestel__zij,.skn-toestel__in picture{position:absolute;inset:0;transform-style:preserve-3d}
.skn-toestel__in .skn-toestel__voor{transform:translateZ(calc(var(--dik) / 2))}
.skn-toestel__in .skn-toestel__achter{transform:rotateY(180deg) translateZ(calc(var(--dik) / 2))}
.skn-toestel__in .skn-toestel__kant{backface-visibility:visible;-webkit-backface-visibility:visible;transform:translateZ(calc(var(--dik) * (.5 - (var(--k) + 1) / 9)))}
.skn-merk{position:absolute;left:50%;width:min(112px,calc(max(190px,(100cqw - 960px) / 2) * .42));translate:-50% 0}
.skn-merk svg{display:block;width:100%;height:auto;fill:#000}
.skn-merk--onder{bottom:5.5lvh}
.skn-merk--boven{top:5lvh}
.apto__skin:hover .skn-cta svg{transform:scale(1.04)}
.skn-cta svg,.bb-cta svg{transition:transform .5s var(--expo,cubic-bezier(.16,1,.3,1))}
@media (max-width:1179px){.apto__skin .skn,.skn-merk{display:none}}

/* de kolom: de pagina van de publisher, met onze tekst */
.apto__intro .kruimel{margin-bottom:clamp(16px,2vh,26px)}
.apto__h1{font-size:clamp(46px,6.4vw,112px)}
.apto__lead{margin-top:clamp(18px,2.4vh,30px);max-width:34ch;font-size:clamp(20px,1.65vw,28px);line-height:1.28;letter-spacing:calc(-.015em * var(--krap) + var(--lucht));color:var(--fg-2)}
.apto__intro .knoppen{margin-top:clamp(22px,3vh,38px)}
/* v16, 5 november (Frank: "het weboramalogo moet op de helft van de button en het streepje"): het keurmerk staat halverwege
   de knoppen en de lijn boven Wat je nu ziet, met evenveel ruimte erboven als eronder */
.apto__kolom{--keur-ruimte:clamp(40px,7vh,84px)}
.apto__intro>.apto__keur{margin-top:var(--keur-ruimte)}
.apto__intro:has(>.apto__keur)+.apto__uitleg{margin-top:var(--keur-ruimte)}
.apto__uitleg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,3.6vw,64px);align-items:start;margin-top:clamp(64px,10vh,128px);padding-top:clamp(30px,4vh,48px);border-top:1px solid var(--lijn)}
.apto__wat .titel--m{font-size:clamp(32px,3.4vw,58px);max-width:14ch}
.apto__tekst{margin-top:18px;max-width:46ch;font-size:clamp(17px,1.2vw,20px);line-height:1.45;color:var(--fg-2)}
.delen{margin-top:clamp(22px,3vh,34px);display:grid;border-top:1px solid var(--lijn)}
.delen li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;padding:14px 0 15px;border-bottom:1px solid var(--lijn)}
.deel__nr{font-size:13px;color:var(--or-tekst);font-variant-numeric:tabular-nums;padding-top:4px}
.deel__naam{font-size:19px;line-height:1.2;letter-spacing:calc(-.01em * var(--krap) + var(--lucht))}
.deel__naam span{color:var(--fg-3);font-size:15px;margin-left:6px;white-space:nowrap}
.delen p{margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--fg-2);max-width:48ch}
.knop-uitleg{margin-top:clamp(20px,2.6vh,30px);display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 18px 0 12px;border-radius:999px;border:1px solid var(--lijn-2);font-size:15px;transition:background .2s,color .2s,border-color .2s}
.knop-uitleg:hover{border-color:var(--fg)}
.knop-uitleg[aria-pressed="true"]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.knop-uitleg__vak{position:relative;width:26px;height:18px;border:1.5px dashed currentColor;border-radius:3px}
.knop-uitleg__vak i{position:absolute;background:currentColor;opacity:.55}
.knop-uitleg__vak i:nth-child(1){left:2px;right:2px;top:2px;height:3px}
.knop-uitleg__vak i:nth-child(2){left:2px;top:7px;bottom:2px;width:3px}
.knop-uitleg__vak i:nth-child(3){right:2px;top:7px;bottom:2px;width:3px}
.apto__demo{margin-top:16px;max-width:52ch;font-size:13.5px;line-height:1.5;color:var(--fg-3)}

/* de rectangle: 336 x 280 op ware grootte, kleiner alleen als de kolom smaller is */
.rect{display:grid;justify-items:center;gap:7px;margin:0;width:336px;max-width:100%}
.rect__label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);justify-self:start}
.rect__vak{position:relative;width:100%;aspect-ratio:336/280;overflow:hidden;background:rgb(171 199 255)}
.rect__frame{position:absolute;left:0;top:0;width:300px;height:250px;border:0;transform:scale(var(--rs,1.12));transform-origin:0 0;max-width:none}
.rect__maat{font-size:12px;color:var(--fg-3);justify-self:end;font-variant-numeric:tabular-nums}

.apto__verhaal{margin-top:clamp(70px,11vh,140px);display:grid;gap:clamp(64px,10vh,120px)}
.apto__verhaal .titel--m{font-size:clamp(32px,3.4vw,58px)}
.apto__situatie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,56px)}
.apto__situatie>.label,.apto__situatie>.titel{grid-column:1/-1}
.apto__situatie>p:not(.label){margin-top:clamp(18px,2.4vh,28px);font-size:clamp(17px,1.2vw,20px);line-height:1.45;color:var(--fg-2)}

/* 'Zo werkt het': de onderdelen uitgelicht, op de takeover zelf */
.uitleg-tag{position:absolute;z-index:3;margin:0;padding:6px 11px 6px 9px;border-radius:999px;background:var(--inkt);color:var(--papier);font-size:12px;line-height:1.1;white-space:nowrap;
  opacity:0;translate:0 6px;transition:opacity .35s,translate .5s var(--ease);pointer-events:none}
.uitleg-tag b{font-weight:500;color:var(--or-tekst);margin-right:5px}
.uitleg-tag--kop{left:clamp(12px,2vw,28px);top:14px}
.uitleg-tag--skin{top:calc(var(--apto-kop) + 16px)}
.uitleg-tag--l{left:12px}.uitleg-tag--r{right:12px}
.apto[data-uitleg] .uitleg-tag{opacity:1;translate:0 0}
.apto__kop::after,.apto__skin::after,.apto__kolom::before{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(17,17,16,.82);border-radius:8px;opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
.apto__kolom::before{inset:10px;border-color:rgba(29,29,27,.38)}
.apto[data-uitleg] :is(.apto__kop,.apto__skin,.apto__kolom)::before,.apto[data-uitleg] :is(.apto__kop,.apto__skin)::after{opacity:1}
/* de plakmeter: hoe ver de skins zijn in het stuk waarin ze blijven staan */
.apto__skin::before{content:"";position:absolute;top:0;bottom:0;width:3px;background:var(--inkt);transform-origin:top;transform:scaleY(var(--plak-p,0));opacity:0;transition:opacity .35s;z-index:2}
.apto__skin--l::before{right:0}.apto__skin--r::before{left:0}
.apto[data-uitleg] .rect__vak{outline:2px dashed var(--or);outline-offset:6px}
.apto__kolom::after{content:"De pagina van de publisher";position:absolute;right:22px;top:16px;font-size:12px;color:var(--fg-3);opacity:0;transition:opacity .35s}
:lang(en) .apto__kolom::after{content:"The publisher’s page"}
.apto[data-uitleg] .apto__kolom::after{opacity:1}
@media (max-width:1179px){.uitleg-tag--skin{display:none}}

/* ---------- 2  de interscroller in een iPad -------------------------------- */
/* v14, 20 oktober: sinds de breedte vaststaat rekent --rand de inhoud van 1600 px al uit (site.css). Met max-width en
   margin auto erbij telde de rand dubbel: vanaf 1720 px werd de tekstkolom smal en op 2560 px schoof de iPad over de kop. */
.is{--is-lengte:280vh;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(30px,6vw,120px);padding:0 var(--rand)}
.is__tekst{position:relative}
.is__tekst-in{position:sticky;top:0;min-height:100svh;display:grid;align-content:center;padding:calc(var(--kop-h) * .6) 0 40px}
.is__tekst .sk{margin-bottom:0}
.is__tekst .titel{font-size:clamp(38px,4.6vw,88px)}
.is__stappen{margin-top:clamp(26px,4vh,46px);display:grid;gap:2px;max-width:420px;counter-reset:s}
.is__stappen li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--lijn);color:var(--fg-3);font-size:17px;transition:color .3s}
.is__stappen li>span:first-child{font-size:12px;font-variant-numeric:tabular-nums;color:var(--fg-3);min-width:22px}
.is__stappen li.is-hier{color:var(--fg)}
/* v16, 5 november (Frank: "laat de copy een tikkie naar rechts bewegen als het active is") */
.is__stap{display:inline-block;transition:transform .55s var(--ease)}
.is__stappen li.is-hier .is__stap{transform:translateX(12px)}
.is__stappen li.is-hier>span:first-child{color:var(--or-tekst)}
.is__demo{margin-top:clamp(20px,3vh,32px);max-width:46ch;font-size:14.5px;line-height:1.5;color:var(--fg-3)}
.is__demo .pijl-link{color:var(--fg);margin-top:6px}
.is__baan{position:relative;height:calc(100svh + var(--is-lengte))}
.is__plak{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:calc(var(--kop-h) * .5) 0 18px}
.is__toestel{display:grid;justify-items:center;gap:16px;perspective:1600px}
.ipad{--ipad-h:min(calc(100svh - 150px),880px,calc((100vw - 2 * var(--rand)) / .721));position:relative;height:var(--ipad-h);aspect-ratio:.721;
  border-radius:calc(var(--ipad-h) * .046);padding:calc(var(--ipad-h) * .027);background:linear-gradient(150deg,#3b3b3e,#18181a 38%,#0e0e0f 70%,#2a2a2c);
  box-shadow:inset 0 0 0 1.5px #4a4a4e,inset 0 0 0 4px #121213;
  transform:translateY(calc((1 - var(--is-in,1)) * 46px)) rotateX(calc((1 - var(--is-in,1)) * 9deg)) scale(calc(.955 + .045 * var(--is-in,1)));transform-origin:50% 100%}
/* v16, 5 november (Frank: "hetzelfde van het toestel geldt voor de ipad, moet ook dikker"): achter het frame staan twaalf lagen
   in de kleur van de zijkant (b_rich.IPAD_KANTEN), elk een fractie verder naar achteren: samen 3,4% van de breedte, zoals een
   iPad Air (178,5 mm breed, 6,1 mm dik). Kantelt hij binnen, dan zie je de onderkant; en je kijkt er van het midden van de
   pagina tegenaan (links van de iPad), dus de linkerzijkant staat erbij. De schaduw zit op de achterste laag. */
.ipad{transform-style:preserve-3d;--ipad-dik:calc(var(--ipad-h) * .721 * .034)}
.ipad__kant{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,#77777c,#4a4a4e 40%,#2e2e31 75%,#5a5a5f);
  transform:translateZ(calc(var(--ipad-dik) * (var(--k) + 1) / -12))}
.ipad__kant:nth-child(12){box-shadow:0 50px 90px -40px rgba(17,17,16,.6),0 22px 44px -26px rgba(17,17,16,.45)}
@media (min-width:900px){.is__toestel{perspective-origin:-100% 46%}}

.ipad__camera{position:absolute;left:50%;top:calc(var(--ipad-h) * .0125);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a5566,#11151b 70%)}
.ipad__scherm{position:relative;width:100%;height:100%;border-radius:calc(var(--ipad-h) * .021);overflow:hidden;background:#fff;isolation:isolate;container-type:size;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.is__hint{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg-2);transition:opacity .4s}
.is__hint i{width:18px;height:28px;border:1.5px solid currentColor;border-radius:10px;position:relative}
.is__hint i::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:currentColor;animation:hint-scroll 1.6s var(--ease) infinite}
@keyframes hint-scroll{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:0}}
.is.is-onderweg .is__hint{opacity:0}

/* de pagina in het scherm: ons artikel. Maten in cqw/cqh, zodat hij op elk formaat hetzelfde oogt */
.is-p{position:absolute;left:0;right:0;top:0;z-index:1;transform:translate3d(0,calc(var(--is-y,0) * -1px),0);will-change:transform}
.is-p__blok{background:#fff;color:var(--inkt);padding:0 6.4cqw}
.is-p__blok--a{padding-bottom:7cqw}
.is-p__blok--b{padding-top:8cqw;padding-bottom:8cqw;min-height:100cqh}
.is-p__balk{display:flex;justify-content:space-between;align-items:center;height:12cqw;border-bottom:1px solid var(--lijn);margin:0 -6.4cqw 6cqw;padding:0 6.4cqw}
.is-p__merk{display:inline-flex;align-items:center;gap:1.8cqw;font-size:3.6cqw}
.is-p__merk b{font-weight:500}
.is-p__logo{width:4.6cqw;height:auto;fill:var(--or)}
.is-p__menu{display:grid;gap:1.1cqw;width:5.2cqw}
.is-p__menu i{display:block;height:2px;background:var(--inkt)}
.is-p__rubriek{font-size:2.7cqw;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.is-p__titel{margin-top:2.6cqw;font-size:7.1cqw;line-height:1.02;letter-spacing:calc(-.035em * var(--krap) + var(--lucht));font-weight:500}
.is-p__door{margin-top:4cqw;display:flex;align-items:center;gap:2.4cqw;font-size:3.3cqw;color:var(--fg-2)}
.is-p__door img{width:7.6cqw;height:7.6cqw;border-radius:50%}
img.is-p__beeld{display:block;width:calc(100% + 12.8cqw);max-width:none;height:auto;margin:5cqw -6.4cqw 0}
.is-p p{margin-top:4cqw;font-size:3.75cqw;line-height:1.5;color:#3a3a37}
.is-p h4{font-size:5.4cqw;line-height:1.1;letter-spacing:calc(-.025em * var(--krap) + var(--lucht));font-weight:500}
.is-p__einde{font-size:3cqw!important;color:var(--fg-3)!important}
.is-p__citaat{margin:6cqw 0 0;padding-left:4cqw;border-left:2px solid var(--or);font-size:5.6cqw;line-height:1.12;letter-spacing:calc(-.025em * var(--krap) + var(--lucht))}
.is-p__venster{position:relative;height:100cqh}
.is-p__ad,.is-p__verder{position:absolute;left:0;right:0;text-align:center;font-size:2.5cqw;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.is-p__ad{top:0;padding:1.6cqw 0;background:linear-gradient(rgba(17,17,16,.32),rgba(17,17,16,0))}
.is-p__verder{bottom:0;padding:1.6cqw 0;background:linear-gradient(rgba(17,17,16,0),rgba(17,17,16,.32))}

/* de campagne achter het venster: staat stil en bouwt op met de scroll als het venster helemaal open is (--o van 0 tot 1) */
.is-c{position:absolute;inset:0;z-index:0;container-type:size}
.is-c .gloed{background:rgb(171 199 255)}
.is-c__frame{position:absolute;top:0;bottom:0;left:50%;width:calc(100cqh * 360 / 800);translate:-50% 0;container-type:inline-size}
/* v16, 5 november (Frank: "kijk naar de gsap timeline en hoe de opbouw van de banner is, want nu animeert het niet volgens
   huisstijl (opbouw sticker enz)"): de campagne bouwt niet meer op met de scroll (--o) maar op tijd, zoals de linkerskin in
   de uiting (rich.js, 'de opbouw van de campagne'). Zonder script of bij minder beweging staat alles er. */
.is-c__toestel{perspective:900px}

/* ---------- 3  SwipeCubes -------------------------------------------------- */
.kubussen{padding-top:clamp(90px,12vh,160px)}
.kubussen__rij{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(56px,7vw,140px);margin-top:clamp(30px,5vh,60px)}
.kubus{display:grid;justify-items:center;gap:20px;margin:0}
.kubus__podium{--kw:min(calc(var(--w) * 1px),calc(100vw - 2 * var(--rand)));width:var(--kw);aspect-ratio:var(--w)/var(--h);perspective:calc(var(--kw) * 3.4);
  touch-action:pan-y;cursor:grab;border-radius:2px;outline-offset:10px;-webkit-tap-highlight-color:transparent}
.kubus__podium.is-sleep{cursor:grabbing}
.kubus__lijf{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:translateZ(calc(var(--kw) * -.5)) rotateY(calc(var(--rot,0) * 1deg))}
.kubus__vlak{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--kw) * .5));background:#ddd}
.kubus__vlak img{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.kubus__vlak::after{content:"";position:absolute;inset:0;background:#111110;opacity:var(--donker,0);pointer-events:none}
.kubus__podium::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(17,17,16,.22),rgba(17,17,16,0));pointer-events:none}
.kubus__podium{position:relative}
.kubus__onder{display:grid;justify-items:center;gap:10px;margin-top:14px}
.kubus__bediening{display:flex;align-items:center;gap:18px}
.kubus__knop[data-kubus-vorige] .pijl{transform:rotate(180deg)}
.kubus__teller{min-width:4.5ch;text-align:center;font-size:15px;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.kubus__hint{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);transition:opacity .4s}
.kubus__hint i{width:26px;height:12px;position:relative}
.kubus__hint i::before,.kubus__hint i::after{content:"";position:absolute;top:5px;height:1.5px;width:9px;background:currentColor}
.kubus__hint i::before{left:0;box-shadow:none;transform-origin:left;animation:hint-veeg 1.8s var(--ease) infinite}
.kubus__hint i::after{right:0;animation:hint-veeg 1.8s var(--ease) infinite reverse}
@keyframes hint-veeg{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.kubus.is-gedraaid .kubus__hint{opacity:0}
.kubus__onderschrift{display:grid;justify-items:center;gap:3px;text-align:center;font-size:15px}
.kubus__onderschrift b{font-weight:500}
.kubus__onderschrift span{font-size:13px;color:var(--fg-3)}

/* ---------- 4  live werk: de previewer ------------------------------------
   Zoals op de casepagina's: een grijs podium, een browservenster als impressie (dat blijft licht, ook in donker) en ernaast
   de zeven takeovers om uit te kiezen, als de lijst naast de video op het videoplatform. Het nieuwe beeld veegt over het
   oude; het balkje in de lijst loopt mee als hij vanzelf doorgaat (rich.js). */
.live{padding-top:clamp(90px,12vh,160px)}
.pv{--pv-podium:color-mix(in srgb,var(--inkt) 5%,var(--papier));--pv-tint:color-mix(in srgb,var(--inkt) 6%,transparent);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(24px,3vw,48px);align-items:start;margin-top:clamp(36px,5vh,64px);
  padding:clamp(16px,3.5vw,56px);border:1px solid var(--lijn);border-radius:4px;background:var(--pv-podium)}
.pv__hoofd{min-width:0}
.pv__venster{overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,19,18,.35),0 0 0 1px color-mix(in srgb,var(--inkt) 9%,transparent)}
.pv__balk{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:#ecebe8;border-bottom:1px solid #dad8d4}
.pv__balk>i{display:block;flex:none;width:11px;height:11px;border-radius:50%;background:#cfccc7}
.pv__url{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;max-width:440px;height:26px;margin:0 auto;padding:0 10px;
  border-radius:8px;background:#fff;font-size:12.5px;color:#6d6a66;white-space:nowrap;overflow:hidden}
.pv__url svg{flex:none;width:11px;height:11px}
.pv__url>span{overflow:hidden;text-overflow:ellipsis}
.pv__url b{font-weight:400;color:#1b1b1b}
.pv__scherm{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;background:#e7e7e4}
.pv__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0;clip-path:inset(0 0 0 100%)}
.pv__img.is-was{clip-path:inset(0);z-index:1}
.pv__img.is-aan{clip-path:inset(0);z-index:2;transition:clip-path .9s var(--ease)}
.pv__scherm:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
.pv__onder{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 28px;flex-wrap:wrap;margin-top:24px}
.pv__wat{min-width:0}
.pv__formaat,.pv__kop{margin:0;font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.pv__titel{margin:8px 0 6px;font-size:clamp(26px,2.4vw,38px);line-height:1;font-weight:500;letter-spacing:-.035em}
.pv__meta{margin:0;font-size:15px;color:var(--fg-2)}
.pv__zij{display:flex;flex-direction:column;gap:14px;min-width:0}
.pv__lijst{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.pv__item{display:grid;grid-template-columns:2.2ch 112px minmax(0,1fr);gap:14px;align-items:center;padding:8px 10px;border-radius:10px;color:inherit;
  text-decoration:none;transition:background .25s}
.pv__item:hover{background:var(--pv-tint)}
.pv__item.is-aan{background:var(--wit);box-shadow:0 0 0 1px var(--lijn)}
.pv__item:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.pv__nr{font-size:12px;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.pv__item.is-aan .pv__nr{color:var(--or-tekst)}
.pv__duim{position:relative;display:block;overflow:hidden;aspect-ratio:2/1;border-radius:6px;background:#e7e7e4}
.pv__duim img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.pv__balkje{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.55);opacity:0;transition:opacity .3s}
.pv__balkje i{display:block;height:100%;background:var(--or);transform:scaleX(0);transform-origin:0 50%}
.pv.is-auto .pv__item.is-aan .pv__balkje{opacity:1}
.pv.is-auto .pv__item.is-aan .pv__balkje i{animation:pv-loop var(--pv-duur,6s) linear forwards}
.pv.is-stil .pv__balkje i{animation-play-state:paused!important}
@keyframes pv-loop{to{transform:scaleX(1)}}
.pv__wie{display:grid;gap:2px;min-width:0}
.pv__wie b{overflow:hidden;font-size:15px;line-height:1.25;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.pv__wie span{overflow:hidden;font-size:13px;line-height:1.35;color:var(--fg-2);text-overflow:ellipsis;white-space:nowrap}
.pv__wie .pv__fmt{font-size:12.5px}
.live__noot{margin-top:22px;font-size:14px;color:var(--fg-2)}

/* ---------- wat je krijgt en waar het live gaat --------------------------- */
.rm-werk{display:grid;gap:clamp(70px,10vh,130px)}
.rm-werk .sk{margin-bottom:clamp(24px,3vw,44px)}
.rm-werk__punten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.4vw,44px)}
.rm-werk__punten--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.rm-werk__punten li{padding:20px 0 24px;border-top:1px solid var(--lijn)}
.rm-werk__punten h3{font-size:clamp(20px,1.5vw,25px);line-height:1.15;letter-spacing:calc(-.015em * var(--krap) + var(--lucht))}
.rm-werk__punten p{margin-top:8px;font-size:16px;line-height:1.45;color:var(--fg-2);max-width:40ch}
@media (max-width:1179px){.rm-werk__punten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){.rm-werk__punten,.rm-werk__punten--drie{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5  de contextuele afsluiting: een lege takeover --------------- */
.leeg{position:relative;overflow:hidden;padding:clamp(130px,18vh,220px) var(--rand) clamp(90px,13vh,160px)}
.leeg__kader{position:absolute;inset:0;pointer-events:none;--z:max(56px,calc((100% - 960px) / 2));--k:clamp(80px,13vw,180px);--l:rgba(29,29,27,.42)}
.leeg__kop,.leeg__skin{position:absolute;border:2px dashed var(--l);border-radius:10px}
.leeg__kop{left:calc(var(--z) + 16px);right:calc(var(--z) + 16px);top:clamp(24px,4vh,40px);height:var(--k)}
.leeg__skin{top:clamp(24px,4vh,40px);bottom:clamp(24px,4vh,40px);width:calc(var(--z) - 28px)}
.leeg__skin--l{left:14px}.leeg__skin--r{right:14px}
.leeg__kader i{position:absolute;left:14px;top:12px;font-style:normal;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--inkt-vast)}   /* v14: 4,9:1 op oranje */
.leeg__in{position:relative;max-width:min(860px,calc(100% - 2 * var(--z,0px)));margin:0 auto;padding-top:clamp(40px,8vh,120px)}
.leeg__in .titel{font-size:clamp(46px,6vw,112px)}
.leeg__tekst{margin-top:18px;max-width:40ch;font-size:clamp(19px,1.5vw,25px);line-height:1.35}
.leeg .knoppen{margin-top:28px}
@media (max-width:899px){
  .leeg__kader{--z:22px;--k:70px}
  .leeg__skin{width:14px}
  .leeg__skin i{display:none}
  .leeg__in{max-width:none;padding:clamp(40px,7vh,80px) 18px 0}
}

/* ---------- smaller ------------------------------------------------------- */
@media (max-width:1179px){
  .apto__kolom{padding-top:clamp(34px,5vh,56px)}
  .apto__uitleg{grid-template-columns:minmax(0,1fr)}
  .rect{justify-self:start}
  .is{grid-template-columns:minmax(0,1fr) minmax(0,auto);column-gap:40px}
}
@media (max-width:899px){
  .apto__situatie{grid-template-columns:minmax(0,1fr)}
  /* de previewer: het venster boven, de lijst eronder; het podium randloos, zoals op de casepagina's */
  .pv{grid-template-columns:minmax(0,1fr);margin-inline:calc(-1 * var(--rand));border-inline:0;border-radius:0}
  .is{display:block;padding:0}
  .is__tekst{padding:clamp(70px,10vh,110px) var(--rand) 0}
  .is__tekst-in{position:static;min-height:0;padding:0}
  .is__stappen{display:none}
  .is__baan{--is-lengte:250vh}
  .ipad{--ipad-h:min(calc(100svh - 110px),calc((100vw - 28px) / .721))}
}
@media (max-width:759px){
  .apto__kolom{padding-top:28px}
  .pv__item{grid-template-columns:2.2ch 96px minmax(0,1fr);gap:12px;padding:8px}
  .pv__balk{height:32px;gap:8px;padding:0 10px}
  .pv__balk>i{width:8px;height:8px}
  .pv__url{height:22px;font-size:11px}
  .apto__h1{font-size:clamp(42px,12.4vw,64px)}
  .rect{justify-self:center}
  .kubussen__rij{gap:64px}
}

/* ---------- minder beweging ------------------------------------------------ */
.rustig .is__baan{height:auto}
.rustig .is__plak{position:relative;height:auto;padding:24px 0 0}
.rustig .ipad{--ipad-h:min(76svh,780px,calc((100vw - 2 * var(--rand)) / .721));transform:none}
.rustig .is__hint{display:none}
.rustig .kubus__hint i::before,.rustig .kubus__hint i::after,.rustig .is__hint i::after{animation:none}
.bb-klein{position:absolute;right:calc(.45cqw + max(16px,1.65cqw) + 9px);bottom:.95cqw;font:400 max(8px,.93cqw)/1 Arial,sans-serif;color:#000;white-space:nowrap}
.uitleg-smal{display:none}
@media (max-width:759px){.uitleg-breed{display:none}.uitleg-smal{display:inline}}