/* docufarm.io: één stylesheet voor de onepager, /gesprek/, de microsites en de juridische pagina's.
   Lettertypen: variabele woff2, latin-subset, zelf gehost (geen Google Fonts-request). */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/schibsted-grotesk.e3b56e90.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(/assets/instrument-sans.6219bc4b.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/jetbrains-mono.2c32b9b3.woff2) format("woff2")}

/* ---------- tokens (spec 5.2), alleen licht ---------- */
/* --potlood (3,8:1 op papier) is voor lijnen en markers; leesbare grijze tekst onder 24 px staat in
   --grijs-tekst (6,0:1 op papier, 5,6:1 op marge), anders valt axe-core over color-contrast (WCAG AA 4,5:1). */
:root{
  --papier:#FCFCFA;--inkt:#15191E;--veld:#1B4B3C;--veld-licht:#BFD2C6;--veld-zacht:#EDF3EE;
  --pen:#1D3AC7;--potlood:#7C837B;--lijn:#E3E7E0;--marge:#F2F4F0;--fout:#B42318;--tekst2:#3A423C;
  --knop-hover:#123529;--kaart:#FFFFFF;--kaartrand:#DCE1D8;--hublijn:#B9C2B6;--farm:#8FB59D;
  --grijs-tekst:#5C635B;
  --display:"Schibsted Grotesk",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --kolom:64rem;--radius:16px;
  --schaduw:0 1px 0 rgba(21,25,30,.04),0 34px 70px -40px rgba(21,25,30,.38);
  --chipschaduw:0 18px 40px -30px rgba(21,25,30,.35);
  color-scheme:light;
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0}
h1,h2,h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
h1{font-size:clamp(2.4rem,1.4rem + 4.6vw,4.6rem);max-width:14ch}
h2{font-size:clamp(1.8rem,1.3rem + 2.2vw,2.9rem);max-width:20ch}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--pen);text-underline-offset:.2em}
img,svg,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.blad{max-width:var(--kolom);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem);border-left:1px solid var(--lijn)}
@media (min-width:60rem){.blad{padding-left:5rem}}
section{padding-block:calc(clamp(3.5rem,8vw,6.5rem) / 2)}
section + section{border-top:1px solid var(--lijn)}
.etiket{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs-tekst);display:block;margin-bottom:1.25rem}
.lead{margin-top:1.25rem;max-width:48ch;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--tekst2)}
.bij{font-size:.9rem;color:var(--grijs-tekst);margin-top:1rem}
.acties{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-top:2rem}
.bijschrift{margin-top:.75rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--grijs-tekst)}

/* ---------- kop: plakkend, met dekkend papier als achtergrond (spec 5.2: geen blur-filters) ---------- */
.balk{position:sticky;top:0;z-index:20;background:var(--papier);border-bottom:1px solid var(--lijn)}
.balk .blad{display:flex;align-items:center;gap:1rem;padding-block:.85rem;border-left-color:transparent;flex-wrap:nowrap}
.merk{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.03em;color:var(--inkt);text-decoration:none;margin-right:auto;white-space:nowrap}
.merk span{color:var(--veld)}
.balk a.stil{font-size:.9rem;color:var(--grijs-tekst);text-decoration:none;white-space:nowrap}
.balk a.stil:hover{color:var(--inkt)}
.balk .knop{background:var(--veld);border-color:var(--veld);padding:.5rem 1rem;font-size:.9rem}
.balk .knop:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
@media (max-width:23.99rem){
  .balk .blad{gap:.6rem;padding-inline:.9rem}
  .merk{font-size:1rem}
  .balk a.stil{font-size:.85rem}
  .balk .knop{padding:.45rem .7rem;font-size:.8rem;gap:0}
}

