/* ==========================================================================
   DataGO — interactieve visuals
   Drie blokken: schoning en verrijking, bronnen samenvoegen, betrouwbaarheid.
   Prefix dg- zodat niets botst met de pagina-stijl. Kleuren volgen de huisstijl.
   ========================================================================== */

.dg-blok{
    --dg-blauw:#1e5a7d; --dg-groen:#4fb06d; --dg-licht:#63a4c9;
    --dg-goud:#c9a227; --dg-amber:#e08b2a;
    --dg-lijn:#e6edf3; --dg-grijs:#6b7a8c;
}
.dg-blok .dg-intro{max-width:760px;margin:0 auto 2rem;text-align:center;color:var(--dg-grijs);font-size:1.02rem}
.dg-paneel{background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.07);padding:1.6rem}
.dg-knop{
    font:inherit;font-size:.92rem;font-weight:600;border-radius:999px;cursor:pointer;
    padding:.65rem 1.15rem;border:1.5px solid var(--dg-blauw);background:var(--dg-blauw);color:#fff;
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
}
.dg-knop:hover{transform:translateY(-1px)}
.dg-knop.dg-secundair{background:#fff;color:var(--dg-blauw)}
.dg-knop:disabled{opacity:.45;cursor:default;transform:none}
.dg-knop:focus-visible,.dg-bron:focus-visible,.dg-steek-knop:focus-visible{outline:2px solid var(--dg-groen);outline-offset:2px}
.dg-noot{font-size:.82rem;color:var(--dg-grijs);margin-top:.9rem;line-height:1.5}

/* Tellers: dezelfde vorm in alle drie de visuals */
.dg-tellers{display:flex;flex-wrap:wrap;gap:.9rem}
.dg-teller{flex:1 1 170px;background:#f7fafc;border:1px solid var(--dg-lijn);border-radius:12px;padding:.8rem .95rem}
.dg-teller-label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dg-grijs);font-weight:700}
.dg-teller-waarde{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;color:var(--dg-blauw);line-height:1.3;font-variant-numeric:tabular-nums}
.dg-teller-waarde .dg-was{font-size:.95rem;font-weight:500;color:var(--dg-grijs);text-decoration:line-through;margin-right:.35rem}
.dg-teller.is-goud .dg-teller-waarde{color:var(--dg-goud)}

