/* SellYourOwnHouse — tools (SYOH-TOOLS-A-20260930). Bouwt op syoh.css (tokens, knoppen, formulier).
   ANIMATIE-VAL: niets hier maakt inhoud onzichtbaar. Beweging = alleen transform, alleen onder
   html.js-anim, en uit bij prefers-reduced-motion. Amber (#F5A524) alleen in de zon. */

.ti{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- secties ---------- */
.tl-sec{padding:clamp(64px,8vw,112px) 0}
.tl-sec-white{background:#fff}
.tl-sec-sand{background:var(--sand)}
.tl-disclaimer{font-size:.9rem;color:var(--muted);max-width:72ch;margin:28px 0 0}

/* ---------- hero ---------- */
/* POLIJST-R3: één hero voor alle vier de tools (A: check, documenten · B: advertentietekst, planner) — zelfde
   padding, kolommen, kopmaat, kruimelpad en vinkchips. De B-pagina's gebruikten een eigen .tb-hero. */
.tl-hero{padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,96px);background:var(--cream);overflow:hidden}
.tl-hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,5vw,72px);align-items:center}
.tl-hero h1{font-size:clamp(2.4rem,4.6vw,4.2rem);margin:0 0 22px;max-width:15ch}
.tl-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.tl-pills li{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:600 .88rem/1.2 var(--sans);color:var(--navy)}
.tl-pills svg{width:16px;height:16px;fill:none;stroke:var(--terra);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tl-hero-cta{margin:24px 0 0}
.tl-hero h1 em{font-style:normal;color:var(--terra)}
.tl-lead{font-size:clamp(1.06rem,1.4vw,1.2rem);color:var(--muted);max-width:56ch;margin:0 0 28px}
.tl-crumbs{margin:0 0 28px}
.tl-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;font-size:.88rem;color:var(--muted)}
.tl-crumbs li+li::before{content:"/";margin:0 10px;color:var(--line-2)}
.tl-crumbs a{color:var(--muted);text-decoration:none;display:inline-block;padding:10px 0;margin:-10px 0}
.tl-crumbs a:hover{color:var(--navy);text-decoration:underline}
.tl-crumbs [aria-current]{color:var(--navy);font-weight:600}