/* ---------- knoppen en chips (uit de video: volrond, inkt of wit) ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--inkt);color:#fff;text-decoration:none;
  font-family:var(--body);font-weight:600;font-size:.95rem;line-height:1.2;padding:.7rem 1.25rem;border-radius:999px;border:1.5px solid var(--inkt);
  cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.knop:hover{background:#000;border-color:#000}
.knop.groot{font-size:1.05rem;padding:.9rem 1.6rem}
.knop.licht{background:var(--kaart);color:var(--inkt)}
.knop.licht:hover{background:var(--marge);border-color:var(--inkt)}
.knop:disabled{opacity:.55;cursor:default}
.chip{display:inline-flex;align-items:center;gap:.6rem;height:2.75rem;padding:0 1.1rem;border-radius:999px;background:var(--kaart);border:1px solid var(--kaartrand);
  font-size:.95rem;font-weight:500;white-space:nowrap;box-shadow:var(--chipschaduw)}
.chip::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--veld);flex:0 0 auto}
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--veld);background:var(--veld-zacht);border:1px solid var(--veld-licht);border-radius:999px;padding:.4rem .9rem}

/* ---------- hero ---------- */
.hero .blad{display:grid;gap:2.5rem}
@media (min-width:60rem){.hero .blad{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:2.5rem}
  .hero h1{font-size:clamp(3rem,2rem + 2.6vw,4.2rem);max-width:none}
  .hero.gesprek .blad{grid-template-columns:minmax(0,1fr)}
  .hero.gesprek h1{max-width:16ch}}
.hero .etiket{color:var(--inkt);font-size:.8rem}
.hero .lead{margin-top:1.5rem}

/* het toneel: 560x600 logisch, met één transform geschaald naar de kolombreedte. De factor --k meet site.js
   (schaal(), synchroon bij het laden van het script, nog voor de fonts) en zet hij inline op de figure, wat de
   standaardwaarden per breekpunt hieronder overschrijft. Zonder JavaScript gelden die standaardwaarden en
   knipt overflow:hidden af. Geen container-query-eenheid gedeeld door pixels in calc(): een lengte delen door
   een lengte is pas geldig met typed arithmetic (Chrome 140+); daarvoor valt de declaratie weg en staat het
   toneel op volle maat.
   De kaart is precies zo hoog als zijn inhoud (500 px: altijd drie rijen, ook op de microsites met de datumrij); de verhouding laat onderaan 30 px voor de schaduw. */
.toneel{position:relative;width:min(100%,34rem);aspect-ratio:560/630;overflow:hidden;margin:.5rem 0 0;--k:.66}
@media (max-width:23.99rem){.toneel{--k:.48}}
@media (min-width:24rem) and (max-width:35.99rem){.toneel{--k:.6}}
@media (min-width:36rem) and (max-width:59.99rem){.toneel{--k:.85}}
.stage{position:absolute;left:0;top:0;width:560px;height:600px;transform-origin:0 0;transform:scale(var(--k,1))}
.toneel.is-gemeten .stage{transform:scale(var(--k))}
.pil{position:absolute;left:50%;top:48px;transform:translate(-50%,-50%);height:96px;padding:0 44px;border-radius:48px;background:var(--inkt);color:#fff;
  display:flex;align-items:center;font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.03em;box-shadow:0 30px 60px -34px rgba(21,25,30,.6)}