/* ── Visual 1: van gaten naar goud ─────────────────────────────────────── */
.dg-v1-balk{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:1.2rem}
.dg-tabelwrap{
    border:2px solid var(--dg-lijn);border-radius:16px;padding:.4rem;background:#fff;
    overflow-x:auto;transition:border-color .5s ease,box-shadow .5s ease,background .5s ease;
}
.dg-tabelwrap.is-goud{
    border-color:var(--dg-goud);background:linear-gradient(180deg,#fffdf5,#fff);
    box-shadow:0 0 0 4px rgba(201,162,39,.12),0 14px 36px rgba(201,162,39,.18);
}
table.dg-tabel{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.dg-tabel th{
    text-align:left;font-family:'Space Grotesk',sans-serif;font-size:.78rem;text-transform:uppercase;
    letter-spacing:.06em;color:var(--dg-grijs);font-weight:700;padding:.7rem .9rem;border-bottom:2px solid var(--dg-lijn);
}
.dg-tabel td{padding:.55rem .9rem;border-bottom:1px solid #f0f4f8;color:#2c3e50;vertical-align:middle}
.dg-tabel tr:last-child td{border-bottom:none}
.dg-cel{position:relative;display:inline-block;min-height:1.3em}
.dg-leeg{display:inline-block;width:54px;height:.55rem;border-radius:3px;background:repeating-linear-gradient(135deg,#eef2f6,#eef2f6 4px,#f8fafc 4px,#f8fafc 8px)}
.dg-rommel{color:#a05a2c}
/* Een cel die net is bijgewerkt: korte markering plus een stip in de kleur van de bron */
.dg-cel.is-nieuw{animation:dgVul .45s ease both}
.dg-cel.is-nieuw::after{
    content:"";position:absolute;right:-11px;top:.15em;width:7px;height:7px;border-radius:50%;
    background:var(--dg-bron,var(--dg-licht));box-shadow:0 0 0 2px #fff;
}
.dg-cel[data-bron="regel"]{--dg-bron:var(--dg-licht)}
.dg-cel[data-bron="intern"]{--dg-bron:var(--dg-groen)}
.dg-cel[data-bron="extern"]{--dg-bron:var(--dg-goud)}
@keyframes dgVul{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.dg-legenda{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0 0;font-size:.83rem;color:var(--dg-grijs);list-style:none;padding:0}
.dg-legenda li{display:flex;align-items:center;gap:.45rem}
.dg-stip{width:9px;height:9px;border-radius:50%;flex:none}
.dg-stip.regel{background:var(--dg-licht)}
.dg-stip.intern{background:var(--dg-groen)}
.dg-stip.extern{background:var(--dg-goud)}
.dg-v1-tellers{margin-top:1.2rem}

/* ── Visual 2: vier bronnen, een systeem ───────────────────────────────── */
.dg-v2{position:relative}
.dg-v2-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:9rem;align-items:start}
.dg-bron{
    display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
    background:#fff;border:2px solid var(--dg-lijn);border-left:5px solid var(--dg-kleur,var(--dg-licht));
    border-radius:14px;padding:.85rem 1rem;margin-bottom:.9rem;
    box-shadow:0 6px 18px rgba(0,0,0,.05);transition:border-color .2s ease,box-shadow .2s ease,opacity .3s ease;
}
.dg-bron:last-child{margin-bottom:0}
.dg-bron:hover{box-shadow:0 10px 26px rgba(0,0,0,.09)}
.dg-bron[aria-pressed="false"]{opacity:.5;background:#fbfcfd}
.dg-bron-kop{display:flex;align-items:baseline;gap:.5rem}
.dg-bron-naam{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.98rem;color:var(--dg-blauw)}
.dg-bron-schakel{margin-left:auto;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dg-groen);flex:none}
.dg-bron[aria-pressed="false"] .dg-bron-schakel{color:var(--dg-grijs)}
.dg-bron-sub{display:block;font-size:.8rem;color:var(--dg-grijs);margin:.15rem 0 .6rem}
.dg-kolommen{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.dg-kolom{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
    background:#f2f7fa;border:1px solid var(--dg-lijn);border-radius:6px;padding:.2rem .45rem;color:#41607a;
}
.dg-kolom .dg-pijl{display:none;color:var(--dg-grijs)}
.dg-veld{
    background:#fff;border:2px solid var(--dg-lijn);border-radius:12px;padding:.6rem .8rem;margin-bottom:.55rem;
    transition:border-color .3s ease,background .3s ease,opacity .3s ease;
}
.dg-veld:last-child{margin-bottom:0}
.dg-veld-naam{font-weight:600;font-size:.92rem;color:#2c3e50}
.dg-veld-sub{display:block;font-size:.76rem;color:var(--dg-grijs);margin-top:.1rem}
.dg-veld.is-gevuld{border-color:rgba(79,176,109,.5);background:linear-gradient(90deg,rgba(79,176,109,.07),#fff)}
.dg-veld.is-leeg{border-style:dashed;opacity:.7}
.dg-veld.is-leeg .dg-veld-sub{color:#b08a3c}
.dg-v2-lijnen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dg-v2-lijn{fill:none;stroke-width:2;opacity:.5;transition:opacity .25s ease,stroke-width .25s ease}
.dg-v2.is-actief .dg-v2-lijn{opacity:.1}
.dg-v2.is-actief .dg-v2-lijn.is-op{opacity:.95;stroke-width:3}
.dg-v2-kop{font-family:'Space Grotesk',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dg-grijs);font-weight:700;margin-bottom:.7rem}
.dg-v2-tellers{margin-top:1.3rem}

/* ── Visual 3: betrouwbaarheid stuurt het werk ─────────────────────────── */
.dg-v3-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.6rem;align-items:start}
.dg-chips{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin:.2rem 0 1rem}
.dg-chip{
    aspect-ratio:1;border-radius:3px;background:var(--dg-groen);
    transition:background .45s ease,transform .3s ease,box-shadow .3s ease;
}
.dg-chip.is-controle{background:#fff;box-shadow:inset 0 0 0 2px var(--dg-amber)}
.dg-chip.is-net{animation:dgPuls .6s ease}
@keyframes dgPuls{50%{transform:scale(1.35)}}
.dg-schuif-rij{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.dg-schuif-rij label{font-weight:600;font-size:.92rem;flex:none}
.dg-schuif{flex:1 1 220px;accent-color:var(--dg-blauw);min-width:170px}
.dg-grenswaarde{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--dg-blauw);font-variant-numeric:tabular-nums;flex:none}
.dg-stapel{
    border-left:4px solid var(--dg-amber);background:#fffaf2;border-radius:0 12px 12px 0;
    padding:.75rem 1rem;margin:.2rem 0 1rem;font-size:.95rem;color:#5c4a2e;
}
.dg-stapel strong{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;color:var(--dg-amber);font-variant-numeric:tabular-nums}
.dg-model{border:2px solid rgba(30,90,125,.25);border-radius:14px;padding:1rem;background:linear-gradient(180deg,#f4f9fc,#fff);margin-bottom:1rem}
.dg-model-kop{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.dg-model-naam{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--dg-blauw)}
.dg-model-versie{font-size:.78rem;font-weight:700;color:#fff;background:var(--dg-blauw);border-radius:999px;padding:.15rem .6rem;font-variant-numeric:tabular-nums}
.dg-model.is-bij{animation:dgModel .8s ease}
@keyframes dgModel{30%{box-shadow:0 0 0 6px rgba(79,176,109,.18)}}
.dg-balk{height:8px;border-radius:999px;background:#e6edf3;overflow:hidden;margin:.7rem 0 .35rem}
.dg-balk i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--dg-blauw),var(--dg-groen));transition:width .6s ease}
.dg-balk-cijfer{font-size:.82rem;color:var(--dg-grijs);font-variant-numeric:tabular-nums}
.dg-lus{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--dg-groen);font-weight:600;margin-top:.6rem;opacity:0;transition:opacity .3s ease}
.dg-lus.is-aan{opacity:1}
.dg-lus svg{flex:none}
.dg-steek{border:2px solid var(--dg-lijn);border-radius:14px;padding:1rem;background:#fff}
.dg-steek-veld{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dg-grijs);font-weight:700}
.dg-steek-asset{display:block;font-size:.85rem;color:var(--dg-grijs);margin:.1rem 0 .5rem}
.dg-steek-waarde{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;font-weight:700;color:#2c3e50}
.dg-steek-zeker{display:inline-block;margin-left:.5rem;font-size:.82rem;font-weight:700;color:var(--dg-amber);vertical-align:middle}
.dg-steek-herkomst{display:block;font-size:.82rem;color:var(--dg-grijs);margin:.4rem 0 .9rem;line-height:1.45}
.dg-steek-knoppen{display:flex;gap:.6rem;flex-wrap:wrap}
.dg-steek-knop{
    font:inherit;font-size:.88rem;font-weight:600;border-radius:999px;padding:.55rem 1rem;cursor:pointer;
    border:1.5px solid var(--dg-groen);background:var(--dg-groen);color:#fff;transition:transform .15s ease,opacity .2s ease;
}
.dg-steek-knop.dg-corrigeer{background:#fff;color:var(--dg-blauw);border-color:var(--dg-blauw)}
.dg-steek-knop:hover{transform:translateY(-1px)}
.dg-steek-klaar{font-size:.92rem;color:var(--dg-groen);font-weight:600;margin:0 0 .8rem}
.dg-v3-tellers{margin-top:1.2rem}

/* ── Resultaatband onder de hero ───────────────────────────────────────── */
.dg-band{background:#fff;border-bottom:1px solid #e6edf3;padding:1.7rem 2rem}
.dg-band-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.dg-band-item{display:flex;gap:.85rem;align-items:flex-start}
.dg-band-icoon{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#1e5a7d,#63a4c9);color:#fff}
.dg-band-kop{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:#1e5a7d;line-height:1.25}
.dg-band-tekst{display:block;font-size:.88rem;color:#6b7a8c;margin-top:.15rem;line-height:1.45}

/* ── Smallere schermen ─────────────────────────────────────────────────── */
@media(max-width:1024px){
    /* Zonder de lijnen wordt de koppeling in tekst gezet, dat leest net zo goed */
    .dg-v2-grid{grid-template-columns:1fr;gap:1.4rem}
    .dg-v2-lijnen{display:none}
    .dg-kolom .dg-pijl{display:inline}
    .dg-v3-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
    .dg-paneel{padding:1.1rem}
    .dg-band-inner{grid-template-columns:1fr;gap:1rem}
    .dg-chips{grid-template-columns:repeat(10,1fr);gap:5px}
    .dg-teller{flex:1 1 130px}
    .dg-teller-waarde{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){
    .dg-cel.is-nieuw,.dg-chip.is-net,.dg-model.is-bij{animation:none}
    .dg-tabelwrap,.dg-chip,.dg-balk i,.dg-veld,.dg-v2-lijn{transition:none}
}