.hn-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--hn-s2);min-height:var(--hn-veld);padding:0 var(--hn-s5);border:1px solid transparent;border-radius:var(--hn-radius);font-family:var(--font-body);font-size:var(--hn-knop);/* vaste maat: een knop schaalt niet mee met het scherm */font-weight:var(--hn-weight-bold);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.hn-btn:hover{text-decoration:none}
.hn-btn--primary{background:var(--action-primary);color:var(--text-on-brand)}
.hn-btn--primary:hover{background:var(--action-primary-hover);color:var(--text-on-brand)}
.hn-btn--primary:active{background:var(--action-primary-active)}
.hn-btn--secondary{background:transparent;color:var(--action-primary);border-color:var(--action-primary)}
.hn-btn--secondary:hover{background:var(--hn-brand-tint);color:var(--action-primary-hover)}
.hn-btn--ghost{background:transparent;color:var(--action-primary);padding-inline:var(--hn-s3)}
.hn-btn--ghost:hover{background:var(--hn-brand-tint)}
.hn-btn--onDark{background:var(--hn-white);color:var(--hn-brand-deep)}
.hn-btn--onDark:hover{background:#E4F1F6;color:var(--hn-brand-deep)}
.hn-btn--sm{min-height:var(--hn-tap);font-size:var(--hn-ui);padding-inline:var(--hn-s4)}/* smaller in breedte, niet in hoogte: het tikdoel blijft 44 */
.hn-btn--lg{min-height:var(--hn-knop-lg);font-size:var(--hn-text);padding-inline:var(--hn-s6)}
/* Een knop over de volle breedte mag zijn kader nooit oprekken. .hn-btn staat op
   nowrap, en een label als "Parasites: what to look for" duwde de kaart in de
   zijkolom daardoor 49px buiten het scherm op 320px (gemeten 1 sep 2026). Hier
   wint afbreken van één regel. */
.hn-btn--block{display:flex;width:100%;white-space:normal;text-align:center;line-height:1.25;height:auto;padding-block:10px}
.hn-btn[disabled],.hn-btn[aria-disabled="true"]{background:var(--hn-surface);color:var(--hn-muted);border-color:var(--hn-line);cursor:not-allowed}
.hn-btn:focus-visible{outline:none;box-shadow:var(--hn-focus)}
.hn-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--hn-tap);height:var(--hn-tap);border:1px solid transparent;border-radius:var(--hn-radius);background:transparent;color:var(--hn-ink);cursor:pointer}
.hn-iconbtn:hover{background:var(--hn-surface)}
.hn-iconbtn--bordered{border-color:var(--hn-line);background:var(--hn-white)}
.hn-iconbtn:focus-visible{outline:none;box-shadow:var(--hn-focus)}
.hn-iconbtn__badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--hn-radius-pill);background:var(--hn-brand);color:#fff;font-size:var(--hn-label);font-weight:700;line-height:18px;text-align:center}