:root{
  --ink:#16201c; --zacht:#55605a; --lijn:#d9d2c6; --lijn-licht:#ece6db;
  --papier:#fdfbf7; --wit:#fff;
  --groen:#26543f; --groen-licht:#eef3f0; --zand:#f6f1e8;
  --accent:#b4693a; --accent-licht:#fbf1e8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#e9e4da;color:var(--ink);
  font:400 9.5pt/1.55 Jost,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"tnum" 0}

/* --- vel = 1 A4 --- */
.vel{background:var(--papier);width:210mm;min-height:297mm;margin:0 auto 10mm;
  padding:16mm 16mm 14mm;position:relative;box-shadow:0 2px 14px rgba(0,0,0,.14)}
.vel--omslag{background:var(--groen);color:#f4efe6;padding:0;display:flex;flex-direction:column}

/* --- omslag --- */
.omslag__top{padding:26mm 18mm 0;flex:1}
.omslag__merk{font-size:8pt;letter-spacing:.24em;text-transform:uppercase;opacity:.72;font-weight:500}
.omslag__lijn{width:46mm;height:2px;background:#b98f5e;margin:9mm 0 8mm}
.vel--omslag h1{font:600 33pt/1.1 "Cormorant Garamond",Georgia,serif;margin:0 0 5mm;letter-spacing:-.01em}
.vel--omslag h1 em{font-style:normal;background:none;padding:0;color:#d9b98e}
.omslag__sub{font-size:12pt;font-weight:300;opacity:.86;max-width:120mm;line-height:1.55}
.omslag__voor{margin-top:14mm;font-size:9.5pt;opacity:.8;line-height:1.9}
.omslag__voor b{font-weight:500;opacity:1;display:block;font-size:8pt;letter-spacing:.18em;
  text-transform:uppercase;opacity:.6;margin-bottom:1mm}
.omslag__kern{background:rgba(0,0,0,.2);padding:9mm 18mm;margin-top:auto}
.omslag__kern p{margin:0;font-size:10.5pt;line-height:1.7;opacity:.92}
.omslag__kern strong{color:#e6c79b;font-weight:500}
.omslag__voet{padding:6mm 18mm 9mm;font-size:8pt;opacity:.6;display:flex;justify-content:space-between}

/* --- typografie --- */
h2{font:600 17pt/1.18 "Cormorant Garamond",Georgia,serif;margin:0 0 3mm;
  padding-bottom:2mm;border-bottom:1.5px solid var(--ink);letter-spacing:-.005em}
h2 .n{color:var(--groen);font-family:Jost,sans-serif;font-size:10pt;font-weight:600;
  display:block;letter-spacing:.16em;margin-bottom:1.5mm;text-transform:uppercase}
h3{font:500 11pt/1.3 Jost,sans-serif;margin:5mm 0 1.5mm;color:var(--groen)}
h4{font:600 9pt/1.4 Jost,sans-serif;margin:0 0 1.5mm;letter-spacing:.06em;text-transform:uppercase}
p{margin:0 0 2.4mm}
.lead{font-size:10.5pt;font-weight:300;line-height:1.55;color:var(--zacht);margin-bottom:4mm}
strong{font-weight:600}
.vel:not(.vel--omslag) em{font-style:normal;background:#fbeec4;padding:0 1.5px;border-radius:2px}
ul,ol{margin:0 0 2.4mm;padding-left:4.5mm}
li{margin:0 0 1.2mm}
a{color:var(--groen)}
.klein{font-size:8pt;color:var(--zacht);line-height:1.55}

/* --- HET ZOEKWOORD: zwart, met het volume erachter --------------------
   Overal waar een uitspraak in dit rapport op een gemeten zoekterm
   berust, staat die term zwart met zijn maandvolume in een groen
   plaatje ernaast. Zo is in een oogopslag te zien wat bewering is en
   wat meting is. -------------------------------------------------- */
.kw{font-weight:600;color:#000;white-space:nowrap}
.kw i,.kw u{font-style:normal;text-decoration:none;font-weight:600;font-size:7.2pt;
  border:1px solid;padding:.2mm 1.1mm;vertical-align:.6px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.kw i{color:var(--groen);background:var(--groen-licht);border-color:#cbdcd2;
  border-right:none;border-radius:2px 0 0 2px;margin-left:1.1mm}
.kw u{color:#fff;background:var(--groen);border-color:var(--groen);border-radius:0 2px 2px 0}
.kw em{font-style:normal;background:none;padding:0;font-weight:500;font-size:5.6pt;
  letter-spacing:.06em;text-transform:uppercase;margin-left:.7mm}
.kw i em{color:#7d9589}
.kw u em{color:#b7cec0}
.kw--nul i{color:#a8442a;background:#fbeeea;border-color:#eed6cf}
.kw--nul i em{color:#c08b78}
.kw--nul u{background:#a8442a;border-color:#a8442a}
.kw--nul u em{color:#e8bfb2}
td .kw{white-space:normal}
.legenda{border:1px dashed var(--lijn);border-radius:3px;padding:2mm 2.6mm;margin:3.5mm 0 0}

/* --- tabellen --- */
table{width:100%;border-collapse:collapse;margin:2.5mm 0 3mm;font-size:8.3pt;background:var(--wit)}
th,td{text-align:left;padding:1.4mm 2mm;border-bottom:1px solid var(--lijn-licht);vertical-align:top}
th{background:var(--zand);font-size:7pt;letter-spacing:.08em;text-transform:uppercase;
  color:var(--zacht);font-weight:600;border-bottom:1px solid var(--lijn)}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
td.z{font-weight:600;color:#000}
tr:last-child td{border-bottom:none}
.goed{color:var(--groen);font-weight:600}
.slecht{color:#a8442a;font-weight:600}
/* drie-niveau-tabellen: de regiokolom is het getal dat telt */
td.lok{color:var(--groen);font-weight:700}
table th.lok{color:var(--groen)}
th.r{text-align:right}
tr.som td{border-top:1.5px solid var(--lijn);border-bottom:none;background:var(--zand)}
table.strak{font-size:7.9pt}
table.strak th,table.strak td{padding:1.05mm 1.8mm}

/* --- blokken --- */
.blok{background:var(--groen-licht);border-left:3px solid var(--groen);
  padding:3mm 4mm;margin:3mm 0;border-radius:0 2px 2px 0}
.blok--zand{background:var(--accent-licht);border-left-color:var(--accent)}
.blok p:last-child{margin-bottom:0}
.blok h4{color:var(--groen)}
.blok--zand h4{color:var(--accent)}

.cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5mm;margin:3mm 0}
.cijfer{background:var(--wit);border:1px solid var(--lijn);padding:3mm;text-align:center;border-radius:2px}
.cijfer b{display:block;font:600 19pt/1 "Cormorant Garamond",Georgia,serif;color:var(--groen);margin-bottom:1.5mm}
.cijfer span{font-size:8pt;color:var(--zacht);line-height:1.4;display:block}

/* --- kaart --- */
.kaart{display:flex;gap:5mm;align-items:flex-start;margin:3mm 0}
.gkaart{position:relative;width:78mm;flex:none;overflow:hidden;border:1px solid var(--lijn);
  border-radius:2px;background:#eee8dd}
.gkaart__tegels{position:absolute;inset:0;filter:grayscale(1) contrast(.9) brightness(1.06) sepia(.34)}
.gkaart__tegels img{position:absolute;display:block}
.gkaart__laag{position:absolute;inset:0}
.gkaart__punt{position:absolute;transform:translate(-50%,-50%);width:6.2mm;height:6.2mm;white-space:nowrap;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:6pt;font-weight:600;background:rgba(255,255,255,.84);color:#8d8271;
  border:1px solid rgba(0,0,0,.14)}
.gkaart__punt.is-raak{background:var(--groen);color:#fff;font-size:9.5pt;width:8.6mm;height:8.6mm;
  border-color:var(--groen);box-shadow:0 0 0 1.7mm rgba(74,106,74,.20)}
.gkaart__plaats{position:absolute;transform:translate(-50%,-50%);font-size:6.8pt;font-weight:600;
  letter-spacing:.04em;color:#4a4238;text-shadow:0 0 1.6px #fff,0 0 3px #fff,0 0 5px #fff;
  white-space:nowrap;text-transform:uppercase}
.gkaart__bron{font-size:6.5pt;color:#a89c89;margin:1mm 0 0}
.kaart__uitleg{font-size:8.5pt;color:var(--zacht);line-height:1.6}
.kaart__uitleg b{color:var(--ink)}

/* --- seizoensgrafiek --- */
.seizoen{display:flex;align-items:flex-end;gap:1.6mm;height:34mm;margin:3mm 0 1mm;
  padding:0 1mm;border-bottom:1px solid var(--lijn)}
.staaf{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.staaf span{display:block;width:100%;background:#cfdcd4;border-radius:1.5px 1.5px 0 0}
.staaf.top span{background:var(--groen)}
.staaf.laag span{background:#e3d5c6}
.seizoen__as{display:flex;gap:1.6mm;padding:0 1mm;font-size:7pt;color:var(--zacht);text-align:center}
.seizoen__as b{flex:1;font-weight:400}
.seizoen__as b.top{color:var(--groen);font-weight:600}

/* --- vergelijking --- */
.vs td:nth-child(2){color:#a8442a;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.vs td:nth-child(4){color:var(--groen);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.vs th:nth-child(2),.vs th:nth-child(4){text-align:right}
.vel--techniek .vs td:nth-child(3){color:var(--groen);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.vel--techniek .vs td:nth-child(4){color:var(--zacht);font-weight:400;text-align:left;font-size:8pt}
.vel--techniek .vs th:nth-child(3){text-align:right}
.vel--techniek .vs th:nth-child(4){text-align:left}
.vs tr.neutraal td{color:var(--ink);font-weight:500}

/* --- woordenlijst (bijlage) --- */
.lijst{column-count:2;column-gap:7mm;font-size:8pt;margin:2mm 0 3mm}
.lijst div{break-inside:avoid;display:flex;justify-content:space-between;gap:2mm;
  padding:.6mm 0;border-bottom:1px solid var(--lijn-licht)}
.lijst div b{font-weight:600;color:#000;flex:1}
.lijst div span{font-variant-numeric:tabular-nums;color:var(--groen);font-weight:600;
  white-space:nowrap;width:9.5mm;text-align:right}
.lijst div span.reg{color:var(--zacht);font-weight:500;width:7.5mm}
.lijst h4{column-span:all;margin:3mm 0 1mm;color:var(--groen);border-bottom:1px solid var(--lijn);padding-bottom:1mm}
.lijst h4 i{float:right;font-style:normal;font-size:7pt;font-weight:400;color:var(--zacht);
  letter-spacing:.06em;text-transform:uppercase}
.lijst h4:first-child{margin-top:0}

/* --- van zoekwoord naar pagina (hoofdstuk 9) --------------------------
   De trap laat zien waar een gemeten zoekwoord in de gebouwde pagina
   landt: adres, titel, kop, tekst, code. De .serp is een nabootsing van
   het zoekresultaat zoals Google het toont. ------------------------- */
.serp{background:var(--wit);border:1px solid var(--lijn);border-radius:2px;
  padding:2.8mm 3.5mm;margin:1.5mm 0 2mm}
.serp__url{font-size:7.6pt;color:#3c6a51;letter-spacing:.01em}
.serp__titel{font:400 11.5pt/1.25 Jost,sans-serif;color:#1a4b8c;margin:1mm 0 1.2mm}
.serp__desc{font-size:8pt;color:var(--zacht);line-height:1.5}
.serp mark{background:#fbeec4;color:inherit;font-weight:600;padding:0 1px;border-radius:2px}
.serp__nu{font-size:7.8pt;color:var(--zacht);margin:0;padding-top:2mm;
  border-top:1px solid var(--lijn-licht)}
.serp__nu s{color:#a8442a;text-decoration-color:#d9b3a6}
.trap{margin:3mm 0 0;padding:0;list-style:none;counter-reset:stap}
.trap>li{position:relative;padding:0 0 2.8mm 7.5mm;margin-left:2.6mm;border-left:1px solid var(--lijn)}
.trap>li:last-child{border-left-color:transparent;padding-bottom:0}
.trap>li::before{counter-increment:stap;content:counter(stap);position:absolute;left:-2.7mm;top:-.6mm;
  width:5.3mm;height:5.3mm;border-radius:50%;background:var(--groen);color:#fff;
  font:600 7pt/5.3mm Jost,sans-serif;text-align:center}
.trap h4{color:var(--groen);margin-bottom:1.2mm}
.cit{color:var(--zacht)}
.trap p{font-size:8.6pt;line-height:1.55;margin-bottom:1.2mm}
.trap p:last-child{margin-bottom:0}
.paginanr{position:absolute;bottom:9mm;left:18mm;right:18mm;display:flex;
  justify-content:space-between;font-size:7.5pt;color:#a3998a;
  border-top:1px solid var(--lijn-licht);padding-top:2mm}

@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  .vel{margin:0;box-shadow:none;break-after:page;page-break-after:always}
  .vel:last-child{break-after:auto;page-break-after:auto}
  h2,h3{break-after:avoid;page-break-after:avoid}
  table,.blok,.cijfers,.kaart,.seizoen{break-inside:avoid;page-break-inside:avoid}
}
@media screen and (max-width:230mm){
  .vel{width:auto;min-height:0;padding:7mm 5mm;margin-bottom:4mm}
  .omslag__top,.omslag__kern,.omslag__voet{padding-left:5mm;padding-right:5mm}
  .kaart{flex-direction:column}
  .cijfers{grid-template-columns:1fr}
  .lijst{column-count:1}
  .paginanr{position:static;margin-top:6mm}
}