/* BannerBazen · duo.css (v13)
   De casepagina's in de opbouw van de iPhone Duo-case (BannerBazen-3.0/case-odido-iphone-duo/index.html).
   Bovenaan de kop in drie regels, het intro met de feiten en de film; dan een uitspraak met cijfers; per kanaal
   een hoofdstuk met de kop links, de lead rechts en de uitingen op een grijs podium; tot slot de set. De balk,
   het contactblok en de voet zijn die van de site. Alles hangt onder .pagina-duo (b_duo.py).
   De omgevingen op de podia (een nieuwssite, apps, een videoplatform) zijn impressies. Die blijven licht, ook
   in donker, zoals in de case. Klein grijs staat in --fg-2 (4,5 : 1), groot grijs in --d-grijs (3 : 1). */

.pagina-duo{
  --d-podium:color-mix(in srgb,var(--inkt) 5%,var(--papier));
  --d-grijs:color-mix(in srgb,var(--inkt) 52%,var(--papier));
  --d-tint:color-mix(in srgb,var(--inkt) 6%,transparent);
  --d-tint-2:color-mix(in srgb,var(--inkt) 9%,transparent);
}
.pagina-duo main>section:not(.cb),.pagina-duo .d-hst{padding-inline:var(--rand)}   /* .d-hst ook als hij in de pin-spacer van duo.js staat */
/* het contactblok komt na de set, die geen ondermarge heeft: dus wel zijn eigen ruimte erboven (zoals in de case) */
.pagina-duo main>section.cb{padding-top:clamp(96px,11vw,160px)!important}

/* ---------- de letter van de case ---------- */
.d-oog{margin:0 0 18px;font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.d-h2{font-size:clamp(40px,5.4vw,76px);line-height:.98;font-weight:500;letter-spacing:-.04em;text-wrap:balance}
.d-lead{max-width:46ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;letter-spacing:-.005em;color:var(--fg-2)}
.d-tags{display:flex;flex-wrap:wrap;gap:6px}
.d-tag{padding:5px 9px;border-radius:999px;background:var(--d-tint);color:var(--fg-2);font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

/* ---------- kop: kruimelpad, de kop in drie regels, het intro met de feiten, de film ---------- */
.pagina-duo .d-kop{padding-top:calc(var(--kop-h) + var(--tl-h) + clamp(32px,5vw,88px));padding-bottom:clamp(40px,5vw,72px)}
.d-kruimel ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 26px;padding:0;list-style:none;font-size:13px;line-height:1.4;color:var(--fg)}
.d-kruimel li+li::before{content:"/";margin-right:10px;color:var(--fg-3)}
.d-kruimel a{color:var(--fg-2);text-decoration:none;transition:color .3s}
.d-kruimel a:hover{color:var(--fg)}
.d-h1{font-size:clamp(44px,8.4vw,132px);line-height:.94;font-weight:500;letter-spacing:-.045em}   /* 11 november: op een telefoon 44 px (was 48), dan past Odido Nederland samen op de laatste regel */
.d-h1__grijs{color:var(--d-grijs)}
.d-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,6vw,120px);align-items:end;margin-top:clamp(32px,4vw,56px)}
.d-intro .d-lead{max-width:40ch;font-size:clamp(17px,1.5vw,21px)}
.d-intro__knop{display:flex;flex-wrap:wrap;gap:12px 10px;margin-top:28px}
.d-feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--lijn)}
.d-feiten>div{min-width:0;padding:16px 16px 18px 0;border-bottom:1px solid var(--lijn)}
.d-feiten>div:last-child:nth-child(odd){grid-column:1/-1}   /* v14, 23 oktober: een oneven laatste (BMW, met de opdrachtgever) over de hele breedte */
.d-feiten dt{margin-bottom:8px;font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.d-feiten dd{font-size:15px;line-height:1.45}
.d-feiten .d-tags{margin-top:2px}
/* de film: randloos in de kolom, met een label en de geluidsknop */
.d-film{position:relative;margin-top:clamp(40px,5vw,72px);border-radius:4px;overflow:hidden;background:#000;aspect-ratio:16/9}
.d-film video,.d-film>img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.d-film--beeld{aspect-ratio:auto;background:var(--d-podium)}
.d-film--beeld>img{height:auto}
.d-film__label{position:absolute;left:16px;bottom:14px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;line-height:1.3}

/* ---------- de uitspraak en de cijfers ---------- */
.pagina-duo .d-zeg{padding-block:clamp(80px,10vw,150px)}
.d-zeg__zin{max-width:26ch;font-size:clamp(26px,3.3vw,48px);line-height:1.12;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.d-zeg__zin span{color:var(--d-grijs)}
.d-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--lijn)}
.d-cijfers>div{padding:18px 18px 0 0}
.d-cijfers b{display:block;font-size:clamp(40px,4.6vw,68px);line-height:1;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.d-cijfers span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--fg-2)}
/* een uitspraak van de klant, in de letter van de uitspraak */
.pagina-duo .d-citaat{padding-block:clamp(72px,9vw,130px) 0}
.d-citaat blockquote{margin:0}
.d-citaat .d-zeg__zin{max-width:30ch}
/* v14: een lange quote (meer dan 180 tekens) iets kleiner en breder, anders wordt het een muur van tekst */
.d-citaat--lang .d-zeg__zin{max-width:40ch;font-size:clamp(22px,2.3vw,34px);line-height:1.24}
.d-citaat__wie{margin-top:22px;font-size:15px;line-height:1.45;color:var(--fg-2)}
.d-citaat__wie b{color:var(--fg);font-weight:500}

