/* Boomspotter — de gegenereerde pagina's.
   Papier om te lezen, inkt voor de kopbalk en de knoppen. Dezelfde
   verhouding als het paneel naast de kaart: lange tekst hoort op licht,
   het merk en de acties op diep groen. */
:root{
  --papier:#F1F5E7;          /* de pagina                */
  --vlak:#FFFFFF;            /* kaartjes en rijen        */
  --vlak-op:#E9EEDC;         /* aanwijzen                */
  --diep:#1F3400;            /* inkt: kopbalk en knoppen */
  --kop:#17280A;             /* koppen                   */
  --tekst:#3F4C31;           /* lopende tekst            */
  --gedempt:#5F6B54;         /* bijschriften             */
  --brand:#4C7508;           /* links en getallen        */
  --brand-zacht:#3C5D06;
  --warm:#8A5F12;            /* ouderdom en ereklasse    */
  --op-kop:#F4FAE8;          /* tekst op diep groen      */
  --op-tekst:#C9D6B0;
  --rand:rgba(23,40,10,.12); --rand-op:rgba(23,40,10,.24);
  --r:20px;--pil:999px;
  --serif:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--papier)}
body{margin:0;padding:0 20px 0;font:17px/1.7 var(--sans);color:var(--tekst);
  background:var(--papier);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:820px;margin:0 auto}
a{color:var(--brand)}

header.bl{margin:0 -20px 32px;padding:16px 20px;background:var(--diep);
  position:sticky;top:0;z-index:5}
header.bl .wrap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
header.bl a.merk{font-family:var(--serif);font-size:23px;color:var(--op-kop);
  text-decoration:none;letter-spacing:-.015em}
header.bl a.merk i{font-style:normal;color:#A1DA02}
header.bl span{font-size:12.5px;color:var(--op-tekst)}
header.bl a.kaartknop{margin-left:auto;background:#A1DA02;color:var(--diep);text-decoration:none;
  border-radius:var(--pil);padding:8px 16px;font-weight:700;font-size:13.5px}

nav.kruimel{font-size:13px;color:var(--gedempt);margin-bottom:14px}
nav.kruimel a{color:var(--tekst);text-decoration:none}
nav.kruimel a:hover{color:var(--brand);text-decoration:underline}

h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5.6vw,50px);line-height:1.06;
  letter-spacing:-.022em;margin:0 0 10px;color:var(--kop)}
h1 em{font-style:normal;color:var(--gedempt);display:block;font-size:.42em;
  letter-spacing:-.005em;margin-top:12px;font-family:var(--sans);font-weight:500}
h2{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:-.02em;
  margin:44px 0 12px;color:var(--kop)}
h3{font-size:15px;margin:22px 0 6px;color:var(--kop)}
p.intro{font-size:19px;color:var(--tekst);margin:0 0 24px;line-height:1.62}

.hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);
  background:var(--vlak-op);display:block;margin:0 0 26px}

.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;margin:26px 0;
  background:var(--rand-op);border:1px solid var(--rand-op);border-radius:var(--r);overflow:hidden}
.cijfers div{background:var(--vlak);padding:18px 18px 20px}
.cijfers b{display:block;font-family:var(--serif);font-size:30px;color:var(--brand);line-height:1.05}
.cijfers b.goud{color:var(--warm)}
.cijfers span{display:block;font-size:12.5px;color:var(--gedempt);margin-top:4px}

ul.bomen{list-style:none;margin:0;padding:0;border:1px solid var(--rand-op);
  border-radius:var(--r);overflow:hidden;background:var(--vlak)}
ul.bomen li{border-bottom:1px solid var(--rand)}
ul.bomen li:last-child{border-bottom:0}
ul.bomen a{display:flex;gap:14px;align-items:baseline;padding:14px 18px;text-decoration:none;color:var(--tekst)}
ul.bomen a:hover{background:var(--vlak-op)}
ul.bomen .nm{flex:1;min-width:0;font-weight:650;font-size:15.5px;color:var(--kop)}
ul.bomen .wr{display:block;font-weight:400;font-size:13px;color:var(--gedempt);margin-top:2px}
ul.bomen .mt{flex:none;font-size:15px;font-weight:700;color:var(--brand);text-align:right;white-space:nowrap}
ul.bomen .mt em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--gedempt)}

