/* ═══════════════════════════════════════════════════════════════════
   Paginabehandeling voor de publieke pagina's.

   HET PROBLEEM DAT DIT OPLOST

   De kopbalk is zwart en het blad eronder was wit vanaf de eerste pixel.
   Daardoor leek de balk erop geplakt in plaats van erbij te horen, en
   voelde elke pagina als een los document in plaats van als onderdeel
   van een product.

   DE OPZET IS EEN RITME VAN DRIE BANDEN

   1. Donkere kop. Loopt door vanaf de balk, dus die twee worden samen
      één blok. Hier staat de titel en de inleiding.
   2. Lichte leesband. Lange tekst leest nu eenmaal beter op licht, en
      dat is waar deze pagina's voor bestaan.
   3. Donkere slotband. Sluit de pagina af en zet de twee routes naar
      een gesprek neer op een plek waar ze niet wegvallen.

   Dat is dezelfde afwisseling die de homepage al gebruikt. Nu gebruikt
   de rest van de site hem ook.

   GEEN ANIMATIE BIJ HET LADEN. Alles staat er meteen: wat je ziet als
   de pagina klaar is, is de hele pagina. Bewegende blokken die pas bij
   het scrollen verschijnen zien er in een opname leuk uit en kosten in
   de praktijk alleen maar geduld.
   ═══════════════════════════════════════════════════════════════════ */

.blad-kop{
  --bk-inkt:#F2F4FA;
  --bk-zacht:rgba(242,244,250,.62);
  --bk-blauw:#4D7CFF;
  position:relative;
  margin-top:-1px;            /* haarlijn tussen balk en kop wegwerken */
  padding:clamp(3.2rem,7vw,5.4rem) clamp(1.1rem,4vw,3rem) clamp(2.6rem,5vw,4rem);
  background:#06070D;
  overflow:hidden;
}
/* Een raster dat naar onderen uitdooft. Geen afbeelding, geen script --
   twee gradiënten en een mask. Het moet aanwezig zijn zonder dat je het
   opmerkt; zodra je het patroon bewust ziet, is het te sterk. */
.blad-kop::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 22% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 22% 0%,#000 10%,transparent 72%);
}
/* De blauwe gloed linksboven, dezelfde hoek als op de homepage. */
.blad-kop::after{
  content:"";position:absolute;left:-12%;top:-70%;width:70%;height:170%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,82,255,.30),transparent 70%);
  filter:blur(8px);
}
.blad-kop > *{position:relative;z-index:1}
.blad-kop-in{max-width:44rem;margin:0 auto}
.blad-kop .ar-oog,.blad-kop .oog{
  margin:0 0 .75rem;font:500 .71rem var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bk-blauw)}
.blad-kop h1{
  font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem);font-weight:900;letter-spacing:-.035em;
  line-height:1.04;color:#fff}
.blad-kop h1 .dot{color:var(--bk-blauw)}
.blad-kop .inleiding{
  margin:1.15rem 0 0;font-size:clamp(1rem,.96rem + .2vw,1.12rem);line-height:1.68;
  color:var(--bk-zacht);max-width:38rem}
.blad-kop .inleiding b{color:var(--bk-inkt);font-weight:600}

/* De leesband begint nu zonder eigen bovenmarge, want de kop levert die. */
main.ar.heeft-kop,main.oz.heeft-kop,main.hb.heeft-kop{padding-top:clamp(2rem,4vw,3rem)}

/* ── Slotband ──────────────────────────────────────────────────────
   Twee routes naast elkaar: de lage drempel en de hoge. Wie hier komt
   heeft de hele pagina gelezen, dus dit is de enige plek op een
   artikel waar een uitnodiging niet in de weg zit. */
.blad-slot{
  position:relative;margin-top:clamp(3rem,6vw,4.5rem);
  padding:clamp(2.4rem,5vw,3.6rem) clamp(1.1rem,4vw,3rem);
  background:#06070D;overflow:hidden}
.blad-slot::after{
  content:"";position:absolute;right:-10%;bottom:-90%;width:60%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,82,255,.22),transparent 70%)}
.blad-slot-in{position:relative;z-index:1;max-width:44rem;margin:0 auto}
.blad-slot h2{margin:0;font-size:clamp(1.4rem,3.4vw,1.9rem);font-weight:900;letter-spacing:-.03em;color:#fff}
.blad-slot p{margin:.8rem 0 0;font-size:.98rem;line-height:1.7;color:rgba(242,244,250,.62);max-width:34rem}
.blad-slot p b{color:#fff;font-weight:600}
.blad-knoppen{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.blad-knoppen a{
  display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.25rem;border-radius:11px;
  font:700 .92rem var(--display);text-decoration:none;white-space:nowrap;transition:filter .16s ease}
.blad-knoppen .hoofd{background:#0052FF;color:#fff;box-shadow:0 10px 30px rgba(0,82,255,.3)}
.blad-knoppen .hoofd:hover{filter:brightness(1.1)}
.blad-knoppen .bij{border:1px solid rgba(255,255,255,.18);color:rgba(242,244,250,.84)}
.blad-knoppen .bij:hover{border-color:rgba(255,255,255,.34);color:#fff}
.blad-klein{margin-top:1.1rem;font-size:.82rem;line-height:1.6;color:rgba(242,244,250,.4)}

@media (prefers-reduced-motion:reduce){.blad-knoppen a{transition:none}}