/* Grafieken (grafiek.js, 0.78.0). Niet van de site: de site heeft geen grafieken;
   de kleuren zijn wel de merkkleuren. De SVG heeft zijn echte maat in pixels, dus
   een lijn van 2 is overal 2 en een letter van 11 is overal 11. */
.grafiek { position: relative; width: 100%; touch-action: pan-y; }
.grafiek svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Pictogrammen in de suite krijgen een omlijning mee; in een grafiek niet. */
.grafiek svg path, .grafiek svg text, .grafiek svg rect, .grafiek svg circle { stroke: none; }
.grafiek .raster { stroke: var(--lijn-zacht); stroke-width: 1; }
.grafiek .raster.nul { stroke: var(--lijn); }
.grafiek .nullijn { stroke: var(--rood); stroke-width: 1.2; stroke-dasharray: 4 3; }
.grafiek .asmerk { fill: var(--inkt-zacht); font-size: 11px; font-family: var(--tekst);
                   font-variant-numeric: tabular-nums; }
.grafiek .lijn { fill: none; stroke: var(--groen); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek .vlakboven { stop-color: var(--groen); stop-opacity: .16; }
.grafiek .vlakonder { stop-color: var(--groen); stop-opacity: .01; }
.grafiek .punt { fill: var(--vlak); stroke: var(--groen); stroke-width: 2; }
.grafiek .stip { fill: var(--groen); stroke: var(--vlak); stroke-width: 2; }
.grafiek .stip.laag { fill: var(--rood); }
.grafiek .stip.hoog { fill: var(--terra); }
.grafiek .staaf.omzet { fill: var(--groen); }
.grafiek .staaf.kosten { fill: var(--terra); }
.grafiek .staaflijn { fill: none; stroke: var(--blauw); stroke-width: 2; stroke-linejoin: round; }
.grafiek .staafstip { fill: var(--blauw); stroke: var(--vlak); stroke-width: 2; }
.grafiek .wijskolom { fill: var(--vlak-warm); }
.grafiek .wijslijn { stroke: var(--inkt-zacht); stroke-width: 1; stroke-dasharray: 3 3; }
.grafiek .wijsstip { fill: var(--groen); stroke: var(--vlak); stroke-width: 2.5; }
.grafiektip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px;
  padding: 8px 10px; border-radius: 8px; background: var(--vlak); border: 1px solid var(--lijn);
  box-shadow: 0 4px 18px rgba(29,25,16,.12); font-size: 12.5px; }
.grafiektip .tipkop { font-weight: 600; color: var(--inkt); margin-bottom: 4px; }
.grafiektip .tipregel { display: flex; align-items: center; gap: 7px; color: var(--inkt-zacht); line-height: 1.6; }
.grafiektip .tipregel b { margin-left: auto; padding-left: 12px; color: var(--inkt);
  font-weight: 600; font-variant-numeric: tabular-nums; }
.grafiektip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--groen); }
.grafiektip i.kosten { background: var(--terra); }
.grafiektip i.lijn { height: 3px; border-radius: 2px; background: var(--blauw); }