/* =====================================================================
   levendig.css — VOORSTEL: stijlvariant "levendig" (meer kleur, vorm en beweging).
   Alles hieronder werkt ALLEEN als <html data-stijl="levendig"> staat.
   Aanzetten: Beheer → Huisstijl → "Stijl van de site", of ?stijl=levendig in de adresbalk.
   Terugdraaien: zet de instelling op "Rustig", of haal dit bestand + levendig.js uit index.html.
   Merk: navy/staalblauw blijft de basis; twee warme accenten uit de docentfiguren:
   mosterd (haarelastiek van Noor) en koraal. Tekst op mosterd/koraal is altijd navy (contrast AA).
   ===================================================================== */
@property --lv-p { syntax: "<number>"; inherits: false; initial-value: 0; }

:root[data-stijl="levendig"] {
  --lv-mosterd: #F2B640; --lv-mosterd-d: #C98C14;
  --lv-koraal: #EE8B74; --lv-koraal-d: #C9634C;
  --lv-mint: #8ED1B0; --lv-lila: #B7A6E8; --lv-lucht: #9DB8E4;
  --lv-navy: #0E1A33;
  --lv-blob-a: color-mix(in srgb, var(--lv-mosterd) 22%, transparent);
  --lv-blob-b: color-mix(in srgb, var(--lv-koraal) 18%, transparent);
  --lv-blob-c: color-mix(in srgb, #7B98CF 22%, transparent);
}
@media (prefers-color-scheme: dark) { :root[data-stijl="levendig"]:not([data-theme="light"]) {
  --lv-blob-a: color-mix(in srgb, var(--lv-mosterd) 10%, transparent); --lv-blob-b: color-mix(in srgb, var(--lv-koraal) 9%, transparent); --lv-blob-c: color-mix(in srgb, #7B98CF 12%, transparent); } }
:root[data-stijl="levendig"][data-theme="dark"] {
  --lv-blob-a: color-mix(in srgb, var(--lv-mosterd) 10%, transparent); --lv-blob-b: color-mix(in srgb, var(--lv-koraal) 9%, transparent); --lv-blob-c: color-mix(in srgb, #7B98CF 12%, transparent); }

/* ---------- 1. Achtergrond: zachte gekleurde vlakken achter de pagina ---------- */
:root[data-stijl="levendig"] body {
  background-image:
    radial-gradient(420px 360px at 100% 260px, var(--lv-blob-a), transparent 70%),
    radial-gradient(380px 340px at 0% 900px, var(--lv-blob-c), transparent 70%),
    radial-gradient(420px 360px at 100% 1700px, var(--lv-blob-b), transparent 70%) !important;
  background-repeat: no-repeat !important;
}

/* ---------- 2. Koppen: groter, speelser, met een mosterd 'markeerstreep' ---------- */
:root[data-stijl="levendig"] h1 { font-size: clamp(34px, 6vw, 58px); letter-spacing: -.035em; }
:root[data-stijl="levendig"] .t-hero h1,
:root[data-stijl="levendig"] #view > section.wrap > h1:first-of-type { position: relative; }
:root[data-stijl="levendig"] .t-hero h1::after,
:root[data-stijl="levendig"] .hb h2.center::after {
  content: ""; display: block; width: 120px; height: 12px; margin-top: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 Q18 2 33 7 T63 7 T93 6 T117 5' fill='none' stroke='%23F2B640' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
:root[data-stijl="levendig"] .hb h2.center::after { margin: 8px auto 0; width: 96px; }
:root[data-stijl="levendig"] .hb h2.center { font-size: clamp(26px, 4vw, 38px); letter-spacing: -.03em; }
:root[data-stijl="levendig"] .eyebrow {
  display: inline-block; background: color-mix(in srgb, var(--lv-mosterd) 30%, var(--card)); color: var(--ink);
  padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; width: fit-content; align-self: flex-start;
}
:root[data-stijl="levendig"] .cdcard .eyebrow, :root[data-stijl="levendig"] .center > .eyebrow, :root[data-stijl="levendig"] .center .eyebrow { display: block; margin-left: auto; margin-right: auto; align-self: center; }
:root[data-stijl="levendig"] .verder .eyebrow, :root[data-stijl="levendig"] .cdcard .eyebrow,
:root[data-stijl="levendig"] .hb.bg-donker .eyebrow, :root[data-stijl="levendig"] .hb.bg-primair .eyebrow {
  background: rgba(255,255,255,.16); color: #fff; opacity: 1;
}

/* ---------- 3. Knoppen: warme koopknoppen die meeveren ---------- */
:root[data-stijl="levendig"] .btn { transition: transform .15s cubic-bezier(.3,1.6,.5,1), box-shadow .15s, filter .15s; }
:root[data-stijl="levendig"] .btn:hover:not(:disabled) { transform: translateY(-2px); }
:root[data-stijl="levendig"] .btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
:root[data-stijl="levendig"] .btn.warm,
:root[data-stijl="levendig"] .nav a.btn {
  background: var(--lv-mosterd) !important; color: var(--lv-navy) !important; font-weight: 800;
  box-shadow: 0 4px 0 var(--lv-mosterd-d) !important;
}
:root[data-stijl="levendig"] .btn.warm:hover:not(:disabled) { box-shadow: 0 6px 0 var(--lv-mosterd-d), 0 10px 22px color-mix(in srgb, var(--lv-mosterd) 45%, transparent) !important; }
:root[data-stijl="levendig"] .btn.warm:active:not(:disabled) { box-shadow: 0 1px 0 var(--lv-mosterd-d) !important; }
:root[data-stijl="levendig"] .btn.big { border-radius: 999px; padding: 0 26px; }
:root[data-stijl="levendig"] .aiBtn { background: var(--lv-navy); color: #fff; box-shadow: 0 5px 0 #000, 0 10px 24px rgba(0,0,0,.25); }
:root[data-stijl="levendig"] :focus-visible:not(h1):not([tabindex="-1"]) { outline: 3px solid var(--lv-mosterd-d); outline-offset: 3px; }

/* ---------- 4. Homepage ---------- */
:root[data-stijl="levendig"] .hb { position: relative; overflow-x: clip; }
/* hero: gekleurde blob achter Daan + zwevende vormpjes */
:root[data-stijl="levendig"] .t-hero .hs-blob {
  background: radial-gradient(circle at 35% 30%, #F5C863, #F2A98F) !important;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; animation: lv-blob 12s ease-in-out infinite;
}
:root[data-stijl="levendig"] .t-hero::before, :root[data-stijl="levendig"] .t-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
}
:root[data-stijl="levendig"] .t-hero::before { width: 210px; height: 210px; left: -70px; top: 30px; background: var(--lv-blob-c); }
:root[data-stijl="levendig"] .t-hero::after { width: 26px; height: 26px; left: 46%; top: 70px; background: var(--lv-koraal); opacity: .8; animation: lv-zweef 5s ease-in-out infinite; }
:root[data-stijl="levendig"] .t-hero .wrap { position: relative; z-index: 1; }
:root[data-stijl="levendig"] .hs-chip { animation: lv-zweef 4.5s ease-in-out infinite; }
:root[data-stijl="levendig"] .hs-chip.c2 { background: var(--lv-mosterd); color: var(--lv-navy); animation-delay: -1.5s; }
:root[data-stijl="levendig"] .hs-chip.c3 { animation-delay: -3s; }

/* USP-balk en tellers */
:root[data-stijl="levendig"] .usp-ic { background: color-mix(in srgb, var(--lv-mosterd) 28%, var(--card)); border-radius: 12px; }
:root[data-stijl="levendig"] .t-countdown.bg-donker { background: linear-gradient(120deg, #0E1A33, #2F4C82 70%, #3d5d97); color: #fff; }
:root[data-stijl="levendig"] .t-countdown.bg-donker h2, :root[data-stijl="levendig"] .t-countdown.bg-donker p { color: #fff; }
:root[data-stijl="levendig"] .cd-u { transition: transform .2s; }
:root[data-stijl="levendig"] .cd-u:hover { transform: rotate(-4deg) scale(1.06); }

/* docentenkaarten: elk een eigen kleur, speels kantelen bij aanwijzen */
:root[data-stijl="levendig"] .t-docenten { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lv-mosterd) 10%, transparent) 40%, transparent); }
:root[data-stijl="levendig"] .tkaart { border: none; border-radius: 22px; transition: transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
:root[data-stijl="levendig"] .tkaart:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 0 18px 34px rgba(14,26,51,.16); }
:root[data-stijl="levendig"] .tkaart:nth-child(even):hover { transform: translateY(-8px) rotate(1.5deg); }
:root[data-stijl="levendig"] .tkaart .tfig { --lvk: var(--lv-lucht); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--lvk) 70%, var(--card)) 0 46%, color-mix(in srgb, var(--lvk) 30%, var(--card)) 47%); }
:root[data-stijl="levendig"] .tkaart:nth-child(2) .tfig { --lvk: var(--lv-mosterd); }
:root[data-stijl="levendig"] .tkaart:nth-child(3) .tfig { --lvk: var(--lv-koraal); }
:root[data-stijl="levendig"] .tkaart:nth-child(4) .tfig { --lvk: var(--lv-mint); }
:root[data-stijl="levendig"] .tkaart:nth-child(5) .tfig { --lvk: var(--lv-lila); }
:root[data-stijl="levendig"] .tkaart:nth-child(6) .tfig { --lvk: #E8A5A0; }
:root[data-stijl="levendig"] .tvak { font-weight: 800; }

/* "zo werkt het": gekleurde stapnummers en kaarten */
:root[data-stijl="levendig"] .t-steps.bg-zacht { background: color-mix(in srgb, #7B98CF 16%, var(--paper)); }
:root[data-stijl="levendig"] .steps3 li { border: none; border-radius: 22px; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
:root[data-stijl="levendig"] .steps3 li:hover { transform: translateY(-6px); }
:root[data-stijl="levendig"] .steps3 li::before { background: var(--lv-mosterd); color: var(--lv-navy); transform: rotate(-8deg); border-radius: 14px; }
:root[data-stijl="levendig"] .steps3 li:nth-child(2)::before { background: var(--lv-koraal); transform: rotate(6deg); }
:root[data-stijl="levendig"] .steps3 li:nth-child(3)::before { background: var(--lv-mint); }
:root[data-stijl="levendig"] .st-fig { background: radial-gradient(circle at 50% 70%, var(--lv-blob-a), transparent 70%); }

/* pakketten */
:root[data-stijl="levendig"] .pkg { border-radius: 24px; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
:root[data-stijl="levendig"] .pkg:hover { transform: translateY(-6px); }
:root[data-stijl="levendig"] .pkg-badge { background: var(--lv-mosterd); color: var(--lv-navy); transform: rotate(-3deg); }
:root[data-stijl="levendig"] .chip.on { background: var(--lv-navy); color: #fff; }
:root[data-stijl="levendig"] .proefb { border-radius: 24px; border-color: var(--lv-mosterd-d); background: color-mix(in srgb, var(--lv-mosterd) 12%, var(--card)); }

/* infokaarten onderaan */
:root[data-stijl="levendig"] .icard { border-radius: 24px; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
:root[data-stijl="levendig"] .icard:hover { transform: translateY(-6px) rotate(-1deg); }
:root[data-stijl="levendig"] .icard.c0 { background: color-mix(in srgb, var(--lv-mosterd) 26%, var(--card)); }
:root[data-stijl="levendig"] .icard.c1 { background: color-mix(in srgb, var(--lv-koraal) 20%, var(--card)); }
:root[data-stijl="levendig"] .icard.c2 { background: color-mix(in srgb, var(--lv-mint) 26%, var(--card)); }

/* ---------- 5. Dashboard ---------- */
:root[data-stijl="levendig"] .verder { overflow: hidden; isolation: isolate; }
:root[data-stijl="levendig"] .verder::before, :root[data-stijl="levendig"] .verder::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
:root[data-stijl="levendig"] .verder::before { width: 300px; height: 300px; right: 40px; bottom: -130px; background: var(--lv-mosterd); }
:root[data-stijl="levendig"] .verder::after { width: 90px; height: 90px; right: -24px; top: -24px; background: var(--lv-koraal); }
:root[data-stijl="levendig"] .vd-bar { background: rgba(255,255,255,.22); height: 12px; border-radius: 99px; }
:root[data-stijl="levendig"] .vd-tip { border-radius: 18px 18px 18px 4px; }

/* XP / streak / ranglijst: grote, kleurrijke tegels */
:root[data-stijl="levendig"] .stats3 .statc { border-radius: 22px; position: relative; overflow: hidden; }
:root[data-stijl="levendig"] .stats3 .statc:hover { transform: translateY(-4px) rotate(-.6deg); }
:root[data-stijl="levendig"] .stats3 .statc:nth-child(1) { background: linear-gradient(140deg, color-mix(in srgb, var(--lv-koraal) 38%, var(--card)), color-mix(in srgb, var(--lv-koraal) 14%, var(--card))); }
:root[data-stijl="levendig"] .stats3 .statc:nth-child(2) { background: linear-gradient(140deg, color-mix(in srgb, var(--lv-mosterd) 45%, var(--card)), color-mix(in srgb, var(--lv-mosterd) 16%, var(--card))); }
:root[data-stijl="levendig"] .stats3 .statc:nth-child(3) { background: linear-gradient(140deg, color-mix(in srgb, #7B98CF 36%, var(--card)), color-mix(in srgb, #7B98CF 12%, var(--card))); }
:root[data-stijl="levendig"] .stats3 .statc::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.28); pointer-events: none; }
:root[data-stijl="levendig"] .statc .big { font-size: 46px; line-height: 1.05; }
:root[data-stijl="levendig"] .stats3 .statc:nth-child(1) .big .ic-w,
:root[data-stijl="levendig"] .stats3 .statc:nth-child(1) .big svg { animation: lv-vlam 1.6s ease-in-out infinite; transform-origin: 50% 90%; display: inline-block; }
:root[data-stijl="levendig"] .stats3 .statc:nth-child(2) .big .ic-w,
:root[data-stijl="levendig"] .stats3 .statc:nth-child(2) .big svg { animation: lv-draai 6s ease-in-out infinite; display: inline-block; }
:root[data-stijl="levendig"] .statc .bar, :root[data-stijl="levendig"] .course .bar { height: 14px; border-radius: 99px; background: color-mix(in srgb, var(--card) 70%, transparent); }
:root[data-stijl="levendig"] .statc .bar i {
  border-radius: 99px; min-width: 14px; animation: lv-balk 1.1s cubic-bezier(.2,.8,.2,1) both;
  background: repeating-linear-gradient(-45deg, var(--lv-mosterd-d) 0 8px, var(--lv-mosterd) 8px 16px); background-size: 200% 100%;
}
:root[data-stijl="levendig"] .daystrip > * { transition: transform .2s; }

/* vakkaarten: kleurband bovenaan, ring die volloopt */
:root[data-stijl="levendig"] .course { border-radius: 22px; overflow: hidden; position: relative; padding-top: 28px; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
:root[data-stijl="levendig"] .course::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, #2F4C82, #7B98CF 40%, var(--lv-mosterd) 75%, var(--lv-koraal)); }
:root[data-stijl="levendig"] .course:hover { transform: translateY(-4px); }
:root[data-stijl="levendig"] .course .vakicoon { width: 64px; height: 64px; border-radius: 20px; transform: rotate(-6deg); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
:root[data-stijl="levendig"] .course:hover .vakicoon { transform: rotate(4deg) scale(1.08); }
:root[data-stijl="levendig"] .ring {
  animation: lv-ring 1.2s cubic-bezier(.2,.8,.2,1) .2s both;
  background: conic-gradient(var(--good) calc(var(--lv-p) * 1%), color-mix(in srgb, var(--good) 16%, var(--card)) 0);
}
:root[data-stijl="levendig"] .pring {
  animation: lv-ring 1.2s cubic-bezier(.2,.8,.2,1) .15s both;
  background: conic-gradient(var(--k) calc(var(--lv-p) * 1%), color-mix(in srgb, var(--k) 18%, transparent) 0);
}
:root[data-stijl="levendig"] .ring > *, :root[data-stijl="levendig"] .ring { font-weight: 800; }
:root[data-stijl="levendig"] .todaycard, :root[data-stijl="levendig"] .btdash, :root[data-stijl="levendig"] .cdcard { border-radius: 22px; }
:root[data-stijl="levendig"] .cdcard { background: linear-gradient(120deg, #0E1A33, #2F4C82 75%) !important; color: #fff !important; }
:root[data-stijl="levendig"] .cd-u { border-radius: 14px; }

/* ---------- 6. Vakpagina ---------- */
:root[data-stijl="levendig"] .vakkop { position: relative; isolation: isolate; }
:root[data-stijl="levendig"] .vakkop::before, :root[data-stijl="levendig"] .vakkop::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
:root[data-stijl="levendig"] .vakkop::before { width: 260px; height: 260px; right: 9%; bottom: -150px; background: var(--lv-mosterd); }
:root[data-stijl="levendig"] .vakkop::after { width: 70px; height: 70px; right: 32%; top: 24px; background: var(--lv-koraal); opacity: .9; }
:root[data-stijl="levendig"] .sprintcard { border-radius: 22px; border-width: 2px; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
:root[data-stijl="levendig"] .sprintcard:hover { transform: translateY(-4px); }
:root[data-stijl="levendig"] .sprintcard.btkaart { background: color-mix(in srgb, var(--lv-mosterd) 18%, var(--card)); border-color: transparent; }
:root[data-stijl="levendig"] h2.group .gcode { border-radius: 14px; transform: rotate(-6deg); box-shadow: 0 4px 0 color-mix(in srgb, var(--k) 60%, #000); }
:root[data-stijl="levendig"] .domgrid .dom { border-radius: 20px; border: 2px solid color-mix(in srgb, var(--k) 22%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--k) 9%, var(--card)), var(--card) 60%); }
:root[data-stijl="levendig"] .domgrid .dom:hover { transform: translateY(-4px) rotate(-.8deg); border-color: var(--k); box-shadow: 0 12px 24px color-mix(in srgb, var(--k) 22%, transparent); }
:root[data-stijl="levendig"] .domgrid .dom.af { background: linear-gradient(135deg, color-mix(in srgb, var(--good) 16%, var(--card)), var(--card)); }

/* ---------- 7. Les ---------- */
:root[data-stijl="levendig"] .lesstappen a { transition: transform .15s cubic-bezier(.3,1.6,.5,1), background .2s; }
:root[data-stijl="levendig"] .lesstappen a:hover { transform: translateY(-2px); }
:root[data-stijl="levendig"] .lesstappen a.on { background: var(--lv-navy); border-color: var(--lv-navy); color: #fff; }
:root[data-stijl="levendig"] .lesstappen a.on .sn { background: var(--lv-mosterd); color: var(--lv-navy); }
:root[data-stijl="levendig"] .lesdeel.card, :root[data-stijl="levendig"] .les .card { border-radius: 22px; }
:root[data-stijl="levendig"] .th-voorbeeld { background: color-mix(in srgb, var(--lv-mosterd) 10%, var(--card)); }
:root[data-stijl="levendig"] .th-tip { background: color-mix(in srgb, var(--lv-mint) 16%, var(--card)); }
:root[data-stijl="levendig"] .th-check { background: color-mix(in srgb, var(--lv-koraal) 10%, var(--card)); }
:root[data-stijl="levendig"] .toetscard { background: linear-gradient(135deg, color-mix(in srgb, var(--lv-mosterd) 22%, var(--card)), var(--card) 70%); }
:root[data-stijl="levendig"] .toetsxp { background: var(--lv-mosterd); color: var(--lv-navy); font-weight: 800; border-radius: 999px; padding: 4px 12px; }
:root[data-stijl="levendig"] .flip { transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
:root[data-stijl="levendig"] .flip:hover { transform: translateY(-3px) rotate(-1deg); }
/* antwoorden: goed = huppeltje, fout = schudden */
:root[data-stijl="levendig"] .opt { transition: transform .15s, border-color .15s; border-radius: 14px; }
:root[data-stijl="levendig"] .opt:hover { transform: translateX(3px); }
:root[data-stijl="levendig"] .opt.ok { animation: lv-hup .5s cubic-bezier(.3,1.6,.5,1); }
:root[data-stijl="levendig"] .opt.no { animation: lv-schud .4s; }
:root[data-stijl="levendig"] .fb.ok { animation: lv-pop .4s cubic-bezier(.3,1.6,.5,1); }
:root[data-stijl="levendig"] .scoreball.ok { animation: lv-pop .6s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 0 10px color-mix(in srgb, var(--good) 18%, transparent); }
:root[data-stijl="levendig"] .toast.ok { animation: lv-pop .4s cubic-bezier(.3,1.6,.5,1); }

/* ---------- 8. Animaties ---------- */
@keyframes lv-blob { 0%,100% { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; } 50% { border-radius: 56% 44% 42% 58% / 44% 56% 46% 54%; } }
@keyframes lv-zweef { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes lv-vlam { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.12) rotate(3deg); } }
@keyframes lv-draai { 0%,80%,100% { transform: rotate(0); } 90% { transform: rotate(72deg) scale(1.15); } }
@keyframes lv-balk { from { width: 0; } }
@keyframes lv-ring { from { --lv-p: 0; } to { --lv-p: var(--p); } }
@keyframes lv-hup { 0% { transform: scale(1); } 40% { transform: scale(1.04) translateY(-3px); } 100% { transform: none; } }
@keyframes lv-schud { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes lv-pop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: none; } }

/* ---------- 9. Mobiel ---------- */
@media (max-width: 760px) {
  :root[data-stijl="levendig"] .verder::before { width: 200px; height: 200px; right: -30px; bottom: -70px; }
  :root[data-stijl="levendig"] .verder::after { width: 60px; height: 60px; right: -18px; top: -18px; }
  :root[data-stijl="levendig"] .statc .big { font-size: 38px; }
  :root[data-stijl="levendig"] .vakkop::before { width: 160px; height: 160px; right: -40px; bottom: -80px; }
  :root[data-stijl="levendig"] .vakkop::after { display: none; }
  :root[data-stijl="levendig"] .t-hero::before { width: 140px; height: 140px; }
  :root[data-stijl="levendig"] body { background-image: radial-gradient(300px 260px at 110% 6%, var(--lv-blob-a), transparent 70%), radial-gradient(300px 260px at -10% 60%, var(--lv-blob-c), transparent 70%) !important; }
}

/* ---------- 10. Minder beweging (instelling van telefoon/computer) ---------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-stijl="levendig"] *, :root[data-stijl="levendig"] *::before, :root[data-stijl="levendig"] *::after {
    animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important;
  }
  :root[data-stijl="levendig"] .btn:hover, :root[data-stijl="levendig"] .tkaart:hover, :root[data-stijl="levendig"] .icard:hover,
  :root[data-stijl="levendig"] .stats3 .statc:hover, :root[data-stijl="levendig"] .domgrid .dom:hover { transform: none !important; }
}