/*
 * Voor wie.
 *
 * DE DUBBELE HERO: style.css zet #elheader op 368px met hero.jpg als
 * achtergrond. Op elke pagina met een eigen dr-hero staat die er dus boven -
 * twee hero's onder elkaar. De regel hieronder haalt de oude weg.
 *
 * Onderaan staat dezelfde regel voor alle pagina's die we nog maken, zodat
 * u er niet elke keer aan hoeft te denken.
 */

.dr-voorwie #elheader{height:auto;min-height:0;background:#fff;border-bottom:none}

.dr-hero--kort .dr-hero__inner{padding-block:74px 78px}
.dr-hero--kort .dr-hero__title{max-width:18ch}

/* ── de drie kaarten bovenaan ─────────────────────────────── */
.dr-wie{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dr-wie__kaart{display:flex;flex-direction:column;gap:9px;background:#fff;
  border:1px solid var(--line,rgba(23,40,155,.13));
  border-top:3px solid var(--blue,#17289B);border-radius:16px;
  padding:26px 28px;text-decoration:none;color:inherit;transition:.16s}
.dr-wie__kaart:hover{transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(10,16,40,.1);color:inherit}
.dr-wie__label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue,#17289B)}
.dr-wie__kaart b{font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;
  color:var(--ink,#1A1D2E);line-height:1.3}
.dr-wie__tekst{font-size:15px;color:var(--muted,#5A607A);line-height:1.55;flex:1}
.dr-wie__meer{font-size:14px;color:var(--blue,#17289B);margin-top:4px}

/* ── blokken binnen een sectie ────────────────────────────── */
.dr-blokken{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.dr-blok{background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-radius:14px;padding:24px 26px}
.dr-section--white .dr-blok{background:var(--surface,#F4F6FB)}
.dr-blok b{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:17px;margin-bottom:7px;color:var(--ink,#1A1D2E)}
.dr-blok p{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted,#5A607A)}

/* ── de korting ──────────────────────────────────────────── */
.dr-korting{display:flex;align-items:center;gap:26px;margin-top:24px;
  background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-left:4px solid var(--blue,#17289B);border-radius:0 16px 16px 0;
  padding:26px 30px}
.dr-korting__cijfer{flex:none;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(34px,5vw,48px);letter-spacing:-.03em;color:var(--blue,#17289B);
  line-height:1}
.dr-korting b{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:18px;margin-bottom:5px;color:var(--ink,#1A1D2E)}
.dr-korting p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted,#5A607A)}

/* ── het ongewone werk ───────────────────────────────────── */
.dr-bijzonder{margin-top:26px;background:var(--surface,#F4F6FB);
  border:1px solid var(--line,rgba(23,40,155,.13));border-radius:16px;
  padding:28px 30px}
.dr-bijzonder b{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:18px;margin-bottom:7px;color:var(--ink,#1A1D2E)}
.dr-bijzonder p{margin:0 0 16px;font-size:15.5px;line-height:1.6;
  color:var(--muted,#5A607A);max-width:70ch}
.dr-bijzonder ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.dr-bijzonder li{position:relative;padding-left:26px;font-size:15.5px;
  line-height:1.55;color:var(--ink,#1A1D2E)}
.dr-bijzonder li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--blue,#17289B);font-weight:700}

.dr-voorwie__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

@media (max-width:1000px){
  .dr-wie{grid-template-columns:1fr}
  .dr-blokken{grid-template-columns:1fr}
}
@media (max-width:600px){
  .dr-korting{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ─────────────────────────────────────────────────────────────
   DE OUDE KOPSTROOK OP ELKE NIEUWE PAGINA
   Staat hier zodat u er bij een volgende pagina niet aan hoeft te
   denken: voeg de bodyclass toe aan deze lijst en het is geregeld.
   ───────────────────────────────────────────────────────────── */
.dr-voorwie #elheader,
.dr-brands #elheader,
.dr-analyse #elheader,
.dr-terms #elheader,
.dr-toegang #elheader,
.dr-wizard #elheader,
.dr-over #elheader,
.dr-downloads #elheader{height:auto;min-height:0;background:#fff;
  border-bottom:none;padding:0}

/* Kaarten bovenaan: doelgroep-label sterker, titel minder zwaar */
.dr-wie .dr-wie__label{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:0;text-transform:none;
  color:var(--blue,#17289B);line-height:1.3;
}
.dr-wie .dr-wie__kaart b{
  font-weight:600;font-size:20px;
  letter-spacing:-.01em;word-spacing:.2em;line-height:1.25;
  color:var(--ink,#1A1D2E);
}