.pil span{color:var(--farm)}
.stip{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:8px;background:var(--veld);visibility:hidden;will-change:transform}
.doc{position:absolute;left:0;top:100px;width:560px;height:500px;background:var(--kaart);border:1px solid var(--kaartrand);border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden;font-size:22px}
.doc-kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px;padding:0 28px;background:var(--marge);border-bottom:1px solid var(--lijn)}
.doc-kop b{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.stempel{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--veld);border:1px solid var(--veld-licht);border-radius:4px;padding:3px 10px;background:#fff;white-space:nowrap}
.doc-body{padding:18px 30px 0}
.doc dl{margin:0}
.regel{position:relative;display:flex;align-items:center;height:62px;border-bottom:1px dotted var(--lijn)}
.regel:last-of-type{border-bottom:0}
.regel dt{flex:0 0 190px;font-size:18px;color:var(--grijs-tekst)}
.regel dd{position:relative;flex:1;margin:0;height:34px;line-height:34px;font-weight:500;white-space:nowrap}
.regel .hl{position:absolute;left:-10px;top:-2px;bottom:-2px;width:0;border-radius:6px;background:var(--veld);opacity:0}
.regel .veld,.regel .waarde{position:absolute;left:0;top:0;height:34px;line-height:34px}
.regel .veld{font-family:var(--mono);font-size:18px;color:var(--grijs-tekst);opacity:0;visibility:hidden}
.vink{position:absolute;right:0;top:3px;width:28px;height:28px;border-radius:14px;background:var(--veld);display:inline-flex;align-items:center;justify-content:center}
.vink svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ondertekening{margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn)}
.ondertekening .etiket{font-size:14px;margin-bottom:10px}
.krabbel{width:290px;height:64px;overflow:visible}
.krabbel path{fill:none;stroke:var(--inkt);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:430;stroke-dashoffset:0}
.lijn-onder{margin-top:12px;width:300px;border-top:1px solid rgba(21,25,30,.28)}
.doc .bijschrift{margin-top:16px;font-size:15px;color:var(--veld)}

/* ---------- herken je dit (de pijn, statisch, één keer oplichten) ---------- */
.pijn .regels{margin:2rem 0 0;padding:0;display:grid;gap:.6rem;font-family:var(--mono);font-size:1.0625rem;font-weight:500;line-height:1.5;letter-spacing:.02em;color:var(--inkt);max-width:40rem}
.pijn .regels li{list-style:none}
.pijn-visual{margin-top:2.5rem;display:grid;gap:1rem;max-width:34rem}
.crm-balk,.pijn-doc{background:var(--kaart);border:1px solid var(--kaartrand);border-radius:var(--radius);box-shadow:var(--schaduw)}
.crm-balk{padding:1rem 1.25rem;display:grid;grid-template-columns:repeat(3,auto);gap:1rem 1.5rem;align-items:end}
.crm-balk .etiket{grid-column:1 / -1;margin-bottom:0}
.crm-balk dl{display:contents}
.crm-balk div{display:grid;gap:.15rem}
.crm-balk dt{font-size:.8rem;color:var(--grijs-tekst)}
.crm-balk dd{margin:0;font-weight:600;font-size:1.05rem}
.pijn-doc{padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pijn-doc{flex-wrap:wrap}
.pijn-doc .pijn-label{flex:0 0 100%;margin-bottom:0}
.pijn-doc b{font-family:var(--display);font-weight:700}
.fout-waarde{position:relative;font-weight:600;color:var(--fout);padding:.1rem .4rem;border-radius:6px}
.fout-waarde::after{content:"";position:absolute;left:.35rem;right:.35rem;bottom:-.1rem;height:3px;border-radius:2px;background:var(--fout);transform:scaleX(0);transform-origin:left}
.pijn.is-live .fout-waarde{animation:df-fout 1.2s ease forwards}
.pijn.is-live .fout-waarde::after{animation:df-streep .5s ease .6s forwards}
@keyframes df-fout{0%{background:transparent}40%{background:rgba(180,35,24,.10)}100%{background:rgba(180,35,24,.10)}}
@keyframes df-streep{to{transform:scaleX(1)}}
@media (max-width:30rem){.crm-balk{grid-template-columns:1fr 1fr}}

/* ---------- zo werkt het ---------- */
.stappen{display:grid;gap:2rem;margin:2.5rem 0 0;padding:0;list-style:none;counter-reset:stap}
@media (min-width:48rem){.stappen{grid-template-columns:repeat(2,1fr);gap:2.5rem 3rem}}
.stap{border-top:2px solid var(--veld);padding-top:1rem}
.stap .nr{font-family:var(--mono);font-size:.75rem;color:var(--veld);font-weight:500}
.stap h3{margin-top:.5rem}
.stap p{margin-top:.5rem;color:var(--tekst2);font-size:.95rem}

/* ---------- video ---------- */
.video video{width:100%;height:auto;aspect-ratio:16/9;background:var(--marge);border-radius:var(--radius);border:1px solid var(--kaartrand);margin-top:2rem}
.poster{position:relative;display:block;margin-top:2rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--kaartrand);box-shadow:var(--schaduw)}
.poster img{width:100%;height:auto}
.speel{position:absolute;left:50%;top:50%;width:4.5rem;height:4.5rem;transform:translate(-50%,-50%);border-radius:50%;background:var(--inkt);box-shadow:var(--chipschaduw)}
.speel::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);border-left:1.3rem solid #fff;border-top:.8rem solid transparent;border-bottom:.8rem solid transparent}