/* decoratie: huis onder de zon (brand.md). POLIJST-R1-20260930: één lijnstijl voor alle tools */
.tl-art{position:relative;max-width:420px;width:100%;justify-self:center}
.tl-art-svg{width:100%;height:auto;display:block;overflow:visible}
.tl-art-ring{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 7}
.tl-art-sun circle{fill:var(--amber)}
.tl-art-ground{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.tl-art-ground-2{stroke:var(--line-2);stroke-width:2}
.h-wall,.h-roof,.h-door{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.h-wall{stroke:var(--navy);fill:var(--cream)}
.h-roof{stroke:var(--terra)}
.h-door{stroke:var(--navy)}
.h-win{fill:none;stroke:var(--navy);stroke-width:3}
.tl-art-card{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 16px 12px 12px;box-shadow:var(--sh-card),0 1px 2px rgba(15,23,42,.06)}
.tl-art-card-a{right:-12%;top:63%}
.tl-art-tick{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#FBE9E3;color:var(--terra-ink)}
.tl-art-tick .ti{width:22px;height:22px;stroke-width:2}
.tl-art-lines{display:grid;gap:7px}
.tl-art-line{display:block;width:88px;height:7px;border-radius:4px;background:var(--line)}
.tl-art-line-2{width:58px}
.js-anim .tl-art-sun{animation:tl-rise 1.6s var(--ease) both}
.js-anim .tl-art-card-a{animation:tl-float 6s ease-in-out infinite}
@keyframes tl-rise{from{transform:translateY(46px)}to{transform:none}}
@keyframes tl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- POLIJST-R3: levende mini-preview van de tool in de hero ---------- */
.tp{position:relative;max-width:440px;justify-self:end;padding:26px 0 0}
.tp-sun{position:absolute;right:-7%;top:-4%;width:44%;aspect-ratio:1;border-radius:50%;background:var(--amber);opacity:.95}
.tp-card{position:relative;background:#fff;border-radius:24px;padding:22px 22px 20px;box-shadow:0 30px 60px -34px rgba(27,58,75,.45),inset 0 0 0 1px var(--line)}
.tp-card-navy{background:var(--navy);color:#fff;box-shadow:0 30px 60px -30px rgba(27,58,75,.7)}
.tp-k{display:block;font:600 .68rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terra-ink)}
.tp-k-lt{color:#FFB08F}
.tp-h{display:block;font:500 1.35rem/1.2 var(--serif);color:var(--navy)}
.tp-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* documenten */
.tp-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.tp-head-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.tp-flag{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cream);color:var(--terra-ink);font:700 .85rem/1 var(--sans);letter-spacing:.04em}
.tp-bar{display:block;height:6px;border-radius:3px;background:var(--cream);overflow:hidden;margin:0 0 6px}
.tp-bar span{display:block;height:100%;background:var(--terra);transform-origin:0 50%;transform:scaleX(.75)}
.tp-list li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.tp-list li:first-child{border-top:0}
.tp-box{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 2px #9A8E7B;color:#fff;margin-top:1px}
.tp-box::before{content:"";position:absolute;inset:0;border-radius:7px;background:var(--terra)}
.tp-box .ti{position:relative;width:16px;height:16px;stroke-width:3}
.tp-list li:nth-child(n+4) .tp-box::before,.tp-list li:nth-child(n+4) .tp-box .ti{transform:scale(0)}
.tp-li{display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-li strong{font:600 .93rem/1.3 var(--sans);color:var(--navy)}
.tp-li em{font-size:.8rem;color:var(--muted)}
.tp-list li:nth-child(-n+3) strong{text-decoration:line-through;text-decoration-color:rgba(27,58,75,.35);text-decoration-thickness:1.5px}
/* advertentietekst */
.tp-live{display:inline-flex;align-items:center;gap:8px;font:700 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#FFB08F}
.tp-live i{width:8px;height:8px;border-radius:50%;background:var(--terra-lt)}
.tp-tabs{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:14px 0 12px}
.tp-tab{position:relative;display:grid;place-items:center;height:38px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font:700 .8rem/1 var(--sans);letter-spacing:.06em;color:#fff}
.tp-tab-hl{position:absolute;left:0;top:0;height:38px;width:calc((100% - 30px) / 6);border-radius:10px;background:var(--terra)}
.tp-paper{display:block;background:#fff;color:var(--ink);border-radius:14px;padding:16px 16px 18px}
.tp-win{display:block;height:1.7rem;overflow:hidden;margin:6px 0 12px}
.tp-tick{display:flex;flex-direction:column}
.tp-tick span{display:block;height:1.7rem;font:700 1.08rem/1.7rem var(--sans);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-sk{display:block;height:8px;border-radius:4px;background:var(--line);margin-top:9px}
.tp-sk-2{width:88%}.tp-sk-3{width:60%}
/* planner */
.tp-gantt{margin:14px 0 0}
.tp-gantt li{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:12px;padding:9px 0;border-top:1px dashed var(--line-2)}
.tp-gn{font:600 .84rem/1.25 var(--sans);color:var(--navy)}
.tp-gn b{display:block;font:700 .64rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-ink)}
.tp-gt{position:relative;height:12px;border-radius:6px;background:rgba(27,58,75,.08)}
.tp-gb{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--terra),#DE6A3F);transform-origin:0 50%}
.tp-samen .tp-gb{background:repeating-linear-gradient(-45deg,var(--terra) 0 6px,#DE6A3F 6px 12px)}
.tp-gantt li:last-child .tp-gb{background:var(--navy)}
.tp-axis{position:relative;height:30px;margin-left:140px;border-top:1px solid var(--line-2)}
.tp-flag-end{position:absolute;left:90%;top:8px;transform:translateX(-50%);padding:4px 9px;border-radius:999px;background:var(--navy);color:#fff;font:600 .68rem/1 var(--sans);white-space:nowrap}
.tp-flag-end::before{content:"";position:absolute;left:50%;top:-9px;width:2px;height:9px;margin-left:-1px;background:var(--navy)}
/* beweging: alleen transform, alleen onder js-anim; zonder beweging staat de eindtoestand er */
html.js-anim .tp-sun{animation:tl-rise 1.6s var(--ease) both}
html.js-anim .tp-bar span{animation:tpBar 2.2s var(--ease) .3s both}
@keyframes tpBar{0%{transform:scaleX(0)}27%{transform:scaleX(.25)}54%{transform:scaleX(.5)}81%,100%{transform:scaleX(.75)}}
html.js-anim .tp-list li:nth-child(-n+3) .tp-box::before,html.js-anim .tp-list li:nth-child(-n+3) .tp-box .ti{animation:tpPop .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.5s + var(--i) * .6s)}
@keyframes tpPop{from{transform:scale(0)}to{transform:scale(1)}}
html.js-anim .tp-live i{animation:lbBlink 2s ease-in-out infinite}
html.js-anim .tp-tick{animation:tpTicker 15s cubic-bezier(.6,0,.2,1) 1s infinite}
@keyframes tpTicker{0%,13.3%{transform:translateY(0)}16.7%,30%{transform:translateY(-1.7rem)}33.3%,46.7%{transform:translateY(-3.4rem)}50%,63.3%{transform:translateY(-5.1rem)}66.7%,80%{transform:translateY(-6.8rem)}83.3%,96.7%{transform:translateY(-8.5rem)}100%{transform:translateY(-10.2rem)}}
html.js-anim .tp-tab-hl{animation:tpTabs 15s cubic-bezier(.6,0,.2,1) 1s infinite}
@keyframes tpTabs{0%,13.3%{transform:translateX(0)}16.7%,30%{transform:translateX(calc(100% + 6px))}33.3%,46.7%{transform:translateX(calc(200% + 12px))}50%,63.3%{transform:translateX(calc(300% + 18px))}66.7%,80%{transform:translateX(calc(400% + 24px))}83.3%,96.7%{transform:translateX(calc(500% + 30px))}100%{transform:translateX(0)}}
html.js-anim .tp-gb{animation:tpGrow .8s var(--ease) both;animation-delay:calc(.35s + var(--i) * .3s)}
@keyframes tpGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.js-anim .tp-flag-end{animation:tpFlag .5s cubic-bezier(.3,1.5,.5,1) 1.7s both}
@keyframes tpFlag{from{transform:translateX(-50%) scale(0)}to{transform:translateX(-50%) scale(1)}}

/* overzicht: lage hero, kaarten direct in beeld */
.tl-hero-overview{padding-bottom:clamp(40px,5vw,72px)}
.tl-ov-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px clamp(24px,5vw,72px);align-items:end;margin:0 0 clamp(28px,3.4vw,44px)}
.tl-hero-overview h1{font-size:clamp(2.3rem,4.4vw,3.8rem);margin:0}
.tl-hero-overview .tl-lead{margin:0}
.tl-hero-overview .tl-card{background:#fff;box-shadow:var(--sh-card),inset 0 0 0 1px var(--line)}
.tl-hero-solo{padding-bottom:clamp(24px,3vw,40px)}
.tl-hero-solo .tl-hero-in{grid-template-columns:minmax(0,1fr)}
.tl-hero-solo h1{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:12px}
.tl-hero-solo .tl-lead{margin:0}
.tl-hero-solo .tl-hero-cta,.tl-hero-solo .tl-pills{display:none}
.tl-meter-leeg .tl-meter-v{color:var(--muted)}

/* ---------- kaarten ---------- */
.tl-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tl-card{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:26px 24px 24px;border-radius:var(--r-card);background:var(--cream);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s}
.tl-sec-sand .tl-card{background:#fff}
.tl-card:hover{transform:translateY(-4px);box-shadow:var(--sh-card),inset 0 0 0 1px var(--line)}
.tl-card-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff;margin:0 0 8px;transition:transform .45s var(--ease)}
.tl-card-ic .ti{width:26px;height:26px}
.tl-card:hover .tl-card-ic{transform:rotate(-6deg) scale(1.06)}
.tl-card-readiness .tl-card-ic,.tl-card-listing .tl-card-ic{background:var(--terra)}
.tl-card-tag{font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terra-ink)}
.tl-card-h{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.2;color:var(--navy);margin:0}
.tl-card-p{font-size:.96rem;line-height:1.55;color:var(--muted);flex:1}
.tl-card-go{display:inline-flex;align-items:center;gap:8px;font:600 .98rem/1.3 var(--sans);color:var(--navy);margin-top:6px}
.tl-card:hover .arr{transform:translateX(5px)}
.tl-card .arr{display:inline-block;transition:transform .35s var(--ease)}
.tl-feat{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}

/* ---------- meter ---------- */
.tl-meter{position:relative;width:100%;max-width:360px;margin:0 auto;text-align:center}
.tl-meter svg{width:100%;height:auto;display:block;overflow:visible}
.m-track,.m-fill{fill:none;stroke-width:20}
.m-track{stroke:var(--line)}
.m-fill{stroke:var(--terra);transform-box:view-box;transform-origin:120px 120px;transform:rotate(var(--a))}
.m-ticks line{stroke:var(--line-2);stroke-width:2;stroke-linecap:round}
.m-needle{fill:var(--navy);transform-box:view-box;transform-origin:120px 120px;transform:rotate(calc(var(--a) - 90deg))}
.m-sun{fill:var(--amber)}
.tl-meter-n{margin:-6px 0 0;font-family:var(--serif);color:var(--navy);line-height:1}
.tl-meter-v{font-size:clamp(3rem,6vw,4.25rem);font-weight:600;font-variant-numeric:tabular-nums}
.tl-meter-of{font-size:1.2rem;color:var(--muted);margin-left:4px}
.tl-hero-meter{background:#fff;border-radius:28px;padding:30px 28px 26px;box-shadow:var(--sh-card),inset 0 0 0 1px var(--line);max-width:420px;width:100%;justify-self:end}
.tl-hero-cap{margin:10px 0 0;font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.m-fill,.m-needle{transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
html.js-anim .tl-meter.arm:not(.go) .m-fill{transform:rotate(0deg)}
html.js-anim .tl-meter.arm:not(.go) .m-needle{transform:rotate(-90deg)}

/* ---------- uitslag ---------- */
.tl-result{background:var(--sand);padding-top:clamp(48px,6vw,80px)}
.tl-result:focus{outline:none}
.tl-res-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:center;background:var(--navy);color:#fff;border-radius:28px;padding:clamp(26px,4vw,56px);box-shadow:var(--sh-card)}
.tl-res-top .label{color:#FFB08F}
.tl-res-top h2{color:#fff;margin:0 0 14px}
.tl-res-p{font-size:1.12rem;color:rgba(255,255,255,.86);max-width:48ch}
.tl-res-top .m-track{stroke:rgba(255,255,255,.14)}
.tl-res-top .m-fill{stroke:var(--terra-lt2)}
.tl-res-top .m-ticks line{stroke:rgba(255,255,255,.28)}
.tl-res-top .m-needle{fill:#fff}
.tl-res-top .tl-meter-n{color:#fff}
.tl-res-top .tl-meter-of{color:rgba(255,255,255,.7)}
.tl-res-sub{font:600 .78rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:22px 0 10px}
.tl-chips{display:flex;flex-wrap:wrap;gap:8px}
.tl-chips li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:.9rem}
.tl-chips .ti{width:16px;height:16px;stroke:#FFB08F;stroke-width:2.6}
.tl-res-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tl-res-actions .btn .ti,.dc-actions .btn .ti,.quiz-nav .btn .ti{width:18px;height:18px}
/* POLIJST-R2: printen en opnieuw als lichte tekstlinks naast elkaar; de hulp-CTA is de enige zware knop */
.tl-res-actions{align-items:center}
.tl-res-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-left:6px}
.tl-tlink{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--navy);font-weight:550;font-size:.96rem;
  text-decoration:underline;text-decoration-color:rgba(27,58,75,.3);text-underline-offset:5px;transition:text-decoration-color .25s,color .25s}
.tl-tlink:hover{color:var(--terra-ink,#A63A17);text-decoration-color:currentColor}
.tl-tlink:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:6px}
.tl-tlink .ti{width:17px;height:17px}
.tl-tlink[hidden]{display:none!important}
.tl-res-top .tl-tlink{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.tl-res-top .tl-tlink:hover{color:#FFB08F;text-decoration-color:currentColor}
.tl-disclaimer-top{margin:0 0 22px;padding:12px 16px;border-left:3px solid var(--terra);background:rgba(255,255,255,.55);border-radius:0 10px 10px 0;color:var(--navy)}
/* POLIJST-R2 EERSTE-PAINT: op de tools-pagina's schuift inhoud alleen, hij is nooit (ook niet kort) onzichtbaar */
html.js-anim:not(.anim-safe) body.tools .rv:not(.in),html.js-anim:not(.anim-safe) body.tb-page .rv:not(.in){opacity:1;transform:translateY(18px)}
.tl-todo-h{font:600 1.5rem/1.2 var(--serif);color:var(--navy);margin:clamp(40px,5vw,64px) 0 20px}
.tl-todo-h span{color:var(--muted);font-weight:400}
.tl-todo{display:grid;gap:14px;counter-reset:none}
.tl-todo-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;background:#fff;border-radius:var(--r-card);padding:22px 24px;box-shadow:0 1px 2px rgba(15,23,42,.05),inset 0 0 0 1px var(--line)}
.tl-todo-i.p1{box-shadow:inset 4px 0 0 var(--terra),0 1px 2px rgba(15,23,42,.05),inset 0 0 0 1px var(--line)}
.tl-todo-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cream);color:var(--navy);font:600 1.15rem/1 var(--serif)}
.p1 .tl-todo-n{background:var(--terra);color:#fff}
.tl-prio{display:inline-block;font:600 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border-radius:999px;margin:0 0 10px;background:var(--cream);color:var(--muted)}
.p1 .tl-prio{background:#FBE3D9;color:var(--terra-ink)}
.p2 .tl-prio{background:#E3ECF0;color:var(--navy)}
.tl-todo-i h4{font:650 1.12rem/1.35 var(--sans);color:var(--navy);margin:0 0 6px}
.tl-todo-i p{margin:0 0 8px;color:var(--ink)}
.tl-todo-links{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;margin-top:6px!important}
.tl-todo-links .text-link{font-size:.95rem}
.tl-src{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--terra-ink);text-decoration:none;padding:6px 0}
.tl-src:hover{text-decoration:underline}
.tl-src .ti{width:15px;height:15px}
html.js-anim .tl-todo.arm:not(.go) .tl-todo-i{transform:translateY(22px)}
.tl-todo-i{transition:transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- quiz ---------- */
.quiz{max-width:880px}
.q{border:0;margin:0 0 44px;padding:0;min-width:0}
.q legend{display:flex;align-items:flex-start;gap:14px;padding:0;margin:0 0 16px;font:500 clamp(1.35rem,2.4vw,1.75rem)/1.25 var(--serif);color:var(--navy)}
.q-n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font:600 1rem/1 var(--sans);margin-top:2px}
.q-hint{margin:-6px 0 16px 52px;color:var(--muted);font-size:.95rem}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-left:52px}
.opts-land{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:14px 16px;border-radius:16px;background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;font-weight:550;color:var(--navy);line-height:1.3;transition:background-color .25s,box-shadow .25s,color .25s,transform .25s var(--ease)}
.opt:hover{box-shadow:inset 0 0 0 1.5px var(--line-2);transform:translateY(-2px)}
.opt input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.opt-dot{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px #9A8E7B;background:#fff;transition:box-shadow .25s}
.opt-code{flex:none;display:grid;place-items:center;min-width:38px;height:28px;padding:0 6px;border-radius:8px;background:#fff;color:var(--terra-ink);font:700 .78rem/1 var(--sans);letter-spacing:.06em}
.opt:has(input:checked),.opt.on{background:var(--navy);color:#fff;box-shadow:0 12px 24px -14px rgba(27,58,75,.8)}
.opt:has(input:checked) .opt-dot,.opt.on .opt-dot{box-shadow:inset 0 0 0 7px var(--terra-lt2);background:#fff}
.opt:has(input:checked) .opt-code,.opt.on .opt-code{background:var(--terra);color:#fff}
.opt:has(input:focus-visible){outline:3px solid var(--terra);outline-offset:3px}
.quiz-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-left:52px}
.quiz-bar{position:relative;margin:0 0 36px}
.quiz-bar::before{content:"";display:block;height:8px;border-radius:4px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.quiz-bar-fill{position:absolute;left:0;top:0;height:8px;width:100%;border-radius:4px;background:var(--terra);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .5s var(--ease)}
.quiz-count{margin:12px 0 0;font:600 .8rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.quiz-count.warn{color:var(--terra-ink)}
/* stapmodus: alleen als JS de klasse zet; zonder JS staan alle vragen onder elkaar */
.quiz.is-step .q{display:none}
.quiz.is-step .q.cur{display:block;min-height:230px}
.quiz.is-step .q.cur.fwd{animation:tl-qin .5s var(--ease)}
.quiz.is-step .q.cur.bwd{animation:tl-qback .5s var(--ease)}
.quiz.is-step .q.shake{animation:tl-shake .4s}
@keyframes tl-qin{from{transform:translateX(36px)}to{transform:none}}
@keyframes tl-qback{from{transform:translateX(-36px)}to{transform:none}}
@keyframes tl-shake{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.opt.pop{animation:tl-pop .35s var(--ease)}
@keyframes tl-pop{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:none}}

/* gewichten */
.tl-weights{display:grid;gap:12px;max-width:760px}
.tl-weights li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) auto;gap:16px;align-items:center;font-size:.98rem;color:var(--navy);font-weight:550}
.tw-bar{height:10px;border-radius:5px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.tw-bar span{display:block;height:100%;background:var(--navy);transform-origin:0 50%;transform:scaleX(var(--w));transition:transform .9s var(--ease) .15s}
html.js-anim:not(.anim-safe) .tl-weights li.rv:not(.in) .tw-bar span{transform:scaleX(.05)}
.tw-n{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- documenten ---------- */
.tl-docs-h{font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 22px}
.dc-pick ul{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.dc-pick a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:12px 6px;border-radius:16px;background:var(--cream);color:var(--navy);text-decoration:none;text-align:center;font:600 .9rem/1.2 var(--sans);box-shadow:inset 0 0 0 1.5px transparent;transition:background-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.dc-pick a:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.dc-pick img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff}
.dc-pick img+.dc-code{display:none}
.dc-code{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--terra-ink);font:700 1.2rem/1 var(--sans)}
.dc-ok{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--terra);color:#fff}
.dc-ok .ti{width:12px;height:12px;stroke-width:3}
.dc-pick a[aria-current]{background:var(--navy);color:#fff;box-shadow:0 14px 28px -16px rgba(27,58,75,.9)}
.dc-panels{margin-top:28px}
.dc-panel{background:var(--cream);border-radius:28px;padding:clamp(22px,3.5vw,44px);margin:0 0 24px;scroll-margin-top:calc(var(--top-vis) + 16px)}
.dc-panels.is-tabs .dc-panel{display:none}
.dc-panels.is-tabs .dc-panel.cur{display:block}
.dc-head{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0 0 14px}
.dc-head-img{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff}
.dc-head-t{flex:1;min-width:200px}
.dc-head .label{margin:0 0 6px}
.dc-head h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.dc-prog{min-width:200px;text-align:right}
.dc-prog-t{display:block;font:600 .85rem/1.3 var(--sans);color:var(--navy);margin:0 0 8px;font-variant-numeric:tabular-nums}
.dc-prog-bar{display:block;height:8px;border-radius:4px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.dc-prog-bar span{display:block;height:100%;background:var(--terra);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .5s var(--ease)}
.dc-note{max-width:70ch;color:var(--muted);font-size:.96rem;margin:0 0 8px}
.dc-g{font:600 .75rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--terra-ink);margin:30px 0 12px}
.dc-list{display:grid;gap:10px}
.dc-item{position:relative;background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(15,23,42,.05),inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.dc-item input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dc-item label{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 6px;cursor:pointer;min-height:44px}
.dc-box{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 2px #9A8E7B;color:transparent;margin-top:-1px;transition:background-color .25s,box-shadow .25s,color .2s,transform .3s var(--ease)}
.dc-box .ti{width:18px;height:18px;stroke-width:2.8}
.dc-t{line-height:1.4;color:var(--navy)}
.dc-t strong{font-weight:650}
.dc-t em{font-style:italic;color:var(--muted);font-size:.92rem}
.dc-if{display:inline-block;margin-left:4px;padding:3px 8px;border-radius:999px;background:#E3ECF0;color:var(--navy);font:600 .72rem/1.2 var(--sans);vertical-align:2px}
.dc-x{padding:0 20px 16px 62px}
.dc-x p{margin:0 0 6px;font-size:.96rem;color:var(--ink)}
.dc-src{display:flex;flex-wrap:wrap;gap:0 18px}
.dc-item input:checked+label .dc-box{background:var(--terra);box-shadow:none;color:#fff}
.dc-item input:checked+label .dc-t strong{text-decoration:line-through;text-decoration-color:rgba(27,58,75,.45);text-decoration-thickness:1.5px}
.dc-item:has(input:checked){box-shadow:inset 0 0 0 1.5px #F0C9B8}
.dc-item input:focus-visible+label .dc-box{outline:3px solid var(--terra);outline-offset:3px}
.js-anim .dc-item input:checked+label .dc-box{animation:tl-pop .35s var(--ease)}
.dc-panel.enter .dc-item{animation:tl-dcin .55s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes tl-dcin{from{transform:translateY(16px)}to{transform:none}}
.dc-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line-2)}
.dc-guides ul{display:grid;gap:4px}
.dc-guides .dc-g{margin-top:0}
.dc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}

/* ---------- responsief ---------- */
@media (max-width:1099.98px){
  .tl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-pick ul{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:899.98px){
  .tl-hero-in{grid-template-columns:1fr}
  .tp{justify-self:start;max-width:420px}
  .tl-ov-head{grid-template-columns:1fr}
  .tl-art{max-width:300px}
  .tl-hero-meter{max-width:360px}
  .tl-res-top{grid-template-columns:1fr}
  .tl-res-meter{max-width:320px;width:100%;margin:0 auto}
}
@media (max-width:767.98px){
  .tl-art{display:none}
  .tl-hero-meter{padding:22px 20px 18px}
}
@media (max-width:599.98px){
  .tl-cards,.tl-feat{grid-template-columns:1fr}
  .opts,.q-hint,.quiz-nav{margin-left:0}
  .opts{grid-template-columns:1fr}
  .opts-land{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-pick ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dc-pick a{min-height:84px;font-size:.85rem}
  .dc-x{padding-left:20px}
  .dc-prog{min-width:0;width:100%;text-align:left}
  .tl-weights li{grid-template-columns:1fr auto}
  .tw-bar{grid-column:1 / -1;grid-row:2}
  .tl-todo-i{grid-template-columns:1fr;gap:10px;padding:20px}
  .tl-res-actions .btn{width:100%}
  .tl-res-links{margin-left:0}
  .dc-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .tl-art-sun,.js-anim .tl-art-card-a,html.js-anim .tp *{animation:none!important}
  .m-fill,.m-needle,.tl-todo-i,.quiz-bar-fill,.dc-prog-bar span,.tw-bar span{transition:none!important}
  html.js-anim .tl-meter.arm:not(.go) .m-fill{transform:rotate(var(--a))}
  html.js-anim .tl-meter.arm:not(.go) .m-needle{transform:rotate(calc(var(--a) - 90deg))}
  html.js-anim .tl-todo.arm:not(.go) .tl-todo-i,html.js-anim:not(.anim-safe) .tl-weights li.rv:not(.in) .tw-bar span{transform:none}
}

/* ---------- printen ---------- */
@media print{
  @page{margin:16mm}
  body{background:#fff}
  .top,.foot,.cta-bar,.skip,.tl-hero,.contact,.tl-sec-sand,.tl-quiz-sec,.dc-pick,.tl-docs-h,.tl-res-actions,.dc-actions,.tl-sec-white:not(.tl-docs){display:none!important}
  .tl-sec,.tl-result{padding:0;background:#fff}
  .tl-res-top{background:#fff;color:var(--ink);box-shadow:none;border:1px solid #ccc;border-radius:12px;padding:16px;grid-template-columns:200px 1fr;break-inside:avoid}
  .tl-res-top h2,.tl-res-top .tl-meter-n{color:var(--navy)}
  .tl-res-p{color:var(--ink)}
  .tl-res-top .label,.tl-res-sub{color:var(--terra-ink)}
  .tl-res-top .m-track{stroke:#eee}.tl-res-top .m-fill{stroke:var(--terra)}.tl-res-top .m-needle{fill:var(--navy)}
  .tl-chips li{background:#fff;box-shadow:inset 0 0 0 1px #ccc}
  .tl-todo-i,.dc-item{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .tl-todo-i,.dc-panel.enter .dc-item{transform:none!important;animation:none!important}
  .dc-panel{background:#fff;padding:0;border-radius:0}
  .dc-box{box-shadow:inset 0 0 0 2px #333}
  .tl-src::after{content:" (" attr(href) ")";word-break:break-all;color:#555}
  .text-link{background:none;text-decoration:underline}
  .dc-foot{border-top:1px solid #ccc}
}

/* [hidden] moet winnen van .btn{display:inline-flex} */
.quiz [hidden],.tl-res-actions [hidden],.dc-actions [hidden],.dc-prog[hidden],.quiz-bar[hidden]{display:none!important}

/* POLIJST-R1-20260930: lege meter zonder naald (anders leest hij als score 0) */
.tl-meter-leeg .m-needle{display:none}