/* ---------- hoofdstukken: kop links, lead rechts, de uitingen op een grijs podium ---------- */
.pagina-duo .d-hst{padding-block:clamp(72px,9vw,130px) 0}
.d-hst__kop{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,6vw,120px);align-items:end;margin-bottom:clamp(28px,3.6vw,48px)}
.d-hst__kop .d-tags{margin-top:18px}
/* 12 november: een hoofdstuk met twee alinea's en twee podia (de BMW-case: de knop en de template in één) */
.d-hst__kop .d-lead+.d-lead{margin-top:.9em}
.d-podium{position:relative;padding:clamp(16px,3.5vw,56px);border:1px solid var(--lijn);border-radius:4px;background:var(--d-podium)}
.d-podium+.d-podium{margin-top:clamp(16px,2.4vw,32px)}
.d-onder{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:13px;line-height:1.4;color:var(--fg-2)}
.d-onder b{color:var(--fg);font-weight:500}
.d-opnieuw{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--d-tint-2);color:var(--fg);font-size:13px;line-height:1;font-weight:500;letter-spacing:0;transition:background .4s var(--ease),color .4s}
.d-opnieuw:hover{background:var(--or);color:var(--inkt-vast)}
.d-opnieuw svg{width:13px;height:13px}
/* een impressie op zijn eigen maat, verkleind als het podium smaller is (duo.js) */
.d-fit{position:relative;width:100%;overflow:hidden}
.d-fit>.d-fit-in{position:absolute;left:0;top:0;transform-origin:0 0}
/* een tekening (schema, knop) houdt zijn eigen maat: d-fit verkleint hem al, max-width uit site.css zou dat nog eens doen */
.d-fit>.d-fit-in>svg{max-width:none}
.no-js .d-fit{height:auto!important;aspect-ratio:auto!important}
.no-js .d-fit>.d-fit-in{position:static}
/* uitingen los op het podium: op ware grootte, alleen kleiner als het scherm smaller is */
.d-uitingen{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(28px,3.4vw,56px)}
/* twee per rij: 2 x 336 plus de tussenruimte past, 3 x 300 niet */
.d-uitingen--twee{max-width:780px;margin-inline:auto}
/* blok (NIO, consideration): een 970 x 250, een 300 x 600 en een 336 x 280 in elkaar geschoven, op hoeveel ruimte er is.
   Ruim: rechts de 300 x 600, links de 336 x 280 bovenaan (bovenkant gelijk met de 300 x 600, rechterkant gelijk met de
   970 x 250) en de 970 x 250 onderaan. Smaller: de 970 x 250 boven, eronder de 300 x 600 en de 336 x 280, bovenkant gelijk
   en links en rechts gelijk met de 970 x 250. Nog smaller: zoals de andere uitingen. */
.d-blokmaat{container-type:inline-size}
.d-uitingen--blok{align-items:flex-start}
.d-plek-breed{grid-area:breed}.d-plek-hoog{grid-area:hoog}.d-plek-klein{grid-area:klein}
@container (min-width:970px){
  .d-uitingen--blok{display:grid;width:970px;margin-inline:auto;grid-template-columns:300px 1fr;grid-template-areas:"breed breed" "hoog klein";
    gap:clamp(36px,4vw,56px) 0;align-items:start}
  .d-uitingen--blok .d-plek-klein{justify-self:end}
}
@container (min-width:1326px){
  .d-uitingen--blok{width:auto;grid-template-columns:970px 300px;grid-template-areas:"klein hoog" "breed hoog";justify-content:center;gap:0 56px}
  .d-uitingen--blok .d-plek-klein{align-self:start}
  .d-uitingen--blok .d-plek-breed{align-self:end}
}
.d-uiting{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;max-width:100%}
.d-uiting .d-fit{width:calc(var(--w) * 1px);max-width:100%}
.d-uiting iframe,.m-ad iframe{display:block;max-width:none;border:0;background:#fff}
/* v14, 23 oktober: Op het raster bij de Odido-launch. De banner uit het vel van 400 x 700 bepaalt maat en plek (gelijk met de
   Glow-demo); het vel zelf is doorzichtig en steekt er rondom buiten, zodat de kanteling bij hover niet wordt afgesneden.
   Zonder muis (telefoon, tablet) kantelt er niets: dan alleen de banner, en loopt er niets buiten de pagina. */
.d-uitsnede{position:relative}
.d-uitsnede__vel{position:absolute}
.d-fit--vrij{overflow:visible}
.d-fit--vrij iframe{background:transparent}
.d-uitingen:has(.d-fit--vrij){column-gap:clamp(56px,6vw,96px)}
@media (hover:hover) and (min-width:701px){.d-uitingen:has(.d-fit--vrij) .d-uiting{gap:44px}}   /* ruimte onder de kanteling, de bijschriften gelijk */
@media (hover:none),(max-width:700px){.d-fit--vrij,.d-fit--vrij .d-uitsnede{overflow:hidden}}
/* v14, 24 oktober: de SwipeCubes op een podium. De kubus staat in een groter, doorzichtig vlak (?ruim=48,12, webo-swiper.js):
   het grijs van het podium loopt door achter de kubus, en draaiend (tot 41 px opzij) wordt hij niet afgesneden. Meer ruimte
   tussen de kubussen. Op een telefoon houdt het podium het vlak binnen zijn rand: de kubus draait tot daar, en de pagina
   wordt niet breder dan het scherm. */
.d-fit--kubus{overflow:visible}
.d-fit--kubus iframe{background:transparent}
.d-uitingen:has(.d-fit--kubus){column-gap:clamp(56px,6vw,96px)}
@media (max-width:700px){.art-podium:has(.d-fit--kubus),.d-podium:has(.d-fit--kubus){overflow:hidden}}
.d-leeg{display:grid;place-items:center;width:calc(var(--w) * 1px);max-width:100%;aspect-ratio:var(--w)/var(--h);margin:0;text-align:center}
.d-leeg p{max-width:22ch}
.d-leeg b{display:block;margin:0 0 4px}
.d-aanleveren{margin-top:18px}

/* ---------- de set: wat er gemaakt is, met de credits ---------- */
.pagina-duo .d-set{padding-block:clamp(72px,9vw,130px) 0}
.d-set__rooster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,120px);align-items:start}
.d-diensten{border-top:1px solid var(--lijn)}
.d-dienst{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:24px 0 26px;border-bottom:1px solid var(--lijn)}
.d-dienst__t,.d-dienst__n{font-size:clamp(26px,2.6vw,40px);line-height:1.02;font-weight:500;letter-spacing:-.035em}
.d-dienst__n{grid-column:2;grid-row:1;color:var(--d-grijs);font-variant-numeric:tabular-nums}
.d-dienst__d{grid-column:1/-1;max-width:52ch;margin-top:4px;font-size:15px;line-height:1.55;color:var(--fg-2)}
.d-dienst .d-tags{grid-column:1/-1;margin-top:8px}
.d-set__zij{position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 24px)}
.d-set__zij .d-lead{margin-top:18px}
.d-credits{margin-top:32px;border-top:1px solid var(--lijn)}
.d-credits>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--lijn);font-size:14.5px;line-height:1.4}
.d-credits dt{color:var(--fg-2)}
.d-credits dd{text-align:right}
.d-noot{max-width:72ch;margin-top:clamp(40px,5vw,64px);font-size:13px;line-height:1.5;color:var(--fg-2)}


