/* BannerBazen v13, ronde 9: de kennisartikelen, de gidsen, /kennis/, de FAQ, contact en het overzicht van de vakken
   (b_kennis.py). Een artikel: de kop zoals op de andere pagina's (kruimelpad, titel, lead), de kopfoto over de breedte,
   dan links een inhoudsopgave die meeloopt en rechts de tekst in een leesbare breedte. Uitingen staan op het grijze
   podium van de cases (duo.css), op ware grootte. */

.pagina-kennis-artikel,.pagina-kennis{
  --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);
  --art-tekst:760px;
}

/* ---------- de kop ---------- */
.art-kop,.faq-kop,.ct-kop,.ex-kop{padding:calc(var(--kop-h) + var(--tl-h) + clamp(40px,7vw,110px)) var(--rand) clamp(36px,4.4vw,72px)!important}
.art-kop .kruimel,.faq-kop .kruimel{margin-bottom:18px}
.ct-kop>.label,.ex-kop>.label{margin-bottom:18px}
.art-kop__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;margin-bottom:clamp(16px,1.8vw,26px)}
.art-kop__meta b{color:var(--or-tekst);font-weight:500}
.art-kop__titel{font-size:clamp(40px,5.4vw,104px);line-height:.98;max-width:18ch}
.art-kop__lead,.faq-kop__lead,.ct-kop__lead,.ex-kop__lead{margin-top:clamp(18px,2.4vw,34px);max-width:44ch;font-size:clamp(20px,1.6vw,27px);
  line-height:1.3;letter-spacing:calc(-.015em * var(--krap) + var(--lucht));color:var(--fg-2)}
.art-kop__lead p+p{margin-top:.6em}
.art-auteur{display:flex;align-items:center;gap:12px;margin-top:clamp(22px,2.6vw,36px)}
.art-auteur img{flex:none;width:48px;height:48px;border-radius:50%;background:var(--offwit)}
.art-auteur b{display:block;font-size:16px;font-weight:500;line-height:1.25}
.art-auteur span span{display:block;font-size:14px;line-height:1.3;color:var(--fg-3)}

/* de kopfoto: over de volle breedte van de inhoud */
.art-beeld{margin:0 var(--rand);border-radius:6px;overflow:hidden;background:var(--offwit)}
.art-beeld img{display:block;width:100%;height:auto}

/* ---------- links de inhoudsopgave, rechts de tekst ---------- */
.art{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(30px,6vw,120px);align-items:start;
  padding:clamp(48px,6vw,96px) var(--rand) clamp(72px,8vw,128px)}
.art__inhoud{position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 24px);max-height:calc(100svh - var(--kop-h) - var(--tl-h) - 48px);
  overflow:auto;scrollbar-width:none}
.art__inhoud::-webkit-scrollbar{display:none}
.art__inhoud ol{list-style:none;margin:14px 0 0;padding:0}
.art__inhoud a{display:grid;grid-template-columns:2.6ch minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--lijn);font-size:15px;
  line-height:1.3;color:var(--fg-3);text-decoration:none;transition:color .2s}
.art__inhoud a span{font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
.art__inhoud a:hover,.art__inhoud a[aria-current]{color:var(--fg)}
.art__inhoud a[aria-current] span{color:var(--or-tekst)}
.art__inhoud a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.art__tekst{min-width:0;max-width:var(--art-tekst)}

/* een gids: één kolom, de tekst in leesbreedte, de uitingen op het podium over de hele breedte */
.art--gids{grid-template-columns:minmax(0,1fr)}
.art--gids .art__tekst{max-width:none}
.art--gids .art__tekst>*:not(.art-podium):not(.art-fig):not(.fk){max-width:var(--art-tekst)}   /* .fk: de formaatkiezer (formaatkiezer.css) */
.art--gids .art-fig{max-width:min(100%,1040px)}
.art-verder{margin-top:clamp(40px,5vw,72px);max-width:var(--art-tekst)}
.art-verder ul{list-style:none;margin:12px 0 0;padding:0}
.art-verder li{border-top:1px solid var(--lijn)}
.art-verder li:last-child{border-bottom:1px solid var(--lijn)}
.art-verder a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font-size:clamp(18px,1.3vw,21px);text-decoration:none}
.art-verder a:hover{color:var(--or-tekst)}

