/* BannerBazen v13, ronde 8: privacy, cookies en voorwaarden (b_juridisch.py, juridisch.js).
   De kop zoals op de andere pagina's (kruimelpad, titel, lead), een rij naar de drie pagina's, en daaronder links een
   inhoudsopgave die meeloopt en rechts de tekst in een leesbare breedte. */

.jur-kop{padding-top:calc(var(--kop-h) + var(--tl-h) + clamp(40px,7vw,110px))!important;padding-bottom:clamp(40px,5vw,84px)!important}
.jur-kop .kruimel{margin-bottom:18px}
.jur-kop__lead{margin-top:clamp(18px,2.4vw,34px);max-width:40ch;font-size:clamp(21px,1.8vw,30px);line-height:1.28;
  letter-spacing:calc(-.015em * var(--krap) + var(--lucht));color:var(--fg-2)}
.jur-kop__meta{margin-top:20px;font-size:15px;color:var(--fg-3)}
/* ronde 11: op de Engelse pagina's, de Nederlandse tekst is leidend */
.jur-kop__taal{margin-top:10px;max-width:62ch;font-size:15px;line-height:1.45;color:var(--fg-2)}
.jur-kop__taal b{font-weight:500;color:var(--fg)}
.jur-kop__taal a{text-decoration:underline;text-underline-offset:.18em}
.jur-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,40px)}
.jur-nav a{display:inline-flex;align-items:center;height:38px;padding:0 17px;border:1px solid var(--lijn-2);border-radius:99px;
  font-size:15px;color:var(--fg);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.jur-nav a:hover{border-color:var(--fg)}
.jur-nav a[aria-current]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.jur-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* de inhoudsopgave links, de tekst rechts */
.jur{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:clamp(30px,6vw,120px);align-items:start;
  padding:0 var(--rand) clamp(80px,10vw,160px)!important}
.jur__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}
.jur__inhoud::-webkit-scrollbar{display:none}
.jur__inhoud ol{list-style:none;margin:14px 0 0;padding:0}
.jur__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}
.jur__inhoud a span{font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
.jur__inhoud a:hover,.jur__inhoud a[aria-current]{color:var(--fg)}
.jur__inhoud a[aria-current] span{color:var(--or-tekst)}
.jur__inhoud a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.jur__tekst{max-width:74ch;min-width:0}
.jur__sectie{padding-top:clamp(40px,4.5vw,64px);scroll-margin-top:calc(var(--kop-h) + var(--tl-h) + 20px)}
.jur__sectie:first-child{padding-top:0}
.jur__nr{margin-bottom:10px}
.jur__sectie h2{margin:0 0 18px;font-size:clamp(27px,2.3vw,40px);line-height:1.06;font-weight:500;letter-spacing:calc(-.03em * var(--krap) + var(--lucht))}
.jur__sectie p,.jur__sectie li{font-size:clamp(17px,1.15vw,19px);line-height:1.6;color:var(--fg-2)}
.jur__sectie p+p,.jur__sectie p+ul,.jur__sectie ul+p,.jur__sectie p+.jur-def,.jur__sectie div+p{margin-top:.8em}
.jur__sectie ul{margin:0;padding:0;list-style:none}
.jur__sectie li{position:relative;padding-left:1.4em}
.jur__sectie li::before{content:"";position:absolute;left:0;top:.8em;width:.7em;height:2px;background:var(--or)}
.jur__sectie li+li{margin-top:.35em}
.jur__sectie a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.jur__sectie a:hover{text-decoration-color:var(--or)}

/* het adres als kaartje */
.jur-adres{margin-top:18px!important;padding:20px 22px;border:1px solid var(--lijn);border-radius:10px;background:var(--vlak);color:var(--fg)!important;
  font-size:17px!important;line-height:1.55!important}

/* doelen (privacy) en soorten (cookies): kaarten */
.jur-doelen,.jur-groepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:22px}
.jur-doel,.jur-groep{padding:22px 22px 24px;border:1px solid var(--lijn);border-radius:10px;background:var(--vlak)}
.jur-doel h3,.jur-groep h3{margin:0 0 14px;font-size:21px;line-height:1.15;font-weight:500;letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.jur-doel dl{display:grid;gap:12px;margin:0}
.jur-doel dt{font-size:11.5px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--fg-3)}
.jur-doel dd{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--fg-2)}
.jur-groep p{font-size:16px!important;line-height:1.5!important}
.jur-groep__status{display:inline-block;margin-bottom:14px;padding:4px 10px;border-radius:99px;font-size:12px!important;line-height:1.3!important;
  font-weight:500;letter-spacing:.04em;background:color-mix(in srgb,var(--or) 14%,transparent);color:var(--fg)!important}