/* ---------- koppelt aan wat je al hebt (de hub) ---------- */
.hub{position:relative;margin-top:2.5rem;display:grid;gap:1rem;grid-template-columns:1fr;justify-items:center}
.hub ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;justify-items:center}
.hub-pil{height:4.5rem;padding:0 2.2rem;border-radius:999px;background:var(--inkt);color:#fff;display:flex;align-items:center;font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;box-shadow:0 30px 60px -34px rgba(21,25,30,.6)}
.hub-pil span{color:var(--farm)}
.hub-lijn{display:none}
.hub .extra{display:none}
@media (min-width:48rem){
  .hub{grid-template-columns:1fr auto 1fr;align-items:center;gap:0;min-height:22rem}
  .hub ul{gap:1.4rem;justify-items:start}
  .hub ul.uit{justify-items:end}
  .hub .extra{display:inline-flex}
  .hub-lijn{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
  .hub-lijn path{fill:none;stroke:var(--hublijn);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420}
  .hub.is-live .hub-lijn path{animation:df-draw 1.1s ease forwards}
}
@keyframes df-draw{to{stroke-dashoffset:0}}
.hub-noot{margin-top:2.5rem;max-width:48ch;color:var(--tekst2)}
/* een bron die alleen met een koppeling van Datakoppelaars werkt: gestippeld, zoals in film v4 en print v6 */
.chip.koppeling{border-style:dashed;height:auto;min-height:2.75rem;padding-block:.45rem;flex-wrap:wrap}
.chip.koppeling small{flex-basis:100%;padding-left:1.2rem;font-size:.75rem;color:var(--grijs-tekst)}

/* ---------- voor wie ---------- */
.lijst{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--lijn)}
.rij{display:grid;gap:.35rem 2rem;padding-block:1.15rem;border-bottom:1px solid var(--lijn)}
@media (min-width:44rem){.rij{grid-template-columns:14rem 1fr;align-items:baseline}}
.rij h3{font-size:1rem}
.rij p{color:var(--tekst2);font-size:.95rem}

/* ---------- uit de praktijk (klantquote, DocuFarm PR #27) ---------- */
.citaat figure{margin:0;max-width:46rem;border-left:2px solid var(--veld);padding-left:clamp(1rem,3vw,1.75rem)}
.citaat blockquote{margin:0}
.citaat blockquote p{font-size:clamp(1.1rem,1rem + .45vw,1.35rem);line-height:1.5;color:var(--inkt);font-weight:500}
.citaat figcaption{margin-top:1.25rem;font-size:.95rem;color:var(--tekst2)}
.citaat figcaption strong{font-family:var(--display);font-weight:700;color:var(--inkt)}
.citaten{display:grid;gap:2.5rem 3rem}
@media (min-width:60rem){.citaten{grid-template-columns:1fr 1fr}}

/* ---------- wat kost het ---------- */
.feiten{margin:2rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.75rem}
.feiten li{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;background:var(--kaart);border:1px solid var(--kaartrand);font-size:.95rem;font-weight:500;box-shadow:var(--chipschaduw)}
.feiten li::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--veld);flex:0 0 auto}
.prijs .gratis{margin-top:1.5rem;font-weight:600;color:var(--veld)}

