/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E378-spinnenweb-vergelijking/effect.css (04-10-2026), ongewijzigd. */
/* ==========================================================================
   E378 · Spinnenweb om te vergelijken
   Een spinnenweb (radar) met vijf tot acht eigenschappen. Elk product is een
   vlak dat vanuit het midden opbloeit; zet producten aan en uit om ze over
   elkaar te leggen en te vergelijken. Vlakken bewegen met transform en
   opacity; de scores staan ook in een tabel.
   Instellen op .e378 met CSS-variabelen:
     --e378-web     kleur van het web (standaard rgba(0,0,0,.12))
     --e378-maat    breedte van het web (standaard 420px)
   Per product: style="--e378-kleur: #2a78d6" op de knop en de tabelrij.
   ========================================================================== */

.e378 { display: grid; gap: clamp(22px, 4vw, 48px); align-items: center; }
@media (min-width: 880px) { .e378 { grid-template-columns: var(--e378-maat, 420px) minmax(0, 1fr); } }
.e378-web { display: none; width: min(100%, var(--e378-maat, 420px)); margin: 0 auto; }
.js .e378-web { display: block; }
.e378-web svg { display: block; width: 100%; height: auto; overflow: visible; }
.e378-ring { fill: none; stroke: var(--e378-web, rgba(0, 0, 0, .12)); }
.e378-spaak { stroke: var(--e378-web, rgba(0, 0, 0, .12)); }
.e378-as { font-size: 18px; font-weight: 600; fill: currentColor; }
.e378-vlak { transform-box: view-box; transform-origin: 200px 200px; }
.e378-vlak polygon { fill: var(--e378-kleur, currentColor); fill-opacity: .16; stroke: var(--e378-kleur, currentColor); stroke-width: 2.5; stroke-linejoin: round; }
.e378-vlak circle { fill: var(--e378-kleur, currentColor); stroke: #fff; stroke-width: 2; }
.e378-vlak.e378-uit { opacity: 0; transform: scale(.6); }

.e378-knoppen { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.js .e378-knoppen { display: flex; }
.e378-knop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.e378-knop::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--e378-kleur, currentColor); }
.e378-knop[aria-pressed="true"]::before { background: var(--e378-kleur, currentColor); }
.e378-knop:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.e378-tabel { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.e378-tabel caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.e378-tabel th, .e378-tabel td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--e378-web, rgba(0, 0, 0, .12)); text-align: left; font-weight: 400; }
.e378-tabel thead th { font-weight: 600; }
.e378-tabel td { text-align: center; }
.e378-tabelvak { overflow-x: auto; }
.js .e378-tabelvak {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.e378-uitleg { font-size: 15px; line-height: 1.55; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e378-vlak { transition: transform .6s cubic-bezier(.34, 1.3, .5, 1), opacity .35s ease; }
  html:not([data-rm]) .e378-klaar .e378-vlak { opacity: 0; transform: scale(0); }
  html:not([data-rm]) .e378-klaar.e378-aan .e378-vlak:not(.e378-uit) { opacity: 1; transform: none; }
}