/* ---------- de tekst ---------- */
.art__tekst>*+*{margin-top:1em}
.art__tekst p,.art__tekst li{font-size:clamp(18px,1.25vw,20px);line-height:1.62;color:var(--fg-2)}
.art__tekst strong{color:var(--fg);font-weight:500}
.art__tekst em{font-style:italic}
.art__tekst a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art__tekst a:hover{text-decoration-color:var(--or)}
/* v16, 5 november: de pdf-link en de pijl-link hebben hun eigen lijn eronder; in een artikel of gids kwam er een onderstreping
   bij (twee lijnen onder Download het briefingsformulier op /iab-banners/), zoals eerder al op /faq/ */
.art__tekst a:is(.pdf-link,.pijl-link){text-decoration:none}
.art__h2{margin-top:clamp(56px,6vw,96px)!important;font-size:clamp(30px,2.6vw,46px);line-height:1.04;font-weight:500;color:var(--fg);
  letter-spacing:calc(-.03em * var(--krap) + var(--lucht));text-wrap:balance;scroll-margin-top:calc(var(--kop-h) + var(--tl-h) + 20px)}
.art__tekst>.art__h2:first-child{margin-top:0!important}
.art__h3{margin-top:2em!important;font-size:clamp(21px,1.6vw,26px);line-height:1.2;font-weight:500;color:var(--fg);
  letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.art__h2+.art__h3{margin-top:1.2em!important}
.art__h3+p,.art__h2+p{margin-top:.7em}
.art__tekst ul{list-style:none;padding:0}
.art__tekst ul li{position:relative;padding-left:1.4em}
.art__tekst ul li::before{content:"";position:absolute;left:0;top:.8em;width:.7em;height:2px;background:var(--or)}
.art__tekst ol{padding-left:1.5em}
.art__tekst ol li{padding-left:.3em}
.art__tekst ol li::marker{color:var(--or-tekst);font-weight:500;font-variant-numeric:tabular-nums}
.art__tekst li+li{margin-top:.4em}
.art__tekst pre{margin-top:1.2em;padding:18px 22px;overflow:auto;border-radius:6px;border-left:3px solid var(--or);background:#1D1D1B;
  color:#F2F2EF;font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.art__tekst pre+pre{margin-top:10px}

/* tabellen */
.art-tabel-rol{margin-top:1.4em;overflow-x:auto}
.art-tabel{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.art-tabel th{padding:0 16px 10px 0;border-bottom:1px solid var(--lijn-2);text-align:left;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--fg-3);vertical-align:bottom}
.art-tabel td{padding:12px 16px 12px 0;border-bottom:1px solid var(--lijn);vertical-align:top;color:var(--fg-2)}
.art-tabel td:first-child{color:var(--fg);font-weight:500}

/* beelden in de tekst */
.art-fig{margin-top:clamp(28px,3vw,48px)!important;margin-bottom:clamp(8px,1vw,16px)}
.art-fig img{display:block;width:100%;height:auto;border-radius:6px;background:var(--offwit)}
.art-fig--foto{overflow:hidden;border-radius:6px}   /* v14, 23 oktober: het masker waarin de foto meeschuift (site.css, foto-schuif) */

/* ---------- uitingen en video op het podium (de opmaak van de cases, duo.css) ---------- */
.art-podium,.art-video{margin-top:clamp(32px,3.6vw,56px)!important;margin-bottom:clamp(8px,1vw,16px)}
.art-podium{padding:clamp(20px,3vw,44px);border:1px solid var(--lijn);border-radius:4px;background:var(--d-podium)}
.art-podium .d-uitingen{gap:clamp(20px,2.6vw,40px)}
.art-podium .d-uitingen:has(.d-fit--kubus){column-gap:clamp(56px,6vw,96px)}   /* v14, 24 oktober: ruimte voor draaiende SwipeCubes (duo.css) */
.art-podium .m-ph__onder a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* v14, 22 oktober: een onderschrift onder merk en maat (de gidsen); de uitingen dan bovenaan gelijk */
.d-uitingen--bij{align-items:flex-start}
.d-uiting--bij .m-ph__onder{width:100%;max-width:min(calc(var(--w) * 1px),34em)}
.m-ph__onder .d-uiting__bij{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--fg-2);text-wrap:pretty}
.m-ph__onder .d-uiting__bij b{display:inline;font-weight:500;color:var(--fg)}
.art-pdf{margin-top:1.1em}
.art-video__beeld{position:relative;overflow:hidden;border-radius:4px;background:#000}
.art-video__beeld video{display:block;width:100%;height:100%;object-fit:cover}
.art-video--kader{padding:clamp(20px,3vw,44px);border:1px solid var(--lijn);border-radius:4px;background:var(--d-podium)}
.art-video--kader .art-video__beeld{max-width:calc(var(--w) * 1px);margin-inline:auto}

/* tekst met een uiting ernaast */
.art-naast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,48px);align-items:start;margin-top:clamp(40px,4.4vw,64px)!important}
.art-naast--links{grid-template-columns:auto minmax(0,1fr)}
.art-naast--links .art-naast__podium{order:-1}
.art-naast__tekst>*+*{margin-top:1em}
.art-naast__tekst>.art__h2{margin-top:0!important}
.art-naast__podium{padding:clamp(18px,2.4vw,32px);border:1px solid var(--lijn);border-radius:4px;background:var(--d-podium)}
.art-naast__podium .d-onder{margin-top:12px}