/* ---------- vragen ---------- */
.vragen{margin-top:2rem;max-width:44rem;border-top:1px solid var(--lijn)}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{cursor:pointer;padding:1rem 0;font-family:var(--display);font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary h3{font-size:1.05rem;margin:0}
.vraag summary::after{content:"+";font-family:var(--mono);color:var(--potlood);flex:0 0 auto}
.vraag[open] summary::after{content:"\2212"}
.vraag p{padding:0 0 1.25rem;color:var(--tekst2);max-width:60ch}

/* ---------- eind en slot (bel mij) ---------- */
.eind{background:var(--marge)}
.eind h2{font-size:clamp(2rem,1.3rem + 3.2vw,3.6rem);max-width:14ch}
.slot{background:var(--marge)}
form.belmij,form.gesprek{margin-top:2rem;display:grid;gap:1rem;max-width:26rem}
form label{display:grid;gap:.35rem;font-size:.9rem;color:var(--tekst2)}
form input,form textarea{font:inherit;padding:.65rem .8rem;border:1px solid var(--kaartrand);border-radius:10px;background:var(--kaart);color:var(--inkt)}
form textarea{min-height:4.5rem;resize:vertical}
.verborgen{position:absolute;left:-9999px;height:0;overflow:hidden}
.bevestiging{margin-top:2rem;font-weight:500;color:var(--veld)}
.fout{margin-top:1rem;color:var(--fout)}
.contact{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center}
.contact .bij{margin-top:0}
.tel{font-family:var(--display);font-weight:700;color:var(--inkt);text-decoration:none;font-size:1.05rem}

/* ---------- /gesprek/ ---------- */
.hero.gesprek .uitleg{margin-top:.75rem;color:var(--tekst2);max-width:38rem}
.kies-hint{margin:0;font-size:.9rem;color:var(--grijs-tekst)}
.kies-hint[hidden]{display:none}
.gesprek .dagen{margin-top:2rem;display:grid;gap:1.5rem}
.dag h3{font-size:1rem;color:var(--inkt);margin-bottom:.6rem;text-transform:lowercase}
.momenten{display:flex;flex-wrap:wrap;gap:.5rem}
.moment{font:inherit;font-family:var(--mono);font-size:.95rem;min-height:2.75rem;min-width:4.5rem;padding:.55rem 1rem;border-radius:999px;border:1.5px solid var(--kaartrand);background:var(--kaart);color:var(--inkt);cursor:pointer}
.moment:hover{border-color:var(--inkt)}
.moment[aria-pressed="true"]{background:var(--inkt);border-color:var(--inkt);color:#fff}
.skelet{display:grid;gap:.75rem;max-width:26rem}
.skelet i{display:block;height:2.4rem;border-radius:999px;background:var(--marge)}
.melding{margin-top:1.25rem;max-width:48ch}
.melding.fout{color:var(--fout)}
.succes{margin-top:2rem;max-width:48ch}
.succes .lead{margin-top:0}

/* ---------- juridisch ---------- */
.juridisch .blad{max-width:48rem}
.juridisch h1{font-size:clamp(2rem,1.4rem + 2.5vw,3.2rem)}
.juridisch h2{font-size:1.3rem;margin-top:2.5rem;max-width:none}
.juridisch p,.juridisch li{color:var(--tekst2);margin-top:.75rem;max-width:70ch}
.juridisch ul,.juridisch ol{padding-left:1.25rem;margin:0}
.juridisch .tabel{overflow-x:auto;margin-top:1rem;max-width:100%}
.juridisch table{border-collapse:collapse;font-size:.9rem;width:100%;min-width:26rem}
.juridisch th,.juridisch td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--lijn);vertical-align:top;color:var(--tekst2)}
.juridisch th{color:var(--inkt);font-weight:600}
.juridisch code{font-family:var(--mono);font-size:.85em;background:var(--marge);padding:.1rem .3rem;border-radius:4px}
.juridisch .datum{margin-top:.5rem;font-family:var(--mono);font-size:.78rem;color:var(--grijs-tekst)}

