/* ===== gedeeld door de juridische paginas ===== */
/* ==========================================================================
   Vierde paginafamilie: de juridische pagina's (4zzj, versoberd in 4zzk).
   Wordt door bouw.py geladen zodra een pagina een .jrhero heeft.

   De user, 29-09: *"Het mag wat minder mooi in vakken verdeeld zijn en wat meer
   saaie tekst wat ons gewoon vrijspeelt van heel veel gezeur achteraf."*
   Terecht. De eerste opzet had een donker kadertje met de kern en een raster met
   de bedrijfsgegevens; dat maakt er een ontworpen pagina van, en dat is precies
   wat een juridische tekst niet moet zijn. Weg: het donkere blok, het
   gegevensraster en de accentstreepjes voor de opsommingen.

   Wat blijft: een leeskolom, tussenkoppen, een datum en een inhoudsopgave op
   breed scherm. Die inhoudsopgave is geen versiering maar het enige wat een lange
   tekst bruikbaar maakt: niemand leest hem uit, men zoekt één ding.
   ========================================================================== */

.jrhero{background:var(--paper);color:var(--ink-2);
  padding:clamp(24px,2.6vw,40px) 0 clamp(20px,2.2vw,32px)}
.jrhero .wrap{max-width:74rem}
.jrhero h1{color:var(--ink);font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1.1;
  margin:clamp(10px,1.2vw,18px) 0 0;max-width:24ch;
  font-variation-settings:"wdth" 94,"wght" 740;letter-spacing:-.024em}
.jrmeta{margin-top:var(--r2);font-size:var(--t1);color:var(--ink-3)}

/* ---- de leeskolom. Alles links, niets gecentreerd, en de tussenkoppen alleen
   zwaarder gezet: geen lijnen, geen nummers, geen kleur. */
.jrtekst{max-width:70ch;margin:0;padding:clamp(20px,2.4vw,36px) 0 clamp(20px,2.4vw,36px)}
.jrtekst h2{color:var(--ink);font-size:var(--t3);line-height:1.22;
  margin:clamp(26px,3vw,44px) 0 0;font-variation-settings:"wght" 720;
  letter-spacing:-.016em}
.jrtekst h2:first-child{margin-top:0}
.jrtekst h3{color:var(--ink);font-size:var(--t2);margin:var(--r4) 0 0;
  font-variation-settings:"wght" 660}
.jrtekst p{color:var(--ink-2);font-size:var(--t2);line-height:1.7;margin:var(--r3) 0 0}
.jrtekst ul,.jrtekst ol{margin:var(--r3) 0 0;padding-left:1.35em;display:grid;gap:var(--r2)}
.jrtekst li{color:var(--ink-2);font-size:var(--t2);line-height:1.62}
.jrtekst li::marker{color:var(--ink-3)}
/* Geen regel voor <b>: in de lopende tekst staan geen vette woorden meer (user 29-09).
   Alleen de tussenkoppen mogen opvallen; de tekst leest als tekst. */
.jrtekst a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
/* Het adresblok is een gewone alinea met regelafbrekingen, geen raster. */
.jrtekst .adres{line-height:1.85}

/* ---- de kolom naast de tekst. Onder 1101px vervalt de inhoudsopgave. */
.jrlayout{display:grid;gap:clamp(20px,2.6vw,56px)}
@media (min-width:1101px){
  .jrlayout{grid-template-columns:minmax(0,70ch) minmax(0,1fr);align-items:start}
}
.jrindex{display:none}
@media (min-width:1101px){
  .jrindex{display:block;position:sticky;top:clamp(20px,2vw,32px); /* geen meelopende kopbalk meer (4zzw) */
    padding-top:clamp(22px,2.6vw,38px);max-width:32ch;justify-self:end}
  .jrindex .wat{display:block;font-size:var(--t1);color:var(--ink-3);
    padding-bottom:var(--r2)}
  .jrindex ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .jrindex a{color:var(--ink-2);text-decoration:none;font-size:var(--t1);
    line-height:1.4;display:block}
  .jrindex a:hover,.jrindex a:focus-visible{color:var(--accent);text-decoration:underline}
}