/* Labee leerplatform — stijl volgens de dashboardproef (ontwerp/proef-dashboard/).
   Alle kleuren komen uit één huiskleur (--merk), zodat een klantomgeving later alleen die hoeft te zetten.
   Rood (de huiskleur) is voor handelen; goud alleen voor wat iemand bereikt. */

@font-face{font-family:"Plus Jakarta Sans";src:url(lettertypen/PlusJakartaSans-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";src:url(lettertypen/PlusJakartaSans-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --merk:#852020;
  --goud:#D5932E; --goud-licht:#F6D28E; --goud-donker:#9C6614;
  --f:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:22px; --rs:14px;
  /* licht */
  --bg:color-mix(in oklab, var(--merk) 5%, #FAF7F2);
  --vlak:color-mix(in oklab, var(--merk) 1.5%, #FFFFFF);
  --vlak-2:color-mix(in oklab, var(--merk) 6%, #F3EEE7);
  --lijn:color-mix(in oklab, var(--merk) 10%, #E6DFD6);
  --invoer-rand:color-mix(in oklab, var(--merk) 14%, #CFC6BC);
  --tekst:color-mix(in oklab, var(--merk) 14%, #191314);
  --tekst-2:color-mix(in oklab, var(--merk) 12%, #4A4041);
  --gedempt:color-mix(in oklab, var(--merk) 12%, #6E6364);
  --accent:var(--merk);
  --accent-zacht:color-mix(in oklab, var(--merk) 9%, transparent);
  --knop:var(--merk); --knop-ink:#FFFFFF;
  --goud-zacht:color-mix(in oklab, var(--goud) 18%, transparent); --goud-ink:#7A4E0C;
  --gat:color-mix(in oklab, var(--merk) 6%, #ECE6DF); --gat-rand:color-mix(in oklab, var(--merk) 14%, #CBC2B8); --gat-schaduw:.25;
  --fout-bg:color-mix(in oklab, #C2272D 11%, transparent); --fout-ink:#8E1B1B;
  --schaduw:0 1px 2px color-mix(in oklab, var(--merk) 12%, rgba(30,20,20,.06)), 0 8px 24px -12px color-mix(in oklab, var(--merk) 25%, rgba(30,20,20,.18));
  --schaduw-op:0 2px 4px color-mix(in oklab, var(--merk) 14%, rgba(30,20,20,.08)), 0 22px 44px -18px color-mix(in oklab, var(--merk) 40%, rgba(30,20,20,.30));
  --gloed:color-mix(in oklab, var(--merk) 22%, transparent);
  --logo-achter:.09;
  --sel:color-mix(in oklab, var(--merk) 16%, transparent);
  color-scheme:light;
}
:root[data-thema="donker"]{
  --bg:color-mix(in oklab, var(--merk) 9%, #110E0F);
  --vlak:color-mix(in oklab, var(--merk) 7%, #1A1617);
  --vlak-2:color-mix(in oklab, var(--merk) 10%, #231E1F);
  --lijn:rgba(255,255,255,.08);
  --invoer-rand:rgba(255,255,255,.16);
  --tekst:#F6F1ED; --tekst-2:#DAD2CC; --gedempt:#A89F9A;
  --accent:color-mix(in oklab, var(--merk), #FFFFFF 52%);
  --accent-zacht:color-mix(in oklab, var(--merk) 30%, transparent);
  --knop:color-mix(in oklab, var(--merk), #FFFFFF 10%);
  --goud-zacht:color-mix(in oklab, var(--goud) 20%, transparent); --goud-ink:#F0C47A;
  --gat:#151112; --gat-rand:#3B3436; --gat-schaduw:.7;
  --fout-bg:rgba(255,120,120,.12); --fout-ink:#FFA3A3;
  --schaduw:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -14px rgba(0,0,0,.6);
  --schaduw-op:0 1px 0 rgba(255,255,255,.06) inset, 0 26px 50px -18px rgba(0,0,0,.75);
  --gloed:color-mix(in oklab, var(--merk) 55%, transparent);
  --logo-achter:.14;
  --sel:color-mix(in oklab, var(--merk) 45%, transparent);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;background:var(--bg);color:var(--tekst);font-family:var(--f);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;caret-color:var(--accent);scrollbar-color:var(--lijn) transparent;transition:background-color .4s ease}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:var(--accent);text-underline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--f);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:34px;line-height:1.1;font-weight:700}
h2{font-size:18px;font-weight:700}
p{margin:0}
.gedempt{color:var(--gedempt)}
.verborgen{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cijfer{font-variant-numeric:tabular-nums}
.oog{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gedempt)}

/* ───────────── knoppen ───────────── */
button{font-family:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.6}
.knop{min-height:46px;padding:0 22px;border-radius:var(--rs);border:1px solid color-mix(in oklab,var(--knop),#000 18%);background:var(--knop);color:var(--knop-ink);
  font-size:15.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(40,8,8,.25);
  transition:transform .25s cubic-bezier(.2,.9,.2,1),box-shadow .25s,filter .2s,background-color .2s,border-color .2s,color .2s}
.knop:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -8px var(--gloed)}
.knop:active:not(:disabled){transform:translateY(1px)}
.knop svg{flex:none;transition:transform .3s cubic-bezier(.2,.9,.2,1)}
.knop:hover:not(:disabled) svg.vooruit{transform:translateX(3px)}
.knop--2{background:var(--vlak);color:var(--tekst);border:1px solid var(--lijn);box-shadow:none;font-weight:600}
.knop--2:hover:not(:disabled){border-color:var(--accent);color:var(--accent);filter:none;box-shadow:none}
.knop--wit{background:#FFFFFF;color:#1B1213;border-color:rgba(255,255,255,.6)}
.knop--glas{background:rgba(255,255,255,.12);color:#FFFFFF;border:1px solid rgba(255,255,255,.3);box-shadow:none;backdrop-filter:blur(6px)}
.knop--glas:hover:not(:disabled){box-shadow:none}
.knop--vol{width:100%;min-height:52px;font-size:16px}
.knop--klein{min-height:38px;padding:0 14px;font-size:14px;border-radius:12px}
.knop--gevaar{border:1px solid #7A1515;background:#9B1C1C;color:#FFFFFF}
:root[data-thema="donker"] .knop--gevaar{background:#B32626}
.knop--rand-gevaar{border:1px solid #9B1C1C;background:transparent;color:#9B1C1C;box-shadow:none}
:root[data-thema="donker"] .knop--rand-gevaar{border-color:#C25050;color:#FFA3A3}
.knop--rand-gevaar:hover:not(:disabled){box-shadow:none}
.link{align-self:flex-start;min-height:40px;padding:0;border:0;background:none;color:var(--accent);font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.link--stil{color:var(--tekst-2);font-weight:600}
.link:disabled{color:var(--gedempt);text-decoration:none;opacity:1}
.knoppen{display:flex;flex-wrap:wrap;gap:10px}
.rond{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--lijn);background:var(--vlak);color:var(--tekst-2);display:grid;place-items:center;
  transition:transform .35s cubic-bezier(.2,.9,.2,1),color .2s,border-color .2s}
.rond:hover{color:var(--accent);border-color:var(--accent);transform:rotate(-12deg)}

/* ───────────── velden en meldingen ───────────── */
.veld{display:flex;flex-direction:column;gap:8px}
.veld label,.veld legend{font-size:14.5px;font-weight:700}
.veld input:not([type=checkbox]):not([type=radio]),.veld select{width:100%;min-height:50px;padding:0 16px;border:1px solid var(--invoer-rand);border-radius:var(--rs);background:var(--vlak);color:var(--tekst);font:inherit;font-size:16px;
  transition:border-color .25s,box-shadow .25s}
.veld input:not([type=checkbox]):not([type=radio]):focus,.veld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-zacht)}
.veld input.code{font-size:24px;font-weight:700;letter-spacing:.3em}
.veld input.toegang{letter-spacing:.06em}
.veld .hulp{font-size:13.5px;color:var(--gedempt)}
fieldset.veld{border:0;margin:0;padding:0}
fieldset.veld legend{padding:0;margin-bottom:6px}
.melding{display:block;padding:12px 16px;border-radius:var(--rs);font-size:15px;font-weight:500;line-height:1.45;animation:opkomst .4s cubic-bezier(.22,1,.36,1) backwards}
.melding--ok{background:var(--goud-zacht);color:var(--goud-ink)}
.melding--fout{background:var(--fout-bg);color:var(--fout-ink)}

/* ───────────── basisvormen ───────────── */
.kaart{position:relative;min-width:0;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw)}
.kaart__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.balk{position:relative;height:8px;border-radius:999px;background:var(--vlak-2);overflow:hidden}
.balk>i,.balk>div{position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:inherit;background:var(--knop);transition:width .4s ease}
.balk>i{animation:groei 1.1s cubic-bezier(.2,.9,.2,1) .15s backwards}
.balk--goud>i{background:linear-gradient(90deg,var(--goud),var(--goud-licht))}
.stip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.stip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.stip--afgerond{background:var(--goud-zacht);color:var(--goud-ink)}
.stip--bezig{background:var(--accent-zacht);color:var(--accent)}
.stip--nieuw{background:var(--vlak-2);color:var(--gedempt)}
.stip--op{background:rgba(255,255,255,.94);color:#2A1D1E;backdrop-filter:blur(6px)}
.stip--op.stip--afgerond{color:#7A4E0C}

/* omslag: eigen beeld, of het logo in goud op de huiskleur */
.omslag{position:relative;overflow:hidden;background:var(--merk)}
.omslag>img,.omslag>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.met-zoom:hover .omslag>img,.met-zoom:hover .omslag>svg{transform:scale(1.045)}

/* badges */
.badges{display:flex;flex-wrap:wrap;gap:18px}
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;width:88px;padding:0;border:0;background:none;text-align:center;font-size:12px;line-height:1.3;color:var(--gedempt)}
.badge svg{width:60px;height:60px;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.badge--goud{color:var(--tekst-2)}
.badge--goud:hover svg{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.badge--goud .glans{transform:translateX(-70px);transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.badge--goud:hover .glans{transform:translateX(70px)}
.badge:not(.badge--goud):hover svg{transform:scale(.94)}
.badge[data-tip]{position:relative}
.badge[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);width:190px;padding:8px 10px;border-radius:10px;
  background:var(--tekst);color:var(--bg);font-size:12.5px;line-height:1.35;opacity:0;pointer-events:none;transition:.2s;z-index:4}
.badge[data-tip]:hover::after,.badge[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.badge-groot{display:flex;align-items:center;gap:18px}
.badge-groot svg{width:76px;height:76px;flex:none}

/* ring */
.ring{position:relative;flex:none}
.ring svg{display:block;transform:rotate(-90deg)}
.ring .boog{animation:ringvul 1.4s cubic-bezier(.2,.9,.2,1) .2s backwards}
.ring__midden{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring__getal{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em}
.ring__label{font-size:12.5px;color:var(--gedempt);margin-top:4px}

/* ───────────── inlogschermen ───────────── */
.auth{position:relative;isolation:isolate;min-height:100vh;padding:48px 16px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.auth__achter{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.auth__kunst{position:absolute;left:50%;top:50%;height:min(118vh,1100px);aspect-ratio:400/390;transform:translate(-50%,-50%)}
.auth__kunst svg,.auth__kunst canvas{position:absolute;inset:0;width:100%;height:100%}
.auth__kunst svg{opacity:var(--logo-achter)}
.auth__thema{position:fixed;top:16px;right:16px;z-index:2}
.auth__vak{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:20px}
.auth__kaart{width:100%;padding:36px 36px 32px;border-radius:calc(var(--r) + 6px);background:var(--vlak);border:1px solid var(--lijn);display:flex;flex-direction:column;gap:22px;
  box-shadow:0 1px 2px rgba(30,20,20,.05),0 30px 60px -28px color-mix(in oklab,var(--merk) 45%,rgba(30,20,20,.4))}
.auth__merk{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin-bottom:4px}
.auth__merk img{width:34px;height:32px;object-fit:contain}
.auth__merk .stappen{margin-left:auto}
.auth__kop{display:flex;flex-direction:column;gap:8px}
.auth__kop h1{font-size:30px}
.auth__kop p{color:var(--tekst-2)}
.auth__extra{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--gedempt)}
.auth__voet{width:100%;padding:0 8px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--gedempt)}
.auth__voet a{color:var(--tekst-2)}
.stappen{display:flex;gap:6px}
.stappen i{width:22px;height:4px;border-radius:999px;background:var(--lijn);transition:background .4s,width .4s cubic-bezier(.22,1,.36,1)}
.stappen i.aan{background:var(--knop);width:34px}
.cijfervakjes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cijfervakjes input{width:100%;min-width:0;height:62px;padding:0;text-align:center;font:inherit;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;border-radius:var(--rs);
  border:1px solid var(--invoer-rand);background:var(--vlak);color:var(--tekst);caret-color:var(--accent);
  transition:border-color .2s,box-shadow .2s,transform .35s cubic-bezier(.22,1,.36,1),background-color .3s}
.cijfervakjes input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-zacht);transform:translateY(-2px)}
.cijfervakjes input.gevuld{border-color:color-mix(in oklab,var(--accent) 45%,var(--lijn))}
.cijfervakjes.goed input{border-color:var(--goud);background:var(--goud-zacht);animation:goed .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--n) * 45ms)}
.cijfervakjes.fout{animation:schud .45s cubic-bezier(.36,.07,.19,.97)}

/* ───────────── schil: menu + werkvlak ───────────── */
.schil{min-height:100vh;display:grid;grid-template-columns:320px minmax(0,1fr)}
.menu{position:sticky;top:0;height:100vh;padding:16px;display:flex;min-width:0}
.menu__paneel{flex:1;min-width:0;display:flex;flex-direction:column;gap:26px;padding:22px 16px;border-radius:var(--r);background:var(--vlak);border:1px solid var(--lijn);box-shadow:var(--schaduw);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
.merk{display:flex;align-items:center;gap:12px;padding:0 8px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.merk img{width:40px;height:38px;object-fit:contain}
.nav{position:relative;display:flex;flex-direction:column;gap:4px}
.nav__wijzer,.nav__zweef{position:absolute;left:0;right:0;top:0;height:46px;border-radius:var(--rs);pointer-events:none}
.nav__wijzer{background:var(--accent-zacht);transition:transform .45s cubic-bezier(.2,.9,.2,1),height .45s cubic-bezier(.2,.9,.2,1)}
.nav__zweef{background:var(--vlak-2);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.nav:hover .nav__zweef{opacity:1}
.nav__rij{position:relative;display:flex;align-items:center}
.nav__rij .nav__knop{flex:1;width:auto;min-width:0}
.nav__knop{position:relative;width:100%;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border:0;background:none;border-radius:var(--rs);
  color:var(--tekst-2);font-size:15.5px;font-weight:600;text-align:left;transition:color .25s}
.nav__knop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__knop svg{flex:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.nav__knop:hover{color:var(--tekst)}
.nav__knop:hover svg{transform:translateX(2px) scale(1.06)}
.nav__knop[aria-current="page"]{color:var(--accent)}
.nav__tel{margin-left:auto;font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--vlak-2);color:var(--gedempt)}
.menu__klap{position:relative;width:32px;height:32px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--gedempt);display:grid;place-items:center}
.menu__klap:hover{color:var(--tekst)}
.menu__klap svg{transition:transform .3s cubic-bezier(.2,.9,.2,1)}
.menu__klap[aria-expanded="false"] svg{transform:rotate(-90deg)}
.menu__sub{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 22px;padding-left:12px;border-left:1px solid var(--lijn)}
.menu__sub button{position:relative;min-height:36px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:var(--gedempt);font-size:14px;font-weight:500;line-height:1.3;text-align:left;transition:color .2s,background-color .2s}
.menu__sub button:hover{color:var(--tekst);background:var(--vlak-2)}
.menu__sub button[aria-current="page"]{color:var(--accent);font-weight:600}
.menu__voet{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.ik{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--rs);background:var(--vlak-2)}
.ik__knop{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;text-align:left}
.initialen{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--knop);color:#FFFFFF;font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ik__naam{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ik__naam b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ik__naam small{font-size:12.5px;color:var(--gedempt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.werk{min-width:0;padding:32px 40px 56px 28px}
.werk__in{max-width:1180px;display:flex;flex-direction:column;gap:28px;animation:verschijn .25s ease-out both}
.kop{display:flex;flex-direction:column;gap:6px}
.kop p{color:var(--gedempt)}
.kop-rij{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.apparaat{font-size:13.5px;color:var(--gedempt)}

/* ───────────── welkom ───────────── */
.datum{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:var(--vlak);border:1px solid var(--lijn);font-size:14px;color:var(--tekst-2)}
.bento{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px}
.bento>.breed{grid-column:1/-1}
.held{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);padding:30px 32px;min-height:260px;color:#FFFFFF;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in oklab,var(--merk),#FFFFFF 14%),var(--merk) 55%,color-mix(in oklab,var(--merk),#000 30%));
  display:flex;flex-direction:column;gap:14px;justify-content:space-between;box-shadow:var(--schaduw)}
.held__kunst{position:absolute;right:-30px;top:-26px;height:150%;aspect-ratio:400/390;z-index:-1;pointer-events:none}
.held__kunst svg,.held__kunst canvas{position:absolute;inset:0;width:100%;height:100%}
.held__kunst svg{opacity:.13}
.held .oog{color:rgba(255,255,255,.75)}
.held h2{font-size:28px;line-height:1.15;max-width:22ch}
.held__les{color:rgba(255,255,255,.86);font-size:15px}
.held__voet{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.held__balk{flex:1;min-width:160px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:rgba(255,255,255,.8)}
.held .balk{background:rgba(255,255,255,.18)}
.held .balk>i{background:linear-gradient(90deg,var(--goud),var(--goud-licht))}
.voortgang-kaart{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.mini-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;width:100%}
.mini{padding:12px 14px;border-radius:var(--rs);background:var(--vlak-2);text-align:left}
.mini b{display:block;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mini b small{font-size:14px;font-weight:600;color:var(--gedempt)}
.mini>span{font-size:12.5px;color:var(--gedempt)}
.blok{padding:24px;display:flex;flex-direction:column;gap:18px}
.lijst{display:flex;flex-direction:column}
.rij{display:grid;grid-template-columns:72px minmax(0,1fr) 160px 150px 28px;align-items:center;gap:18px;padding:12px;margin:0 -12px;border:0;border-radius:var(--rs);background:none;text-align:left;transition:background .25s}
.rij:hover{background:var(--vlak-2)}
.rij+.rij{border-top:1px solid var(--lijn)}
.rij:hover,.rij:hover+.rij{border-top-color:transparent}
.rij .omslag{width:72px;height:50px;border-radius:10px}
.rij b{display:block;font-size:15.5px;line-height:1.3}
.rij small{color:var(--gedempt);font-size:13px}
.rij .stip{justify-self:start}
.rij__balk{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--gedempt)}
.rij__pijl{color:var(--gedempt);transition:transform .3s cubic-bezier(.2,.9,.2,1),color .2s}
.rij:hover .rij__pijl{transform:translateX(4px);color:var(--accent)}

/* ───────────── mijn e-learnings ───────────── */
.filter{position:relative;display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--vlak);border:1px solid var(--lijn)}
.filter__duim{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:999px;background:var(--tekst);pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.9,.2,1),width .45s cubic-bezier(.2,.9,.2,1)}
.filter button{position:relative;z-index:1;height:36px;padding:0 16px;border:0;border-radius:999px;background:none;font-size:14px;font-weight:600;color:var(--tekst-2);transition:color .3s}
.filter button[aria-pressed="true"]{color:var(--bg)}
.filter button small{opacity:.65;margin-left:4px}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.tegel{display:flex;flex-direction:column;padding:10px;overflow:hidden;cursor:pointer;text-align:left;transition:box-shadow .9s cubic-bezier(.22,1,.36,1);backface-visibility:hidden}
.tegel:hover{box-shadow:var(--schaduw-op)}
.tegel .omslag{aspect-ratio:16/10;max-width:100%;border-radius:calc(var(--r) - 8px)}
.tegel__stip{position:absolute;left:22px;top:22px;z-index:2}
.tegel__tekst{display:flex;flex-direction:column;gap:12px;padding:16px 12px 10px;flex:1}
.tegel h2{font-size:18px;line-height:1.25}
.tegel__meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--gedempt)}
.tegel__meta span{display:inline-flex;align-items:center;gap:5px}
.tegel__voet{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--gedempt)}
.tegel__actie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.tegel__actie button{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;color:var(--accent);font-size:14.5px;font-weight:700}
.tegel__actie button svg{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.tegel:hover .tegel__actie button svg{transform:translateX(4px)}
.code-vangnet{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.code-invullen{width:100%;max-width:460px;padding:24px;display:flex;flex-direction:column;gap:14px}

/* ───────────── startscherm ───────────── */
.terug{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0;border:0;background:none;color:var(--tekst-2);font-size:15px;font-weight:600}
.terug svg{transition:transform .3s cubic-bezier(.2,.9,.2,1)}
.terug:hover{color:var(--accent)}
.terug:hover svg{transform:translateX(-4px)}
.start-held{position:relative;min-height:380px;border-radius:var(--r);overflow:hidden;color:#FFFFFF;display:flex;align-items:flex-end;box-shadow:var(--schaduw)}
.start-held>.omslag{position:absolute;inset:0}
.start-held__waas{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,9,10,.9) 0%,rgba(14,9,10,.68) 42%,rgba(14,9,10,0) 78%)}
.start-held__tekst{position:relative;padding:36px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:580px}
.start-held h1{font-size:42px;line-height:1.05;letter-spacing:-.035em}
.start-held__intro{color:rgba(255,255,255,.86);font-size:16.5px;max-width:48ch}
.start-held__meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.82)}
.start-held__meta span{display:inline-flex;align-items:center;gap:6px}
.start-held .knoppen{margin-top:6px}
.start-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.zijkant{display:flex;flex-direction:column;gap:20px}
.gegevenslijst{margin:0;display:flex;flex-direction:column;gap:12px;font-size:15px}
.gegevenslijst div{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--lijn)}
.gegevenslijst div:last-child{border-bottom:0;padding-bottom:0}
.gegevenslijst dt{color:var(--gedempt)}
.gegevenslijst dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* ───────────── e-learning spelen ───────────── */
.spelen{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.spelen__balk{flex-shrink:0;min-height:52px;padding:4px 12px;background:var(--vlak);border-bottom:1px solid var(--lijn);display:flex;align-items:center}
.spelen iframe{flex-grow:1;width:100%;border:0;background:var(--vlak)}

/* ───────────── account ───────────── */
.account{max-width:680px;display:flex;flex-direction:column;gap:20px}
.account .kaart{padding:24px;display:flex;flex-direction:column;gap:14px}
.gegeven{display:flex;flex-direction:column}
.gegeven span{font-size:13.5px;color:var(--gedempt)}
.gegeven b{font-weight:600;overflow-wrap:anywhere}

/* ───────────── mijn groep ───────────── */
.groep{display:flex;flex-direction:column;gap:24px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat{padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.stat__label{font-size:13.5px;color:var(--gedempt);font-weight:600}
.stat b{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--tekst)}
.stat__onder{font-size:13px;color:var(--gedempt)}
.stat--goud{background:linear-gradient(160deg,var(--goud-zacht),var(--vlak) 70%)}
.stat--goud b{color:var(--goud-ink)}
.groep-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.groep-tegel{text-align:left;font:inherit;color:inherit;cursor:pointer;transition:box-shadow .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.groep-tegel:hover{box-shadow:var(--schaduw-op);transform:translateY(-3px)}
.groep-tegel__cijfers{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--gedempt)}
.groep-tegel__cijfers b{color:var(--tekst);font-size:18px}
.tabel-voortgang{display:flex;align-items:center;gap:10px;min-width:140px}
.tabel-voortgang .balk{flex:1;height:6px}
.tabel-voortgang span{font-size:13px;color:var(--gedempt);min-width:36px;text-align:right}
.herinnering__tekst{width:100%;padding:12px 14px;border:1px solid var(--invoer-rand);border-radius:var(--rs);background:var(--vlak);color:var(--tekst);font:inherit;font-size:14.5px;line-height:1.55;resize:vertical}
.persoon{display:flex;flex-direction:column;line-height:1.3;min-width:160px}
.persoon small{color:var(--gedempt);font-size:13px}
.cel-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.managers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.managers li{display:flex;align-items:center;gap:12px}
.managers li>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.managers small{color:var(--gedempt);font-size:13px}
.initialen--klein{width:32px;height:32px;font-size:13px}

/* laden */
.laden{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--gedempt)}

/* ───────────── beweging ───────────── */
@keyframes opkomst{from{opacity:0;transform:translateY(14px)}}
@keyframes verschijn{from{opacity:0}}
@keyframes groei{from{width:0}}
@keyframes ringvul{from{stroke-dashoffset:var(--omtrek)}}
@keyframes goed{40%{transform:translateY(-5px)}}
@keyframes schud{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* "backwards": na afloop houdt de animatie niets vast, zodat hover-overgangen soepel blijven */
.in{animation:opkomst .7s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.a-screen{animation:verschijn .2s ease-out both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}}

/* ───────────── smallere schermen ───────────── */
@media (max-width:1100px){
  .rij{grid-template-columns:64px minmax(0,1fr) 130px 28px}
  .rij__balk{display:none}
}
@media (max-width:900px){
  .schil{grid-template-columns:minmax(0,1fr)}
  .menu{position:static;height:auto;padding:12px 16px 0}
  .menu__paneel{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 12px;overflow:visible}
  .merk span{display:none}
  .nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav__wijzer,.nav__zweef,.menu__klap,.menu__sub,.nav__tel{display:none !important}
  .nav__knop{width:auto;min-height:42px;padding:0 12px}
  .nav__knop[aria-current="page"]{background:var(--accent-zacht)}
  .menu__voet{margin:0 0 0 auto;flex-direction:row;align-items:center}
  .ik{padding:0;background:none}
  .ik__naam{display:none}
  .werk{padding:24px 16px 40px}
  .bento,.start-grid{grid-template-columns:minmax(0,1fr)}
  .rij{grid-template-columns:56px minmax(0,1fr) 24px}
  .rij .omslag{width:56px;height:42px}
  .rij .stip{display:none}
  .start-held__tekst{padding:24px}
  .start-held h1{font-size:32px}
}
@media (max-width:600px){
  .nav__knop span{display:none}
  .auth{justify-content:flex-start;padding-top:72px}
  .auth__kaart{padding:26px 20px}
  .cijfervakjes{gap:6px}
  .cijfervakjes input{height:54px;font-size:22px}
  h1{font-size:28px}
  .held{padding:24px}
  .held h2{font-size:24px}
}

/* ───────────── beheer ───────────── */
.pillen{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--vlak);border:1px solid var(--lijn);align-self:flex-start}
.pil{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--tekst-2);font-size:14.5px;font-weight:600;transition:background-color .25s,color .25s}
.pil:hover{color:var(--tekst)}
.pil[aria-selected="true"]{background:var(--tekst);color:var(--bg)}
.beheer-kaart{padding:24px;display:flex;flex-direction:column;gap:16px}
.rij-kaarten{display:flex;flex-wrap:wrap;gap:20px}
.velden{display:flex;flex-wrap:wrap;gap:16px}
.vakjes{display:flex;flex-direction:column;gap:6px}
.vakje{display:flex;align-items:center;gap:10px;min-height:40px;font-size:15.5px;cursor:pointer}
.vakje input{width:20px;height:20px;accent-color:var(--knop)}
.tabel-wrap{overflow-x:auto;border:1px solid var(--lijn);border-radius:var(--rs)}
.tabel{width:100%;border-collapse:collapse;font-size:14.5px}
.tabel th{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gedempt);padding:12px 14px;border-bottom:1px solid var(--lijn);white-space:nowrap;background:var(--vlak-2)}
.tabel td{padding:12px 14px;border-bottom:1px solid var(--lijn);vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel--klik tbody tr{cursor:pointer;transition:background-color .2s}
.tabel--klik tbody tr:hover,.tabel--klik tbody tr:focus-visible{background:var(--accent-zacht)}
.status{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.status--aan,.status--af{background:var(--goud-zacht);color:var(--goud-ink)}
.status--uit{background:var(--vlak-2);color:var(--gedempt)}
.kopie{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kopie .gedempt{min-width:170px;font-size:14.5px}
.kopie code{flex:1 1 260px;min-width:0;padding:9px 12px;border:1px solid var(--lijn);border-radius:12px;background:var(--vlak-2);font-size:14.5px;overflow-wrap:anywhere}
.resultaat{border-color:var(--goud)}
.el-rij{border-top:1px solid var(--lijn);padding-top:14px;display:flex;flex-direction:column;gap:12px}
.el-rij__boven{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.el-rij__tekst{flex:1 1 240px;min-width:0;display:flex;flex-direction:column}
.el-rij__tekst .gedempt{font-size:13.5px}
.duim{width:72px;height:44px;flex-shrink:0;border-radius:10px;border:1px solid var(--lijn);background:var(--merk);background-size:cover}
.paneel{padding:20px;border:1px solid var(--lijn);border-radius:var(--rs);background:var(--vlak-2);display:flex;flex-direction:column;gap:16px}
.paneel h3{margin:0;font-size:16px}
.upload{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.upload__omslag{width:240px;height:130px;object-fit:cover;border-radius:var(--rs);border:1px solid var(--lijn)}
.upload__omslag--leeg{display:flex;align-items:center;justify-content:center;color:var(--gedempt);background:var(--vlak-2)}
.gegevens{margin:0;flex:1 1 260px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.gegevens div{display:flex;gap:12px}
.gegevens dt{min-width:140px;color:var(--gedempt)}
.gegevens dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.omslag-bewerk{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.sleepvak{position:relative;flex:1 1 260px;min-height:150px;padding:20px;border:1.5px dashed var(--invoer-rand);border-radius:var(--r);background:var(--vlak);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;cursor:pointer;transition:border-color .2s}
.sleepvak:hover{border-color:var(--accent)}
.raster{display:grid;grid-template-columns:repeat(3,44px);gap:6px}
.raster button{width:44px;height:44px;border:1px solid var(--invoer-rand);border-radius:10px;background:var(--vlak);display:flex;align-items:center;justify-content:center}
.raster button span{width:10px;height:10px;border-radius:50%;background:var(--lijn)}
.raster button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-zacht)}
.raster button[aria-pressed="true"] span{background:var(--accent)}
.proef{border-radius:10px;border:1px solid var(--lijn);background:var(--merk);background-size:cover}
.proef--tegel{width:150px;height:66px}
.proef--start{width:200px;height:66px}
.proef-wrap{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--gedempt)}
.venster{position:fixed;inset:0;z-index:50;background:rgba(20,10,10,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;animation:verschijn .15s ease-out both}
.venster__kaart{width:100%;max-width:460px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);animation:opkomst .35s cubic-bezier(.22,1,.36,1) both}
.invoer-klein{width:110px;min-height:40px;padding:0 10px;border:1px solid var(--invoer-rand);border-radius:12px;background:var(--vlak);color:var(--tekst);font:inherit;font-size:15px}
.geen-afbreking{white-space:nowrap}

/* ───────────── privacyverklaring ───────────── */
.privacy{max-width:760px;margin:0 auto;padding:40px 20px 64px;display:flex;flex-direction:column;gap:14px}
.privacy__merk{text-decoration:none;color:var(--tekst);margin-bottom:12px;padding:0}
.privacy h1{font-size:40px}
.privacy h2{font-size:22px;margin-top:18px}
.privacy p,.privacy li{color:var(--tekst-2)}
.privacy ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.privacy ul ul{margin-top:6px}
.privacy__terug{margin-top:24px}
.privacy__terug .knop{text-decoration:none}

/* ───────────── klantomgeving ───────────── */
.merk--klant img{width:auto;height:auto;max-height:46px;max-width:200px}
.auth__merk.merk--klant img{width:auto;height:auto;max-height:42px;max-width:220px}
.merk--klant span{line-height:1.2}
.auth__kunst--klant{height:auto;width:min(120vw,1400px);aspect-ratio:auto}
.auth__kunst--klant img{display:block;width:100%;height:auto;opacity:calc(var(--logo-achter) * .8)}
.held__kunst--klant{right:-6%;top:50%;height:auto;width:62%;aspect-ratio:auto;transform:translateY(-50%)}
.held__kunst--klant img{display:block;width:100%;height:auto;opacity:.12}
.omslag__logo{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.08),transparent 62%)}
.omslag__logo img{width:56%;max-height:44%;object-fit:contain;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.met-zoom:hover .omslag__logo img{transform:scale(1.045)}
.door-labee{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--gedempt);text-decoration:none;padding:0 8px}
.door-labee img{width:18px;height:17px;object-fit:contain}
.door-labee:hover{color:var(--tekst-2)}
.auth__links{display:inline-flex;gap:16px;align-items:center;flex-wrap:wrap}
.auth__links .door-labee{padding:0}
.auth__welkom{color:var(--tekst-2);font-size:15px;line-height:1.55;padding:12px 14px;border-radius:var(--rs);background:var(--vlak-2);white-space:pre-line}

/* ───────────── certificaten ───────────── */
.met-icoon{display:flex;align-items:center;gap:10px}
.met-icoon svg{color:var(--goud)}
.cert-lijst{display:flex;flex-direction:column}
.cert-rij{display:flex;align-items:center;gap:12px;padding:11px 12px;margin:0 -12px;border:0;border-radius:var(--rs);background:none;text-align:left;transition:background .25s}
.cert-rij:hover{background:var(--vlak-2)}
.cert-rij+.cert-rij{border-top:1px solid var(--lijn)}
.cert-rij>span:first-child{flex:1}
.cert-rij b{display:block;font-size:15px;line-height:1.3}
.cert-rij small{color:var(--gedempt);font-size:13px}
.cert-rij__icoon{color:var(--gedempt);transition:color .2s,transform .25s}
.cert-rij:hover .cert-rij__icoon{color:var(--accent);transform:translateY(2px)}
.cert-kaart--klaar{border-color:color-mix(in oklab,var(--goud) 40%,var(--lijn))}
.cert-melding{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cert-melding .link{color:var(--goud-ink);font-weight:700}
.venster__kaart.cert{max-width:min(1000px,100%);max-height:calc(100vh - 32px);overflow:auto}
.venster__kaart.cert>*{flex-shrink:0}
.cert__kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cert__kop .rond{font-size:24px;line-height:1}
.cert__plaat{min-height:120px;display:grid;place-items:center}
.cert__plaat canvas{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.cert__keuze{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--rs);background:var(--goud-zacht);color:var(--goud-ink)}
.cert__keuze p{line-height:1.5}

/* ───────────── Beheer: organisaties en certificaat ───────────── */
.veld textarea{width:100%;padding:12px 16px;border:1px solid var(--invoer-rand);border-radius:var(--rs);background:var(--vlak);color:var(--tekst);font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.veld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-zacht)}
.veld__label{font-size:14.5px;font-weight:700}
.met-achtervoegsel{display:flex;align-items:center;gap:8px}
.met-achtervoegsel input{flex:1;min-width:0}
.met-achtervoegsel span{color:var(--gedempt);font-size:15px;white-space:nowrap}
.kleurkeuze{display:flex;gap:8px;align-items:center}
.veld .kleurkeuze input[type=color]{width:50px;min-width:50px;height:50px;min-height:50px;padding:4px;border:1px solid var(--invoer-rand);border-radius:var(--rs);background:var(--vlak);cursor:pointer}
.veld .kleurkeuze input.invoer-hex{flex:1;min-width:0;text-transform:uppercase;font-variant-numeric:tabular-nums}
.org-tegel{width:72px;height:44px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;overflow:hidden;color:#FFFFFF;font-size:13px}
.org-tegel img{max-width:80%;max-height:70%;object-fit:contain}
.logo-vak{height:110px;border-radius:var(--rs);border:1px dashed var(--invoer-rand);background:#FFFFFF;display:grid;place-items:center;padding:16px}
.logo-vak img{max-width:100%;max-height:78px;object-fit:contain}
.logo-vak--donker{border-style:solid;border-color:transparent}
.logo-vak--donker .gedempt{color:rgba(255,255,255,.75)}
.kleur-proef{display:flex;gap:12px;flex-wrap:wrap}
.kleur-proef__held{flex:1 1 180px;min-height:110px;border-radius:var(--rs);padding:14px 16px;color:#FFFFFF;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in oklab,var(--merk),#FFFFFF 14%),var(--merk) 55%,color-mix(in oklab,var(--merk),#000 30%))}
.kleur-proef__held img{position:absolute;right:10px;top:10px;max-width:45%;max-height:34px;object-fit:contain;opacity:.9}
.kleur-proef__held .oog{color:rgba(255,255,255,.75);font-size:10.5px}
.kleur-proef__held b{font-size:15px}
.kleur-proef__kaart{flex:1 1 150px;min-height:110px;border-radius:var(--rs);padding:14px;border:1px solid var(--lijn);background:color-mix(in oklab,var(--merk) 5%,#FAF7F2);display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:space-between;position:relative}
.kleur-proef__kaart img{max-width:80%;max-height:30px;object-fit:contain}
.kleur-proef__knop{padding:8px 14px;border-radius:10px;background:var(--merk);color:#FFFFFF;font-size:13px;font-weight:700}
.kleur-proef__stip{position:absolute;right:14px;bottom:14px;width:18px;height:18px;border-radius:50%;background:var(--goud)}
.cert-proef{max-width:720px;transition:opacity .2s}
.cert-voorbeeld{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.stappen-uitleg summary{cursor:pointer;font-weight:700;color:var(--accent)}
.stappen-uitleg ol{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--tekst-2);line-height:1.5}
.stappen-uitleg code,.cert-proef code{font-size:14px;background:var(--vlak-2);padding:1px 6px;border-radius:6px}
.opslaan-balk{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r);background:var(--vlak);border:1px solid var(--lijn);box-shadow:var(--schaduw-op)}