/* Juridisch-strook in de footer — op alle pagina's gelijk.
   Eigen bestand met prefix .jur, net als menu.css, zodat het niet botst met de
   inline CSS van index.html / algemene-voorwaarden.html of met paidsure.css.
   De markup komt uit build_juridisch.py (footer_juridisch). */
.jur{max-width:1400px;margin:6vh auto 30px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px 4vw;align-items:start;color:#fff}
.footer .jur-kop h2,.jur .jur-kop h2{margin:0;font-family:Manrope,Arial,sans-serif;font-size:11px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#ff7a31}
.footer .jur-kop p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:#aeb8c9;max-width:230px}
.jur-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.jur-lijst li{display:flex;flex-direction:column;min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.035);transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,background .3s ease}
.jur-lijst li.huidig{border-color:rgba(255,122,49,.75)}
.jur-lees{display:block;flex:1;padding:18px 18px 14px;color:#fff;text-decoration:none;border:0}
.jur-nr{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;color:#ff7a31;font-variant-numeric:tabular-nums}
.jur-lees b{display:block;margin:10px 0 6px;font-family:"Space Grotesk",Manrope,sans-serif;font-size:19px;line-height:1.15;letter-spacing:-.02em;font-weight:700;hyphens:manual;-webkit-hyphens:manual}
.jur-lees small{display:block;font-size:12.5px;line-height:1.5;color:#aeb8c9}
.jur-lees:after{content:"Lees online \2192";display:block;margin-top:14px;font-size:12px;font-weight:800;color:#fff;opacity:.72;transition:opacity .25s ease}
.jur-lijst li.huidig .jur-lees:after{content:"Je leest dit nu";color:#ff7a31;opacity:1}
.jur-pdf{display:flex;align-items:center;gap:10px;margin:0 8px 8px;padding:10px 12px;min-height:44px;border-radius:12px;background:rgba(255,255,255,.07);color:#e3e8f0;font-size:12px;font-weight:800;letter-spacing:.04em;text-decoration:none;border:0;transition:background .25s ease,color .25s ease}
.jur-pdf .jur-meta{flex:1;font-weight:600;letter-spacing:0;color:#aeb8c9;transition:color .25s ease}
.jur-pdf i{font-style:normal;font-size:15px;line-height:1}
.jur-pdf:hover,.jur-pdf:focus-visible{background:#ff7a31;color:#fff}
.jur-pdf:hover .jur-meta,.jur-pdf:focus-visible .jur-meta{color:#fff}
.jur-lees:focus-visible,.jur-pdf:focus-visible{outline:2px solid #ff7a31;outline-offset:2px}
@media(hover:hover){
  .jur-lijst li:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
  .jur-lijst li.huidig:hover{border-color:#ff7a31}
  .jur-lees:hover:after{opacity:1}
}
@media(prefers-reduced-motion:reduce){.jur-lijst li{transition:none}.jur-lijst li:hover{transform:none}}
@media(max-width:1080px){
  .jur{grid-template-columns:minmax(0,1fr)}
  .jur-kop p{max-width:none}
  .jur-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* telefoon: compacte rijen — naam links, PDF-knop rechts; ondertitel en paginatal vallen weg */
@media(max-width:560px){
  .jur{margin-top:5vh;gap:18px}
  .jur-lijst{grid-template-columns:minmax(0,1fr);gap:8px}
  .jur-lijst li{flex-direction:row;align-items:center;border-radius:16px}
  .jur-lees{padding:14px 8px 14px 16px;min-width:0}
  .jur-lees b{font-size:17px;margin:4px 0 0}
  .jur-lees small{display:none}
  .jur-lees:after{content:"Lees online \2192";margin-top:4px;font-size:11.5px}
  .jur-lijst li.huidig .jur-lees:after{content:"Je leest dit nu"}
  .jur-pdf{flex:none;margin:8px;padding:10px 12px;gap:8px}
  .jur-pdf .jur-meta{display:none}
}

/* Documentpagina's (algemene voorwaarden, gebruikersvoorwaarden, privacy- en
   cookiebeleid): PDF-link in de kop en wat de Word-bronnen extra nodig hebben. */
.masthead .meta a.jur-kop-pdf{color:#fff;border-bottom:1px solid #ff7a31;padding-bottom:2px;transition:color .2s ease}
.masthead .meta a.jur-kop-pdf span{color:#8f9db5;font-weight:700}
.masthead .meta a.jur-kop-pdf:hover{color:#ff7a31}
.voorwoord{background:#fff;border:1px solid rgba(13,27,52,.18);border-radius:22px;padding:24px 30px;margin:0 0 7vh}
.voorwoord p.lead{margin:0 0 6px}.voorwoord p.lead:last-child{margin:0}
.art h3{font-family:"Space Grotesk",Manrope,sans-serif;font-size:clamp(20px,1.6vw,24px);line-height:1.15;letter-spacing:-.02em;margin:36px 0 14px;color:#0d1b34;hyphens:none;-webkit-hyphens:none}
.art h3 span{color:#ff7a31;margin-right:12px;font-variant-numeric:tabular-nums}
.art h2+h3{margin-top:4px}
.art p.lead+p.lead{margin-top:-6px}
.art p.lead a,.art ol.items a,.art dd a{border-bottom:1px solid #ff7a31}
ul.sub.los{margin:0 0 20px}
.art ol.items+p.lead,.art ul.sub+p.lead,.art dl.ident+p.lead{margin-top:14px}
@media(max-width:560px){.voorwoord{padding:20px}}
/* "Gebruikersvoorwaarden" is op 44px breder dan een telefoon; de h1 heeft een &shy;,
   en die werkt alleen met hyphens:manual (hyphens:none negeert ook zachte afbrekingen) */
header.masthead h1{hyphens:manual;-webkit-hyphens:manual}
