<style>
.dg-embed{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#111}
.dg-box{border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dg-flex{display:grid;gap:12px}
@media (min-width:720px){.dg-flex{grid-template-columns:1fr 1fr;align-items:center}}
.dg-legend{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px;font-size:14px;color:#374151}
.dg-item{display:flex;align-items:center;gap:8px}
.dg-swatch{width:12px;height:12px;border-radius:3px;display:inline-block}
</style>
<div class="dg-embed" style="max-width:560px;margin:0 auto">
  <div class="dg-box">
    <p style="margin:0 0 16px;color:#6b7280;">Indicatie werkverdeling</p>
    <div class="dg-flex">
      <div><svg viewBox="0 0 200 200" style="width:100%;max-width:560px;height:auto;display:block;margin:0 auto">
  <path d="M100 100 L100.00 10.00 A90 90 0 0 1 127.81 185.60 Z" fill="#d9f1ff"></path>
  <path d="M100 100 L127.81 185.60 A90 90 0 0 1 47.10 172.81 Z" fill="#aee6ff"></path>
  <path d="M100 100 L47.10 172.81 A90 90 0 0 1 14.40 72.19 Z" fill="#0e6a8c"></path>
  <path d="M100 100 L14.40 72.19 A90 90 0 0 1 47.10 27.19 Z" fill="#164a5b"></path>
  <path d="M100 100 L47.10 27.19 A90 90 0 0 1 100.00 10.00 Z" fill="#12212a"></path>
  <circle cx="100" cy="100" r="52.20" fill="#ffffff" stroke="#eef2f7" stroke-width="1"></circle>
</svg></div>
      <div class="dg-legend">
        <div class="dg-item"><span class="dg-swatch" style="background:#d9f1ff"></span>Samenstellen (45%)</div>
        <div class="dg-item"><span class="dg-swatch" style="background:#aee6ff"></span>Fiscale werkzaamheden (15%)</div>
        <div class="dg-item"><span class="dg-swatch" style="background:#0e6a8c"></span>Administratief (20%)</div>
        <div class="dg-item"><span class="dg-swatch" style="background:#164a5b"></span>Contact/advies (10%)</div>
        <div class="dg-item"><span class="dg-swatch" style="background:#12212a"></span>Overig/intern (10%)</div>
      </div>
    </div>
  </div>
</div>