/* Energielabel-monitor — hergebruikt dm/dh-patronen; eigen figuren hier. */
.dm-toelichting { font-size:13px; color:var(--color-text-muted); }
.dm-fig { margin-top:44px; }
.dm-fig h3 { margin-bottom:4px; }
.dm-kolommen { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:14px; }
@media (max-width:680px){ .dm-kolommen { grid-template-columns:1fr; } }
.dm-kolom h4 { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-muted); margin:10px 0 0; }
.dm-bars { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.dm-bar-rij { display:grid; grid-template-columns:minmax(64px,90px) 1fr 60px;
  gap:10px; align-items:center; font-size:13px; }
.dm-bar-spoor { background:var(--color-surface-2); border-radius:6px; height:16px; overflow:hidden; }
.dm-bar-spoor i { display:block; height:100%;
  background:linear-gradient(90deg, var(--color-navy), #2a7ab0); border-radius:6px; }
.dm-bar-waarde { font-variant-numeric:tabular-nums; text-align:right; font-weight:600; font-size:12.5px; }
.el-verdeling { display:flex; gap:3px; align-items:flex-end; height:170px; margin-top:12px; }
.el-verdeling .klasse { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  min-width:0; position:relative; height:100%; }
.el-verdeling .klasse i { display:block; border-radius:3px 3px 0 0; }
.el-verdeling .klasse .k { font-size:10px; text-align:center; color:var(--color-text-muted); margin-top:4px; white-space:nowrap; }
.el-verdeling .klasse .n { font-size:10.5px; text-align:center; font-weight:600; margin-bottom:3px; }
.el-verdeling .klasse .tip { position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s; z-index:5; }
.el-verdeling .klasse:hover .tip { opacity:1; }
.el-maanden { display:flex; gap:1px; align-items:flex-end; height:130px; margin-top:12px; }
.el-maanden .m { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  min-width:0; position:relative; height:100%; }
.el-maanden .m i { display:block; background:linear-gradient(180deg, #2a7ab0, var(--color-navy));
  border-radius:2px 2px 0 0; }
.el-maanden .m .tip { position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s; z-index:5; }
.el-maanden .m:hover .tip { opacity:1; }
.el-jaar-stapels { display:flex; gap:6px; align-items:flex-end; height:180px; margin-top:12px; margin-bottom:16px; }
.el-jaar-stapel { flex:1; display:flex; flex-direction:column-reverse; justify-content:flex-end;
  min-width:0; position:relative; height:100%; border-radius:3px 3px 0 0; overflow:hidden; }
.el-jaar-stapel i { display:block; width:100%; }
.el-jaar-stapel .j { font-size:10px; text-align:center; color:var(--color-text-muted);
  margin-top:4px; position:absolute; top:100%; left:0; right:0; }
.el-jaar-stapel .tip { position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; z-index:5; }
.el-jaar-stapel:hover .tip { opacity:1; }
#el-groei-svg { width:100%; height:auto; display:block; margin-top:8px; }
/* export-knoppen per figuur (dm-patroon) */
.dm-knop { font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--color-divider-strong); background:var(--color-surface);
  color:var(--color-navy); border-radius:6px; padding:3px 10px; }
.dm-knop:hover { border-color:var(--color-navy); }