/* ==========================================================================
   De impressies. Verzonnen omgevingen, nagetekende apps: altijd licht.
   ========================================================================== */
/* ---------- browser met een nieuwssite ---------- */
.m-rij{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(16px,3vw,40px);align-items:start}
.m-rij--een{grid-template-columns:minmax(0,1fr)}
.m-browser{width:1200px;overflow:hidden;border-radius:10px;background:#fff;color:#1b1b1b;font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:0;
  box-shadow:0 30px 60px -30px rgba(20,19,18,.35),0 0 0 1px color-mix(in srgb,var(--inkt) 9%,transparent)}
.m-balk{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;background:#ecebe8;border-bottom:1px solid #dad8d4}
.m-balk>i{display:block;width:12px;height:12px;border-radius:50%;background:#cfccc7}
.m-url{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;max-width:520px;height:28px;margin:0 auto;border-radius:8px;background:#fff;font-size:13px;color:#6d6a66}
.m-url svg{width:11px;height:11px}
.m-util{display:flex;justify-content:space-between;padding:8px 32px;border-bottom:1px solid #eee;font-size:12px;color:#6f6f6f}
.m-mast{display:flex;align-items:baseline;justify-content:space-between;padding:18px 32px 12px}
.m-mast__naam{font-family:Georgia,"Times New Roman",serif;font-size:44px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.m-mast__naam span,.m-nav span:first-child,.m-kicker{color:#b3261e}
.m-mast__datum{font-size:13px;color:#666}
.m-nav{display:flex;gap:26px;padding:10px 32px;border-top:3px solid #1b1b1b;border-bottom:1px solid #ddd;font-size:14px;font-weight:500}
.m-bb{display:flex;justify-content:center;padding:20px 32px 0}
.m-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;padding:24px 32px 40px}
.m-lead .m-img{height:330px}
.m-kicker{margin:14px 0 6px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.m-lead h3{margin:0 0 10px;font-family:Georgia,"Times New Roman",serif;font-size:34px;line-height:1.12;font-weight:700;letter-spacing:0}
.m-lead p{font-size:16px;line-height:1.55;color:#444}
.m-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid #e5e5e5}
.m-grid--336{grid-template-columns:minmax(0,1fr) 336px minmax(0,1fr)}
.m-story .m-img{height:150px}
.m-story h4,.m-meer h4{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:0}
.m-story h4{margin:8px 0 0;font-size:18px;line-height:1.25}
.m-ad{display:flex;flex-direction:column;align-items:center;gap:4px}
.m-ad__lbl{align-self:stretch;font-size:10px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:#6b6b6b}   /* v14: 4,8:1 ook op #f4f4f4 (was #999, 2,6:1) */
.m-ad iframe{background:#f5f5f7}
.m-side h5{margin:0 0 10px;padding-bottom:8px;border-bottom:3px solid #1b1b1b;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.m-side ol{margin:0 0 24px;padding:0;list-style:none;counter-reset:n}
.m-side li{display:grid;grid-template-columns:28px 1fr;gap:6px;padding:10px 0;border-bottom:1px solid #eee;counter-increment:n;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.3;font-weight:700}
.m-side li::before{content:counter(n);font-family:var(--font);font-size:20px;line-height:1;font-weight:500;color:#b3261e}
.m-meer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid #e5e5e5}
.m-meer article{display:grid;grid-template-columns:140px 1fr;gap:14px}
.m-meer .m-img{height:96px}
.m-meer h4{margin:0;font-size:17px;line-height:1.25}
.m-meer p{margin:6px 0 0;font-size:13px;color:#666}
/* beeld bij de verzonnen artikelen: getekend, geen foto's */
.m-img{position:relative;overflow:hidden;border-radius:2px;background:#ccc}
.m-img--storm{background:radial-gradient(120% 90% at 70% 0%,#8fa3b8 0%,#4b5e73 45%,#22303f 100%)}
.m-img--storm::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,transparent 0 22px,rgba(255,255,255,.08) 22px 24px)}
.m-img--storm::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#1c2632,#121a22);clip-path:polygon(0 40%,12% 30%,22% 46%,35% 28%,48% 42%,60% 22%,74% 40%,86% 30%,100% 44%,100% 100%,0 100%)}
.m-img--bus{background:linear-gradient(180deg,#cfe3e6 0 55%,#9fb7b0 55% 100%)}
.m-img--bus::after{content:"";position:absolute;left:22%;right:22%;top:30%;height:38%;border-radius:18px 18px 6px 6px;background:linear-gradient(#f3f3f0 0 45%,#2b3a42 45% 70%,#f3f3f0 70%);box-shadow:0 10px 0 -4px #6b7d79}
.m-img--markt{background:linear-gradient(135deg,#e9b44c,#d1603d)}
.m-img--markt::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 70%,#f6e3b4 0 10%,transparent 11%),radial-gradient(circle at 45% 60%,#9bc53d 0 9%,transparent 10%),radial-gradient(circle at 70% 72%,#c3423f 0 11%,transparent 12%)}
.m-img--voet{background:linear-gradient(180deg,#3f7d3a,#2c5e2a)}
.m-img--voet::after{content:"";position:absolute;inset:18% 10%;border:3px solid rgba(255,255,255,.7);border-radius:2px;background:linear-gradient(90deg,transparent calc(50% - 1.5px),rgba(255,255,255,.7) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.m-img--trein{background:linear-gradient(180deg,#f2d8a7 0 60%,#7d7468 60%)}
.m-img--trein::after{content:"";position:absolute;left:8%;right:-10%;top:42%;height:26%;border-radius:30px 0 0 6px;background:linear-gradient(#ffc917 0 60%,#1d3c8f 60%)}
.m-img--museum{background:linear-gradient(180deg,#e9e4da,#cfc6b6)}
.m-img--museum::after{content:"";position:absolute;left:25%;right:25%;top:22%;bottom:22%;background:#8a5a44;box-shadow:inset 0 0 0 8px #d8b45f}
.m-img--weer{background:linear-gradient(180deg,#9cc6e8,#e6f1f8)}
.m-img--weer::after{content:"";position:absolute;left:30%;top:28%;width:40%;height:34%;border-radius:40px;background:#fff;box-shadow:-20px 12px 0 -6px #fff,24px 10px 0 -4px #fff}
.m-img--weg{background:linear-gradient(180deg,#b9c7d3 0 46%,#5f6b74 46% 100%)}
.m-img--weg::after{content:"";position:absolute;left:46%;width:8%;top:46%;bottom:0;background:repeating-linear-gradient(180deg,#f2f2ee 0 14%,transparent 14% 28%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.m-img--kantoor{background:linear-gradient(180deg,#e7e2d8 0 62%,#b9a98e 62%)}
.m-img--kantoor::after{content:"";position:absolute;left:18%;right:18%;top:24%;height:40%;border-radius:4px;background:linear-gradient(#2f3a45 0 82%,#c9c3b6 82%);box-shadow:0 0 0 6px #d4cdbf}

/* ---------- de nieuwssite op een telefoon ---------- */
.m-mnieuws{height:100%;overflow:hidden;padding-top:40px;background:#fff;color:#1b1b1b;font-family:var(--font);letter-spacing:0}
/* minder beweging (of geen JavaScript): staat de laatste uiting er half op, dan scrol je in de telefoon zelf */
.m-mnieuws.is-zelf,.no-js .m-mnieuws{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.m-mnieuws.is-zelf::-webkit-scrollbar,.no-js .m-mnieuws::-webkit-scrollbar{display:none}
.m-mnieuws__mast{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:3px solid #1b1b1b}
.m-mnieuws__mast b{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:700}
.m-mnieuws__mast b span{color:#b3261e}
.m-mnieuws__art{padding:14px 16px 0}
.m-mnieuws .m-img{height:118px}
.m-mnieuws h3{margin:4px 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:22px;line-height:1.18;font-weight:700;letter-spacing:0}
.m-mnieuws p{margin:0 0 12px;font-size:14px;line-height:1.55;color:#444}
.m-mnieuws .m-ad{margin:6px -16px 14px;padding:10px 0;background:#f4f4f4}
.m-ad__vak{overflow:hidden}
.m-ad__vak iframe{transform-origin:0 0}

/* ---------- toestel ---------- */
.m-tels{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(20px,3vw,44px)}
.m-ph{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.m-tel{position:relative;width:300px;max-width:100%;aspect-ratio:9/19.5;padding:10px;border-radius:48px;background:#000;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7),inset 0 0 0 2px #2a2a2c,0 0 0 1px color-mix(in srgb,var(--inkt) 10%,transparent)}
.m-scherm{position:relative;width:100%;height:100%;overflow:hidden;border-radius:38px;background:#000;color:#fff;
  font-family:-apple-system,"SF Pro Text","Helvetica Neue",var(--font);font-size:13px;line-height:1.3;letter-spacing:0}
.m-scherm--licht{background:#fff;color:#111}
.m-scherm video,.m-scherm img{max-width:none}
.m-status{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;height:40px;padding:4px 26px 0;font-size:13px;font-weight:600}
/* op een licht scherm is de statusbalk wit: wat in de telefoon doorscrolt (duo.js), schuift eronder weg */
.m-scherm--licht .m-status{background:#fff}
.m-status>span:last-child{display:flex;align-items:center;gap:5px}
.m-status i{display:block;border-radius:1px;background:currentColor}
.m-eiland{position:absolute;top:9px;left:50%;z-index:6;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000}
.m-ph__onder{text-align:center;font-size:14px;line-height:1.35}
.m-ph__onder b{display:block;font-weight:500;color:var(--fg)}
.m-ph__onder span{font-size:13px;color:var(--fg-2)}
.m-geluid{position:absolute;z-index:8;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.m-geluid svg{width:15px;height:15px}
.m-av{display:grid;place-items:center;flex:none;width:30px;height:30px;overflow:hidden;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.m-av svg{width:20px;height:auto}
.m-av img{width:100%;height:100%;object-fit:cover}
.m-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* feed */
.m-fkop{position:absolute;top:40px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 14px;font-size:17px;font-weight:700}
.m-fkop>span:last-child{display:flex;gap:14px}
.m-post{position:absolute;top:84px;left:0;right:0}
.m-post__kop{display:flex;align-items:center;gap:9px;padding:8px 12px}
.m-post__wie{flex:1;line-height:1.15}
.m-post__wie b{display:block;font-size:13px;font-weight:600}
.m-post__wie span{font-size:11px;color:#666}
.m-post__media{position:relative}
.m-post__media video,.m-post__media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#eee}
.m-post__cta{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid #eee;font-size:13px;font-weight:600;color:#111}
.m-post__acties{display:flex;gap:14px;padding:9px 12px 4px}
.m-post__acties>i{flex:1}
.m-post__tekst{padding:2px 12px;font-size:12.5px;line-height:1.4}
.m-post__tekst b{font-weight:600}
.m-spook{display:flex;align-items:center;gap:9px;margin:14px 12px 0}
.m-spook i{display:block;width:30px;height:30px;border-radius:50%;background:#eee}
.m-spook u{display:block;width:110px;height:9px;border-radius:5px;background:#eee}
.m-ftab{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:flex-start;height:62px;padding-top:12px;border-top:1px solid #eee;background:#fff}

/* carousel in de feed: swipen, of met de pijltjes */
.m-karrousel{position:relative}
.m-karrousel__baan{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.m-karrousel__baan::-webkit-scrollbar{display:none}
.m-karrousel__baan img{flex:none;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;scroll-snap-align:start;background:#eee}
.m-karrousel__teller{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:600}
.m-karrousel__pijl{position:absolute;top:50%;display:grid;place-items:center;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;box-shadow:0 1px 4px rgba(0,0,0,.25);opacity:0;transition:opacity .2s}
.m-karrousel__pijl svg{width:13px;height:13px}
.m-karrousel:hover .m-karrousel__pijl,.m-karrousel__pijl:focus-visible{opacity:1}
.m-karrousel__pijl--l{left:8px}
.m-karrousel__pijl--r{right:8px}
.m-karrousel__pijl[disabled]{visibility:hidden}
@media (hover:none){.m-karrousel__pijl{opacity:1}}
.m-stipjes{display:flex;flex:1;justify-content:center;align-items:center;gap:4px}
.m-stipjes i{display:block;width:6px;height:6px;border-radius:50%;background:#c9c9c9}
.m-stipjes i.is-aan{background:#0095f6}
.m-post__media .d-leeg{width:100%;border-radius:0}

/* reels, stories en shorts: de video over het hele scherm */
.m-vol>video,.m-vol>.m-vol__poster{position:absolute;left:0;top:var(--vt,84px);width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.m-vol::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 18%,transparent 68%,rgba(0,0,0,.55) 100%)}
.m-ov{position:absolute;z-index:4}
.m-rail{right:10px;bottom:118px;display:flex;flex-direction:column;align-items:center;gap:20px}
.m-rail .m-ico{width:26px;height:26px}
.m-meta{left:12px;right:60px;bottom:58px;font-size:12.5px;line-height:1.35}
.m-meta__wie{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:600}
.m-meta__wie span{font-weight:400;opacity:.85}
.m-pil{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:600}
.m-pil--wit{background:#fff;color:#111}
.m-rtop{top:44px;left:14px;right:14px;display:flex;justify-content:space-between;font-size:17px;font-weight:700}
.m-balkjes{top:46px;left:10px;right:10px;display:flex;gap:4px}
.m-balkjes i{display:block;flex:1;height:2.5px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.4)}
.m-balkjes b{display:block;width:0;height:100%;background:#fff}
.m-skop{top:56px;left:12px;right:12px;display:flex;align-items:center;gap:8px;font-size:12.5px}
.m-skop b{font-weight:600}
.m-skop span:last-child{opacity:.85}
.m-svoet{left:0;right:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600}
.m-svoet svg{width:18px;height:18px}
.m-svoet span{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:99px;background:#fff;color:#111}

/* ---------- een videoplatform (neutraal) ---------- */
.m-yt-rij{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(16px,3vw,40px);align-items:start}
.m-yt{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;width:1200px;padding:24px;background:#fff;color:#0f0f0f;font-family:var(--font);font-size:14px;line-height:1.4;letter-spacing:0}
.m-speler{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:12px;background:#000}
.m-speler video{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.m-adui{position:absolute;inset:0;pointer-events:none}
.m-adbalk{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.3)}
.m-adbalk b{display:block;width:0;height:100%;background:#fbd400}
.m-adtag{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.m-adtag i{padding:3px 6px;border-radius:4px;background:#fbd400;color:#111;font-style:normal;font-size:12px;font-weight:600;text-shadow:none}
.m-adkaart,.m-skip{transition:opacity .3s}
.m-adui.is-eind .m-adkaart,.m-adui.is-eind .m-skip{opacity:0}
.m-adkaart{position:absolute;left:16px;bottom:48px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.96);color:#111;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.m-adkaart .m-av{width:36px;height:36px}
.m-adkaart b{display:block;font-weight:600}
.m-adkaart small{font-size:12px;color:#555}
.m-adkaart__ga{margin-left:10px;padding:7px 14px;border-radius:99px;background:#0f0f0f;color:#fff;font-size:13px;font-weight:600}
.m-skip{position:absolute;right:0;bottom:44px;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 20px;border:1px solid rgba(255,255,255,.35);border-right:0;background:rgba(0,0,0,.65);color:#fff;font-size:15px}
.m-skip svg{width:14px;height:14px;fill:#fff}
.m-vt{margin:14px 0 10px;font-size:21px;font-weight:600}
.m-kanaal{display:flex;align-items:center;gap:12px;font-size:14px}
.m-kanaal__av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#5b8c5a,#2d4a2c)}
.m-kanaal b{display:block;font-weight:600}
.m-kanaal small{font-size:12px;color:#666}
.m-kanaal__abo{margin-left:12px;padding:8px 16px;border-radius:99px;background:#0f0f0f;color:#fff;font-size:14px;font-weight:600}
.m-omschrijving{margin-top:14px;padding:12px;border-radius:12px;background:#f2f2f2;font-size:14px;line-height:1.5;color:#333}
.m-volgende{display:flex;flex-direction:column;gap:12px}
.m-volgende article{display:grid;grid-template-columns:168px 1fr;gap:10px}
.m-volgende .m-img{height:94px;border-radius:8px}
.m-volgende b{display:block;font-size:14px;line-height:1.3;font-weight:600}
.m-volgende span{font-size:12px;color:#666}

/* ---------- buiten: een liggend scherm en een abri ---------- */
.m-buiten{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);align-items:end}
.m-scherm-liggend{position:relative;overflow:hidden;border:10px solid #111;border-radius:6px;background:#000;aspect-ratio:var(--r,16/9);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.m-scherm-liggend video,.m-scherm-liggend img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.m-abri{position:relative;width:min(300px,100%);overflow:hidden;border-radius:4px;background:#000;aspect-ratio:var(--r,9/16)}   /* de abri van NIO is 4:5 (de hele abri), de zuil van de Haastmakers 9:16 */
.m-abri video,.m-abri img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.m-buiten .m-geluid{right:12px;bottom:12px}
.m-buiten figure{margin:0}
.m-buiten figcaption{margin-top:14px;text-align:center;font-size:14px;line-height:1.35}
.m-buiten figcaption b{display:block;font-weight:500;color:var(--fg)}
.m-buiten figcaption span{font-size:13px;color:var(--fg-2)}

/* ---------- schema: de opbouw van een template per formaat (BMW) ----------
   Een tekening, geen uiting: lijnen in de inktkleur van de site, zodat hij in licht en donker klopt. Alleen de knop houdt
   het blauw uit de template. */
.d-schema__legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 clamp(22px,3vw,40px);padding:0;list-style:none;font-size:13px;line-height:1.3;color:var(--fg-2)}
.d-schema__legenda li{display:inline-flex;align-items:center;gap:8px}
.d-schema__legenda i{display:inline-block;width:18px;height:12px;flex:none;box-sizing:border-box}
.d-schema__legenda .l-beeld{background:linear-gradient(to top right,transparent calc(50% - .6px),var(--d-grijs) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px));border:1px solid var(--d-grijs)}
.d-schema__legenda .l-marge{border:1px dashed var(--d-grijs)}
.d-schema__legenda .l-kop{height:6px;border-radius:3px;background:var(--d-grijs);opacity:.55}
.d-schema__legenda .l-logo{width:12px;border-radius:50%;border:1.5px solid var(--fg)}
.d-schema__legenda .l-knop{height:10px;border-radius:2px}
.d-schema__legenda .l-strook{height:6px;background:var(--d-tint-2);border-top:1px solid var(--d-grijs)}
.s-svg{display:block;overflow:visible;font-family:Arial,Helvetica,sans-serif}
.s-vlak{fill:var(--papier);stroke:var(--d-grijs);stroke-width:1}
.s-beeld{fill:none;stroke:var(--d-grijs);stroke-width:1;opacity:.45}
.s-marge{fill:none;stroke:var(--d-grijs);stroke-width:1;stroke-dasharray:3 3}
.s-kop{fill:var(--d-grijs);opacity:.55}
.s-logo{fill:var(--papier);stroke:var(--fg);stroke-width:1.5}
.s-knoptekst{fill:#fff;opacity:.9}
.s-strook{fill:var(--d-tint-2)}
.s-strooktekst{fill:var(--fg-2);font-size:7.5px;letter-spacing:.09em}
.s-chevron{fill:none;stroke:var(--fg-2);stroke-width:1}

/* ---------- knoppen: de knopstudie van BMW (b_duo.knoppen, knop.js) ----------
   Boven de vergrote knop en de meting, daaronder echte knoppen op ware grootte. Hun maat staat inline, zoals de class hem
   zet; hier wat de class niet zet (positie, blauw, de tekst wit), zodat een knop ook zonder JavaScript klopt. De
   tekening volgt de inktkleur van de site; de knop houdt zijn blauw. */
.d-knoppen{display:grid;gap:clamp(44px,5.5vw,80px)}
.k-boven{display:grid;grid-template-columns:auto minmax(0,auto);justify-content:center;align-items:center;gap:clamp(32px,5vw,80px)}
.k-tekening,.k-meting,.k-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.k-tekening .d-fit{width:calc(var(--w) * 1px);max-width:100%}
.t-svg{display:block;overflow:visible;font-family:var(--font)}
.t-cap{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:5 4}
.t-wit{fill:none;stroke:#fff;stroke-width:1.5}
.t-staart{fill:none;stroke:#fff;stroke-width:1.5}
.t-maat{fill:none;stroke:var(--fg-2);stroke-width:1.25}
.t-getal{fill:var(--fg-2);font-size:17px;font-variant-numeric:tabular-nums}
.k-meting{align-items:stretch;max-width:100%}
.k-tabel-houder{overflow-x:auto;-webkit-overflow-scrolling:touch}
.k-tabel{margin-inline:auto;border-collapse:collapse;font-size:15px;line-height:1.3;font-variant-numeric:tabular-nums}
.k-tabel th,.k-tabel td{padding:12px 22px 12px 0;border-bottom:1px solid var(--lijn);text-align:left;white-space:nowrap;font-weight:400;color:var(--fg-2)}
.k-tabel th:last-child,.k-tabel td:last-child{padding-right:0}
.k-tabel thead th{padding-top:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;border-bottom-color:var(--lijn-2)}
.k-tabel tbody th,.k-tabel td:last-child{color:var(--fg);font-weight:500}
.k-groep{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.6vw,30px)}
.k-kop{margin:0;max-width:62ch;text-align:center;font-size:13px;line-height:1.4;color:var(--fg-2)}
.k-rij{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:28px clamp(28px,3.6vw,56px)}
/* de formaten in twee rijen van vier (de rechthoeken en de staande, dan de liggende), smal twee naast elkaar */
.k-rij--formaten{display:grid;grid-template-columns:repeat(4,auto);justify-items:center;gap:32px clamp(32px,4.4vw,72px)}
.k-stage{position:relative;flex:none}
.k-holder{position:absolute;left:0;bottom:0}
.k-stage .cta{position:absolute;left:0;top:0;overflow:hidden;border-radius:2px;cursor:default}
.k-stage .ctaBackground{position:absolute;inset:0;background:#1c69d4}
.k-stage .ctaCopyHolder{position:absolute;overflow:visible;pointer-events:none}
.k-stage svg{display:block;overflow:visible;fill:#fff}
@media (max-width:1100px){.k-boven{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .k-rij--formaten{grid-template-columns:repeat(2,auto)}
  /* de meting past dan nog net: kleiner, krapper, en de kop van een kolom mag over twee regels */
  .k-tabel{font-size:13px}
  .k-tabel th,.k-tabel td{padding-right:12px}
  .k-tabel thead th{white-space:normal;vertical-align:bottom}
}


/* ---------- smaller ---------- */
@media (max-width:980px){
  .d-intro,.d-hst__kop,.d-set__rooster{grid-template-columns:minmax(0,1fr)}
  .d-set__zij{position:static}
  .m-rij,.m-yt-rij,.m-buiten{grid-template-columns:minmax(0,1fr)}
  .m-rij .m-ph,.m-yt-rij .m-ph,.m-buiten .m-abri-fig{justify-self:center}
  .d-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-cijfers>div:nth-child(n+3){margin-top:18px;border-top:1px solid var(--lijn)}
}
@media (max-width:560px){
  .d-feiten{grid-template-columns:minmax(0,1fr)}
  /* het podium randloos, zoals de film: zo past een 336 x 280 op ware grootte, ook op een telefoon van 375 */
  /* met left en width, niet met negatieve marges: dan houdt een podium dat even vaststaat (de telefoon van NIO) zijn breedte */
  .d-podium{left:calc(-1 * var(--rand));width:calc(100% + 2 * var(--rand));border-inline:0;border-radius:0}
  .m-tel{width:min(300px,82vw)}
  .d-film{margin-inline:calc(-1 * var(--rand));border-radius:0}
}
.rustig .pagina-duo *{transition:none!important}

/* ronde 9: een schermafbeelding in een browservenster (de takeover van de Haastmakers uit de previewer), en een los beeld */
.d-beelden{display:grid;gap:clamp(28px,3.6vw,56px)}
.d-beeld{margin:0}
.m-browser--beeld{width:100%}
.m-browser--beeld img{display:block;width:100%;height:auto}
.d-beeld--los{justify-self:center;width:min(100%,760px)}
.d-beeld--los img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.d-beeld .d-onder a.d-opnieuw svg{width:13px;height:13px}

/* Ronde 10: de Haastmakers los op de pagina (b_duo.losse_haastmakers, haastmakers.js). Geen podium en geen kader: de band
   loopt over de volle breedte van het scherm, de vier staan in de opstelling van de 970 x 250, op ware grootte; onder
   1024 px die van de 320 x 100. Zonder script staan ze stil op hun plek. */
.d-podium.d-podium--los{left:0;width:auto;padding:0;border:0;border-radius:0;background:none}   /* ook op een telefoon in de kolom; de band zelf loopt door */
.d-los{position:relative;height:250px;width:var(--vb,100vw);margin-left:calc(50% - var(--vb,100vw) / 2);overflow:hidden;pointer-events:none}
.d-los__set{position:absolute;top:0;left:50%;width:970px;height:250px;margin-left:-485px}
.d-los__hm{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);width:300px;height:300px;transform:scale(var(--s));transform-origin:0 0}
.d-los__frame{position:absolute;inset:0;overflow:hidden}
.d-los__frame img{position:absolute;left:0;top:0;width:1800px;height:auto;max-width:none}
.d-los__ballon{position:absolute;left:65px;top:-28px;width:110px;height:110px;max-width:none}
.d-podium--los .d-onder{margin-top:clamp(14px,2vw,24px)}
@media (max-width:1023px){
  .d-los{height:100px}
  .d-los__set{width:320px;height:100px;margin-left:-160px}
  .d-los__hm{left:calc(var(--xk) * 1px);top:calc(var(--yk) * 1px);transform:scale(var(--sk))}
  .d-los__ballon{display:none}
}

/* ---------- v14: Unox ----------
   drie per rij (de negen festivals in 300 x 250): 3 x 300 plus twee keer de tussenruimte */
.d-uitingen--drie{max-width:1020px;margin-inline:auto}
/* De Dagkoerier in de zomer: een hittegolf in plaats van de herfststorm (b_duo.ARTIKELEN) */
.m-img--zon{background:radial-gradient(circle at 74% 26%,#fffbe6 0 5%,#ffe58a 5.5% 9%,rgba(255,214,90,.45) 9.5% 15%,transparent 16%),linear-gradient(180deg,#5fb2e6 0%,#a9dcf5 58%,#e9cf86 58%,#d7b05f 100%)}
.m-img--zon::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(#cfa451,#a97d33);clip-path:polygon(0 30%,18% 18%,34% 34%,52% 14%,70% 30%,86% 16%,100% 26%,100% 100%,0 100%)}
/* De takeover (b_duo.takeover): de browser op 1800 x 1100, de site 1100 breed in het midden, links en rechts een skin.
   De skin staat op de hoogte van het vlak (1056) en 45 pixels naar links; achter- en voorgrond op dezelfde plek, zoals in
   de uiting (de achtergrond is 20 pixels breder, voor zijn beweging). De beweging komt uit de uiting: achtergrond 20 en
   blik 10 pixels naar links en het blik 5 % groter in vijf seconden (hier op de schaal van het vlak: 14 en 7); de regel
   in de billboard komt na 0,6 s binnen. Hij loopt één keer als de takeover in beeld komt (duo.js: .is-aan). */
.m-browser--to{width:1800px;height:1100px}
.m-to{position:relative;height:1056px;overflow:hidden;background:#1b1b1b}
.m-to__set[hidden],.m-to__bbset[hidden]{display:none}
.m-to__skin{position:absolute;top:0;bottom:0;width:350px;overflow:hidden}
.m-to__skin--l{left:0}
.m-to__skin--r{right:0}
.m-to__skin img{position:absolute;top:0;left:-45px;height:100%;width:auto;max-width:none;user-select:none}
.m-to__fg{transform-origin:50% 55%}
.m-to__site{position:relative;width:1100px;height:100%;margin:0 auto;overflow:hidden;background:#fff}
.m-to__bb{display:flex;justify-content:center;padding:24px 0 4px}
.m-to__bbset{position:relative;width:970px;height:250px;overflow:hidden;background:#00233c}
.m-to__bbset img{position:absolute;inset:0;width:100%;height:100%}
.m-to__bbset::after{content:"";position:absolute;inset:0;border:1px solid #046eb9;pointer-events:none}
@keyframes m-to-bg{to{transform:translateX(-14px)}}
@keyframes m-to-fg{to{transform:translateX(-7px) scale(1.05)}}
@keyframes m-to-tekst{from{transform:translateY(5px);opacity:0}to{transform:none;opacity:1}}
:root:not(.no-js):not(.rustig) .m-to:not(.is-aan) .m-to__tekst{opacity:0}
.m-to.is-aan .m-to__bg{animation:m-to-bg 5s linear both}
.m-to.is-aan .m-to__fg{animation:m-to-fg 5s linear both}
.m-to.is-aan .m-to__tekst{animation:m-to-tekst .8s cubic-bezier(.19,1,.22,1) .6s both}
.rustig .m-to *,.no-js .m-to *{animation:none!important}
/* onder de browser: het bijschrift, de keuze van de set en Opnieuw afspelen */
.m-to__onder{justify-content:flex-start}
.m-to__onder>span{margin-right:auto}
.m-to__kies{display:flex;flex-wrap:wrap;gap:6px}
.m-to__knop{padding:8px 14px;border-radius:999px;background:var(--d-tint-2);color:var(--fg);font-size:13px;line-height:1;font-weight:500;letter-spacing:0;transition:background .4s var(--ease),color .4s}
.m-to__knop:hover{background:var(--or);color:var(--inkt-vast)}
.m-to__knop[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
/* De APTO (b_duo.apto, Haastmakers): de takeover zelf, live. Dezelfde browser als de takeover, met in elke skin en in
   de billboard een iframe; achter de skins de achtergrond van de pagina, tot de APTO begint. */
.m-to--apto{background:#e6eaee}
.m-to--apto .m-to__skin iframe{position:absolute;top:0;left:0;display:block;width:350px;height:1056px;border:0}
.m-apto__bb{position:relative;width:970px;height:250px}
.m-apto__bb iframe{display:block;width:970px;height:250px;border:0}
/* De Dagkoerier in de winter (de APTO liep in januari) */
.m-img--sneeuw{background:radial-gradient(circle at 12% 18%,#fff 0 .45%,transparent .75%),radial-gradient(circle at 31% 9%,#fff 0 .4%,transparent .7%),radial-gradient(circle at 47% 27%,#fff 0 .5%,transparent .8%),radial-gradient(circle at 66% 14%,#fff 0 .45%,transparent .75%),radial-gradient(circle at 83% 31%,#fff 0 .4%,transparent .7%),radial-gradient(circle at 92% 8%,#fff 0 .5%,transparent .8%),radial-gradient(circle at 22% 40%,#fff 0 .35%,transparent .65%),radial-gradient(circle at 74% 44%,#fff 0 .4%,transparent .7%),radial-gradient(circle at 39% 48%,#fff 0 .35%,transparent .65%),radial-gradient(circle at 57% 6%,#fff 0 .35%,transparent .65%),linear-gradient(180deg,#8ea4ba 0%,#c9d5e1 62%)}
.m-img--sneeuw::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(#fbfcfd,#d9e2ea);clip-path:polygon(0 34%,16% 20%,33% 32%,52% 12%,70% 28%,86% 18%,100% 26%,100% 100%,0 100%)}
.m-img--sneeuw::after{content:"";position:absolute;left:54%;right:12%;bottom:30%;height:28%;background:#55695d;clip-path:polygon(0 100%,7% 38%,14% 100%,20% 100%,31% 0,42% 100%,49% 100%,57% 46%,65% 100%,72% 100%,79% 60%,86% 100%)}