.jur-groep--aan .jur-groep__status{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.jur-groep__n{display:inline-block;margin-top:14px;font-size:15px}

/* de definities in artikel 1 */
.jur-def{display:grid;gap:10px;margin:0}
.jur-def div{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:16px;padding-top:10px;border-top:1px solid var(--lijn)}
.jur-def dt{font-size:17px;font-weight:500;color:var(--fg)}
.jur-def dd{margin:0;font-size:clamp(17px,1.15vw,19px);line-height:1.6;color:var(--fg-2)}

/* tabellen: de cookies en wat de site zelf onthoudt */
.jur-tabel-rol{margin-top:16px;overflow-x:auto}
.jur-tabel{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.jur-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)}
.jur-tabel td{padding:12px 16px 12px 0;border-bottom:1px solid var(--lijn);vertical-align:top;color:var(--fg-2)}
.jur-tabel td:first-child{color:var(--fg);font-weight:500;white-space:nowrap}
.jur-tabel--cookies{table-layout:fixed}
.jur-tabel--cookies th:nth-child(1){width:23%}.jur-tabel--cookies th:nth-child(2){width:20%}.jur-tabel--cookies th:nth-child(4){width:19%}
.jur-tabel--cookies td:first-child{white-space:normal;overflow-wrap:anywhere}
.jur-tabel--cookies td:last-child{white-space:normal}
.jur-tabel td:last-child{white-space:nowrap;padding-right:0}
.jur-vast h3{margin:34px 0 0;font-size:20px;font-weight:500;letter-spacing:calc(-.02em * var(--krap) + var(--lucht));scroll-margin-top:calc(var(--kop-h) + var(--tl-h) + 20px)}
.jur-vast h3 span{margin-left:8px;font-size:14px;font-weight:400;color:var(--fg-3)}
.jur-vast__noot{margin-top:14px;font-size:15px!important;color:var(--fg-3)!important}
.jur-vast[hidden]{display:none}
.jur-cookiebot:empty{display:none}
.jur-cookiebot{margin-top:18px;font-size:16px;color:var(--fg-2)}

/* de knop naar je cookiekeuze */
.jur-keuze{margin-top:22px}
.jur-keuze__melding{margin-top:12px;font-size:15px!important;color:var(--fg-3)!important}
.jur-keuze__melding:empty{display:none}

@media (max-width:1023px){
  .jur{grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vw,56px)}
  .jur__inhoud{position:static;max-height:none}
  .jur__inhoud ol{columns:2;column-gap:28px}
  .jur__inhoud li{break-inside:avoid}
}
@media (max-width:759px){
  .jur__inhoud ol{columns:1}
  .jur__inhoud a{padding:7px 0;font-size:14.5px}
  .jur-def div{grid-template-columns:minmax(0,1fr);gap:4px}
  /* de tabellen als lijst: elke rij een blok, met de kop van de kolom ervoor */
  .jur-tabel thead{display:none}
  .jur-tabel,.jur-tabel tbody,.jur-tabel tr,.jur-tabel td{display:block;width:100%}
  .jur-tabel tr{padding:12px 0;border-bottom:1px solid var(--lijn)}
  .jur-tabel td{padding:2px 0;border:0;white-space:normal!important}
  .jur-tabel td:first-child{margin-bottom:4px;font-size:16px}
  .jur-tabel td:not(:first-child)::before{content:attr(data-kop) ": ";color:var(--fg-3)}
}