/* Inbraakmonitor het Gooi
   Alleen de onderdelen die het thema niet kent: meetblok, tabellen, grafiek.
   Alle kleuren en letters komen uit het thema, zodat de pagina in lijn loopt
   met de rest van de site. Klassen beginnen met im- zodat er niets botst. */

.im{display:block}
.im h2{margin:2.2em 0 .55em;max-width:24ch}
.im h2:first-child{margin-top:0}
.im p{max-width:64ch}

/* ---------- meetblok bovenaan ---------- */
.im-meting{
  display:grid;gap:1px;background:var(--lijn);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--lijn);border-radius:var(--rond);overflow:hidden;
  margin:0 0 2.4em;max-width:none;
}
.im-meting div{background:var(--wit);padding:20px 22px;display:flex;flex-direction:column;gap:5px}
.im-meting span{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);
}
.im-meting strong{
  font-family:"Archivo",system-ui,sans-serif;font-weight:700;
  font-size:1.25rem;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}

/* ---------- tabellen ---------- */
.im-tabelwrap{
  overflow-x:auto;margin:0 0 .8em;max-width:none;
  border:1px solid var(--lijn-fijn);border-radius:var(--rond);background:var(--wit);
}
.im-tabel{
  width:100%;min-width:600px;border-collapse:collapse;
  font-size:.93rem;font-variant-numeric:tabular-nums;
}
.im-tabel caption{
  caption-side:top;text-align:left;
  font-family:"IBM Plex Mono",monospace;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grijs);padding:18px 22px 12px;
}
.im-tabel thead th{
  font-family:"IBM Plex Mono",monospace;
  font-size:.6rem;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grijs);text-align:left;
  padding:0 18px 11px;border-bottom:1.5px solid var(--lijn);
  white-space:nowrap;vertical-align:bottom;
}
.im-tabel tbody th{
  text-align:left;font-weight:600;padding:14px 18px;
  border-bottom:1px solid var(--lijn-fijn);vertical-align:top;
}
.im-tabel a{display:inline-flex;align-items:center;min-height:44px;text-decoration-thickness:1px}
.im-tabel td{
  padding:14px 18px;border-bottom:1px solid var(--lijn-fijn);
  color:var(--inkt-2);vertical-align:top;
}
.im-tabel tbody tr:last-child th,.im-tabel tbody tr:last-child td{border-bottom:none}
.im-tabel tbody tr:hover th,.im-tabel tbody tr:hover td{background:var(--papier)}
.im-tabel .r{text-align:right;white-space:nowrap}
.im-tabel .sterk{color:var(--inkt);font-weight:700;font-family:"Archivo",sans-serif;font-size:1rem;letter-spacing:-.02em}
.im-tabel .zacht{color:var(--grijs)}
.im-tabel .omhoog{color:var(--op);font-weight:600}
.im-tabel .omlaag{color:var(--neer);font-weight:600}
.im-tabel .gelijk,.im-tabel .neutraal{color:var(--grijs)}
.im-buurt{
  display:block;font-weight:400;font-size:.81rem;color:var(--grijs);
  line-height:1.4;margin-top:4px;max-width:34ch;
}

.im-noot{font-size:.87rem;color:var(--grijs);line-height:1.55;margin:0 0 2em;max-width:60ch}

/* ---------- uitgelicht ---------- */
.im-vergelijk{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:0 0 1.8em;max-width:none;
}
.im-vgl{
  background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);
  padding:28px 26px;display:flex;flex-direction:column;gap:8px;
}
.im-vgl-cijfer{
  font-family:"Archivo",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.6rem,4.6vw,3.6rem);line-height:.92;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.im-vgl-tekst{font-size:.95rem;color:var(--inkt-2);line-height:1.5;max-width:30ch}
.im-vgl-sub{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin-top:4px;
}
.im-vgl-laag .im-vgl-cijfer{color:var(--grijs)}

.im-duo{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:0 0 1.8em;max-width:none}
.im-duo-kaart{background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);padding:26px 24px;display:flex;flex-direction:column;gap:7px}
.im-duo-label{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs)}
.im-duo-cijfer{font-family:"Archivo",sans-serif;font-weight:700;font-size:2.6rem;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.im-duo-cijfer.omhoog{color:var(--op)}
.im-duo-cijfer.omlaag{color:var(--neer)}
.im-duo-sub{font-size:.88rem;color:var(--grijs)}

/* ---------- seizoensgrafiek ---------- */
.im-grafiek{
  display:flex;align-items:flex-end;gap:7px;
  height:230px;margin:0 0 1.8em;padding:26px 22px 0;max-width:none;
  background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);
}
.im-staaf{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px;min-width:0}
.im-staaf-balk{width:100%;background:var(--zand-diep);display:block;border-radius:4px 4px 0 0}
.im-staaf-piek .im-staaf-balk{background:var(--stift)}
.im-staaf-dal .im-staaf-balk{background:var(--neer)}
.im-staaf-waarde{font-family:"IBM Plex Mono",monospace;font-size:.62rem;color:var(--grijs);font-variant-numeric:tabular-nums}
.im-staaf-piek .im-staaf-waarde,.im-staaf-dal .im-staaf-waarde{color:var(--inkt);font-weight:500}
.im-staaf-maand{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--grijs);
  padding:9px 0 14px;
}

/* ---------- kerngetallen ---------- */
.im-kerngetallen{
  display:grid;gap:1px;background:var(--lijn);
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  border:1px solid var(--lijn);border-radius:var(--rond);overflow:hidden;
  margin:0 0 1.8em;max-width:none;
}
.im-kerngetallen div{background:var(--wit);padding:24px 22px;display:flex;flex-direction:column;gap:5px}
.im-kerngetallen b{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:2.1rem;
  line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.im-kerngetallen span{font-size:.86rem;color:var(--grijs);line-height:1.4}

/* ---------- verantwoording ---------- */
.im-verantwoording{
  background:var(--zand);border-radius:var(--rond);
  padding:34px 32px;margin:2.6em 0 0;max-width:none;
}
.im-verantwoording h2{margin-top:0}
.im-bronnen{margin:0;display:grid;gap:0}
.im-bronnen dt{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--grijs);
  padding-top:18px;border-top:1px solid var(--lijn);
}
.im-bronnen dd{margin:7px 0 18px;font-size:.93rem;color:var(--inkt-2);line-height:1.55;max-width:64ch}
.im-bronnen dd:last-child{margin-bottom:0}

@media (max-width:640px){
  .im-grafiek{height:180px;gap:4px;padding:20px 14px 0}
  .im-staaf-waarde{display:none}
  .im-verantwoording{padding:26px 22px}
  .im-tabel{min-width:520px}
}