/* Leespagina's: privacy, cookies, en wat er later nog bijkomt.

   Dit zijn de enige pagina's op de site waar iemand een halve minuut aan één
   stuk leest. Het oude thema zette ze in dezelfde smalle kolom als de rest, op
   13px, met even veel ruimte tussen de alinea's als tussen de kopjes — dan weet
   je bij het scrollen niet meer waar een onderdeel begint of eindigt.

   Wat hier gebeurt: één leeskolom van zo'n 68 tekens breed (daarboven raakt het
   oog de volgende regel kwijt), groter lettertype, en hiërarchie die je ziet
   zonder te lezen — veel lucht vóór een kopje, weinig erna, zodat het kopje bij
   zijn eigen tekst hoort. */

.tekstblad{
  --leesbreedte:68ch;
  padding:calc(var(--band) + clamp(28px,6vh,72px)) var(--marge) clamp(60px,12vh,140px);
}

.tekstblad .leeskolom{max-width:var(--leesbreedte);margin:0 auto}

/* De paginatitel. Groot, maar niet schreeuwerig: dit is geen omslag. */
.tekstblad h1.titel{
  font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-.02em;
  font-weight:700;margin:0 0 clamp(10px,1.6vh,18px);
  position:static;width:auto;height:auto;margin-left:0;clip:auto;overflow:visible;
  white-space:normal;
}

/* De aanhef onder de titel: iets groter dan de lopende tekst, grijzer. */
.tekstblad .aanhef{
  font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:#55534e;
  margin:0 0 clamp(34px,5vh,56px);max-width:56ch;
}

.tekstblad h2{
  font-size:clamp(19px,1.9vw,25px);line-height:1.2;letter-spacing:-.012em;
  font-weight:700;margin:clamp(42px,6vh,72px) 0 10px;
}
.tekstblad h3{
  font-size:clamp(15px,1.25vw,17px);line-height:1.3;letter-spacing:-.005em;
  font-weight:700;margin:clamp(24px,3.2vh,34px) 0 6px;
}

.tekstblad p,
.tekstblad li{font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:#2a2926}
.tekstblad p{margin:0 0 1.05em}

.tekstblad ul{margin:0 0 1.3em;padding:0;list-style:none}
.tekstblad ul li{position:relative;padding-left:1.4em;margin-bottom:.5em}
/* Een streepje in plaats van een bolletje: dat past bij de rest van de site. */
.tekstblad ul li::before{content:'—';position:absolute;left:0;color:#9b9792}

/* Een lijst waarin elk punt een eigen kopje heeft, zoals de rechten hieronder. */
.tekstblad dl{margin:0 0 1.3em}
.tekstblad dt{font-weight:700;margin:1.1em 0 .25em;
  font-size:clamp(15px,1.15vw,17px);line-height:1.5}
.tekstblad dd{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:#2a2926}

.tekstblad a{color:inherit;text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:#bdb9b3;
  transition:text-decoration-color .2s ease}
.tekstblad a:hover{text-decoration-color:currentColor}

/* Het adresblok en andere korte feiten: links uitgelijnd, geen inspringing. */
.tekstblad address{font-style:normal;margin:0 0 1.05em;
  font-size:clamp(15px,1.15vw,17px);line-height:1.65}

/* Een kadertje voor wat je moet weten zonder de hele pagina te lezen. */
.tekstblad .lichtvak{
  background:#f4f2ee;border-radius:3px;
  padding:clamp(18px,2.6vh,26px) clamp(20px,2.4vw,30px);
  margin:0 0 clamp(34px,5vh,50px);
}
.tekstblad .lichtvak p:last-child{margin-bottom:0}

/* Wanneer is dit voor het laatst nagekeken. Hoort erbij: zonder datum weet een
   lezer niet of hij naar iets van vorig jaar kijkt. */
.tekstblad .datum{
  margin-top:clamp(48px,7vh,84px);padding-top:18px;border-top:1px solid #e3e0da;
  font-size:13px;color:#8a8681;
}

@media(max-width:820px){
  .tekstblad{--leesbreedte:none}
  .tekstblad h2{margin-top:clamp(34px,5vh,48px)}
}