/* ---------- lees ook ---------- */
.art-meer{padding-top:0!important}
.art-meer__raster{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.art-meer__alles{margin-top:clamp(28px,3vw,44px)}

/* ---------- /kennis/: de gidsen ---------- */
.kennis-gidsen{padding-top:0!important}
.gids-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.gids-kaart{display:flex;flex-direction:column;gap:10px;height:100%;padding:24px 24px 22px;border:1px solid var(--lijn);border-radius:10px;
  background:var(--vlak);text-decoration:none;transition:border-color .25s}
.gids-kaart:hover{border-color:var(--fg)}
.gids-kaart__titel{font-size:clamp(22px,1.7vw,28px);line-height:1.1;font-weight:500;letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.gids-kaart__tekst{font-size:16px;line-height:1.5;color:var(--fg-2)}
.gids-kaart__lees{display:inline-flex;align-items:center;gap:.4em;margin-top:auto;padding-top:8px;font-size:15px}
.gids-kaart:hover .pijl{transform:translateX(4px)}
.kennis-gidsen__faq{margin-top:clamp(28px,3vw,44px)}

/* ---------- /faq/ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,6vw,120px);align-items:start;padding-top:0!important}
.faq__lijst{max-width:900px}
.faq .vr__a p+p{margin-top:.6em}
.faq .vr__a a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* v14, 22 oktober: naast de vragen de kaart en daaronder de prijslijst (b_prijslijst.py); samen blijven ze staan */
.faq__rechts{position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 24px);display:grid;gap:28px}
@media (max-height:719px){.faq__rechts{position:static}}
.faq__zij{padding:22px;border:1px solid var(--lijn);border-radius:10px;background:var(--vlak)}
.faq__zij p:not(.label){margin-top:10px;font-size:16px;line-height:1.5;color:var(--fg-2)}
.faq__zij a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
/* v14, 22 oktober: de vragen in groepen, met een h2 per groep en zonder nummers */
.faq-kop__lead{max-width:52ch}
.faq__groep+.faq__groep{margin-top:clamp(48px,5.4vw,88px)}
.faq__h2{margin-bottom:clamp(10px,1.2vw,18px);font-size:clamp(28px,2.4vw,42px);line-height:1.04;font-weight:500;color:var(--fg);
  letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.faq--groepen .vr summary{grid-template-columns:minmax(0,1fr) 32px}
.faq--groepen .vr__a{padding:0 44px 24px 0}
.faq .vr__a a:is(.pdf-link,.pijl-link){text-decoration:none}

/* ---------- /contact/ ---------- */
.ct-kop__knoppen{margin-top:clamp(24px,3vw,40px)}
.ct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:0!important}
/* v16, 5 november: zes vakken in rijen die vol zijn (6, 3, 2 of 1 naast elkaar). Met auto-fill stond Gegevens op 1440 alleen
   op een tweede rij */
@media (min-width:1700px){.ct{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:900px){.ct{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ct{grid-template-columns:minmax(0,1fr)}}
.ct__vak{padding:24px;border:1px solid var(--lijn);border-radius:10px;background:var(--vlak)}
.ct__vak ul{list-style:none;margin:12px 0 0;padding:0}
.ct__vak li+li{margin-top:6px}
.ct__vak a{display:inline-flex;align-items:center;gap:.35em;font-size:clamp(18px,1.3vw,21px);text-decoration:none;border-bottom:1px solid var(--lijn-2)}
.ct__vak a .pijl{width:.75em;height:.75em}
.ct__vak a:hover{border-color:var(--fg)}
.ct__vak li span{display:block;font-size:13px;color:var(--fg-3)}
.ct__vak address,.ct__vak p:not(.label){margin-top:12px;font-style:normal;font-size:clamp(18px,1.3vw,21px);line-height:1.45}
.ct__vak .pijl-link{font-size:15px;border-bottom:0}
.ct__vak--klein p:not(.label){font-size:16px;color:var(--fg-2)}

/* ---------- /expertise/ ---------- */
.ex-lijst{padding-top:0!important}
.ex-lijst ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.ex-rij{border-bottom:1px solid var(--lijn)}
.ex-rij a{display:grid;grid-template-columns:3ch minmax(0,1fr) minmax(0,1.2fr) 32px;gap:clamp(14px,2.4vw,40px);align-items:baseline;
  padding:clamp(20px,2.2vw,32px) 0;text-decoration:none}
.ex-rij__nr{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ex-rij__naam{font-size:clamp(26px,2.6vw,46px);line-height:1.02;font-weight:500;letter-spacing:calc(-.03em * var(--krap) + var(--lucht))}
.ex-rij__tekst{font-size:16px;line-height:1.5;color:var(--fg-2)}
.ex-rij__pijl{justify-self:end;align-self:center}
.ex-rij a:hover .ex-rij__naam{color:var(--or-d)}
.ex-rij a:hover .pijl{transform:translateX(4px)}

@media (max-width:1023px){
  .art{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,48px)}
  .art__inhoud{position:static;max-height:none}
  .art__inhoud ol{columns:2;column-gap:28px}
  .art__inhoud li{break-inside:avoid}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq__rechts{position:static}
  .ex-rij a{grid-template-columns:3ch minmax(0,1fr) 28px}
  .ex-rij__tekst{grid-column:2 / 3}
  .ex-rij__pijl{grid-row:1;grid-column:3}
}
@media (max-width:759px){
  .art__inhoud ol{columns:1}
  .faq--groepen .vr__a{padding:0 0 22px}
  .art-naast,.art-naast--links{grid-template-columns:minmax(0,1fr)}
  .art-naast--links .art-naast__podium{order:0}
  .art-naast__podium{justify-self:center;width:100%}
  /* tabellen als lijst: elke rij een blok, met de kop van de kolom ervoor */
  .art-tabel thead{display:none}
  .art-tabel,.art-tabel tbody,.art-tabel tr,.art-tabel td{display:block;width:100%}
  .art-tabel tr{padding:12px 0;border-bottom:1px solid var(--lijn)}
  .art-tabel td{padding:2px 0;border:0}
  .art-tabel td:first-child{margin-bottom:4px;font-size:16px}
  .art-tabel td[data-kop]:not(:first-child)::before{content:attr(data-kop) ": ";color:var(--fg-3)}
  .art__tekst pre{font-size:13px;padding:14px 16px}
}

/* v14, 24 oktober: geanimeerde grafieken (kennis-grafieken.js). Ruimte vasthouden tot het script er is */
.art-fig--grafiek{max-width:var(--art-tekst)}
bb-grafiek{display:block}
bb-grafiek:not(:defined){aspect-ratio:16/9}
bb-grafiek noscript img{display:block;width:100%;height:auto;border-radius:6px}

/* v15: de vermelding bij de AI-foto's (b_kennis.AI_BEELD) en de regel onder de intro op /kennis/ */
.art-ai{margin-top:10px;font-size:13px;line-height:1.4;color:var(--fg-2)}
.art-beeld + .art-ai{margin-inline:var(--rand)}
.kennis-kop__ai{margin-top:14px;font-size:14px;line-height:1.45;color:var(--fg-2);max-width:56ch}

/* 27 oktober: meer voorbeelden per formaat op /display-banners-examples/ (b_kennis.voorbeelden_per_formaat) */
.dbv{max-width:var(--max,1440px);margin:0 auto}
.dbv__groep{margin-top:clamp(40px,5vw,72px)}
.dbv__kop{font-size:clamp(18px,1.6vw,22px);font-weight:500;margin:0 0 24px}
.dbv__alle{margin-top:clamp(40px,5vw,64px)}