.wolk{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.wolk a{background:var(--vlak);border:1px solid var(--rand-op);border-radius:var(--pil);
  padding:8px 15px;font-size:13.5px;text-decoration:none;color:var(--tekst)}
.wolk a:hover{border-color:var(--brand);background:var(--vlak-op)}
.wolk a b{color:var(--brand);font-weight:700}

.let{background:rgba(138,95,18,.11);border:1px solid rgba(138,95,18,.32);border-radius:14px;
  padding:13px 16px;font-size:15px;line-height:1.6;color:#6E4B0D;margin:22px 0 0}
.let b{color:var(--kop)}

.knop{display:inline-block;background:var(--diep);color:var(--op-kop);text-decoration:none;
  border-radius:var(--pil);padding:14px 26px;font-weight:700;font-size:15.5px;margin:8px 8px 4px 0}
.knop:hover{background:#2b4703}
.knop.tweede{background:var(--vlak);color:var(--brand);border:1px solid var(--rand-op)}
.knop.tweede:hover{background:var(--vlak-op);border-color:var(--brand)}

.kader{background:var(--vlak);border:1px solid var(--rand-op);border-radius:var(--r);
  padding:20px 22px;margin:26px 0;font-size:15px}
.kader h3{margin-top:0}

table.feiten{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
table.feiten th{text-align:left;font-weight:500;color:var(--gedempt);padding:11px 16px 11px 0;
  vertical-align:top;width:158px;font-size:14px}
table.feiten td{padding:11px 0;border-bottom:1px solid var(--rand);color:var(--tekst)}
.verhaal p{margin:0 0 15px}

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px;margin:16px 0}
.raster a{border:1px solid var(--rand-op);border-radius:14px;padding:14px 16px;
  text-decoration:none;color:var(--tekst);background:var(--vlak)}
.raster a:hover{border-color:var(--brand);background:var(--vlak-op)}
.raster b{display:block;font-size:15.5px;color:var(--kop);letter-spacing:-.01em}
.raster span{font-size:12.5px;color:var(--gedempt)}

/* ── de voet ────────────────────────────────────────────────────────
   Bijna iedereen komt hier uit een zoekmachine binnen, midden in de
   site, zonder te weten wat Boomspotter is. De voet moet dus drie
   vragen beantwoorden: waar ben ik, wat kan ik hier nog meer, en hoe
   kom ik bij het begin. Vandaar dat hij donker is: hij hoort bij de
   kopbalk, niet bij de tekst.                                       */
footer.bs{background:var(--diep);color:var(--op-tekst);margin:72px -20px 0;padding:40px 20px 34px}
footer.bs .wrap{max-width:820px}
footer.bs .wat{font-size:16px;line-height:1.65;color:var(--op-tekst);margin:0 0 26px;max-width:62ch}
footer.bs .wat b{color:var(--op-kop)}
footer.bs .wat a{color:#A1DA02}
footer.bs .kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
footer.bs h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#A1DA02;
  margin:0 0 9px;font-weight:700}
footer.bs ul{list-style:none;margin:0;padding:0}
footer.bs li{margin-bottom:6px}
footer.bs li a{color:var(--op-tekst);text-decoration:none;font-size:14.5px}
footer.bs li a:hover{color:var(--op-kop);text-decoration:underline}
footer.bs .bron{margin-top:30px;padding-top:20px;border-top:1px solid rgba(244,250,232,.16);
  font-size:12.8px;line-height:1.65;color:rgba(201,214,176,.72)}
footer.bs .bron a{color:var(--op-tekst)}

@media(max-width:560px){ table.feiten th{width:120px;font-size:13px} }