/* ---------- 404 ---------- */
.vierofour .lead{margin-top:1rem}

/* ---------- voet ---------- */
footer{padding-block:2.5rem;font-size:.85rem;color:var(--grijs-tekst);border-top:1px solid var(--lijn)}
footer .blad{display:grid;gap:.75rem}
footer a{color:var(--grijs-tekst)}
.voet-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}

/* ---------- cookiebalk: een kaart onderin, nooit een muur ---------- */
.consent{position:fixed;left:.5rem;right:.5rem;bottom:.5rem;z-index:30;margin-inline:auto;max-width:56rem;padding:.6rem .85rem;
  background:var(--kaart);border:1px solid var(--kaartrand);border-radius:var(--radius);box-shadow:var(--schaduw);
  display:grid;gap:.5rem;font-size:.82rem;line-height:1.35}
.consent[hidden]{display:none}
.consent p{color:var(--tekst2);margin:0}
.consent-knoppen{display:flex;gap:.5rem}
.consent .knop{font-size:.82rem;padding:.4rem .8rem;white-space:nowrap}
@media (min-width:48rem){.consent{grid-template-columns:1fr auto;align-items:center;gap:1rem}}

/* ---------- css-val: de CSS-terugvaloptie van het toneel (spec 5.3) ---------- */
/* Blijft module 8 van site.js niet binnen het framebudget (Task 19), dan krijgt de figure de klasse css-val en
   vult en ondertekent het document zich één keer in CSS (de huidige microsite-animatie, geport): de waarden
   rij voor rij, het vinkje, de handtekening die zichzelf schrijft, de stempel. Zelfde eindtoestand als de kernel. */
.toneel.css-val .regel .waarde{opacity:0;animation:df-vul .45s ease forwards}
.toneel.css-val .regel:nth-child(1) .waarde{animation-delay:1s}
.toneel.css-val .regel:nth-child(2) .waarde{animation-delay:1.35s}
.toneel.css-val .regel:nth-child(3) .waarde{animation-delay:1.7s}
.toneel.css-val .regel:nth-child(4) .waarde{animation-delay:2.05s}
.toneel.css-val .vink{opacity:0;animation:df-vul .4s ease 2.5s forwards}
.toneel.css-val .krabbel path{stroke-dashoffset:430;animation:df-krabbel 1.5s cubic-bezier(.6,.05,.35,1) 2.95s forwards}
.toneel.css-val [data-stempel],.toneel.css-val [data-bijschrift]{opacity:0;animation:df-vul .3s ease 3.65s forwards}
@keyframes df-vul{to{opacity:1}}
@keyframes df-krabbel{to{stroke-dashoffset:0}}

/* ---------- beweging: alles respecteert de voorkeur van de bezoeker ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .hub-lijn path{stroke-dashoffset:0}
  .fout-waarde{background:rgba(180,35,24,.10)}
  .fout-waarde::after{transform:scaleX(1)}
  .toneel.css-val .waarde,.toneel.css-val .vink,.toneel.css-val [data-stempel],.toneel.css-val [data-bijschrift]{opacity:1}
  .toneel.css-val .krabbel path{stroke-dashoffset:0}
}

.pijn-visual{grid-template-columns:minmax(0,1fr)}.pijn-doc{flex-wrap:wrap}
@media (max-width:30rem){.crm-balk{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* kaart met vier rijen: één rij (62 px) hoger dan de standaardkaart van drie, zodat de handtekening niet wordt afgeknipt */
.toneel.vier-rijen{aspect-ratio:560/692}
.toneel.vier-rijen .stage{height:662px}
.toneel.vier-rijen .doc{height:562px}
.succes:focus{outline:none}