.hn-field{display:block;margin-bottom:var(--hn-s4)}
.hn-field__label{display:block;font-size:var(--hn-ui);font-weight:var(--hn-weight-bold);color:var(--text-heading);margin-bottom:var(--hn-s2)}
.hn-field__hint{display:block;font-size:var(--hn-ui);color:var(--text-muted);margin-top:var(--hn-s2)}
.hn-field__error{display:block;font-size:var(--hn-ui);color:var(--hn-danger);font-weight:var(--hn-weight-bold);margin-top:var(--hn-s2)}
/* Eén veldhoogte: de tekst staat op de interface-regelhoogte en centreert in de
   48 px; met de leesregelhoogte erfde het veld 56 px (Ruud, 2026-09-17). */
.hn-input,.hn-select,.hn-textarea{width:100%;min-height:var(--hn-veld);padding:0 var(--hn-s4);line-height:var(--hn-leading-ui);background:var(--hn-white);border:1px solid var(--border-field);border-radius:var(--hn-radius);color:var(--text-body)}
.hn-input::placeholder{color:var(--hn-muted)}
.hn-input:focus,.hn-select:focus,.hn-textarea:focus{outline:none;border-color:var(--hn-brand);box-shadow:var(--hn-focus)}
.hn-input[aria-invalid="true"]{border-color:var(--hn-danger);border-width:2px}
.hn-textarea{min-height:120px;padding-block:var(--hn-s3);resize:vertical}
.hn-select{appearance:none;padding-right:var(--hn-s6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%232C4048' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--hn-s4) center}
.hn-check{display:flex;align-items:flex-start;gap:var(--hn-s3);min-height:var(--hn-tap);padding:var(--hn-s2) 0;cursor:pointer;font-size:var(--hn-text)}
.hn-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--hn-brand);flex:none}
.hn-check__count{margin-left:auto;color:var(--text-muted);font-size:var(--hn-ui);font-variant-numeric:tabular-nums}
.hn-search{position:relative;display:flex}
/* Vaste inspringing, geen --hn-s7: die schaalt mee met de schermbreedte en zakt
   op een telefoon naar ~25px, terwijl het icoon tot 34px doorloopt — de
   placeholder liep dan dwars door het vergrootglas (gemeten 1 sep 2026 op
   390px). 44px houdt overal 10px lucht. */
.hn-search .hn-input{padding-left:2.75rem}
.hn-search__icon{position:absolute;left:var(--hn-s4);top:50%;transform:translateY(-50%);color:var(--hn-muted);pointer-events:none}
/* Filter group — collapsed by default */
.hn-filters{background:var(--hn-white);border:var(--hn-border);border-radius:var(--hn-radius);overflow:hidden}
.hn-filtergroup{border-bottom:var(--hn-border)}
.hn-filtergroup:last-child{border-bottom:0}
.hn-filtergroup__toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-s3);width:100%;min-height:var(--hn-tap);padding:var(--hn-s3) var(--hn-s4);background:none;border:0;cursor:pointer;font-family:var(--font-body);font-size:var(--hn-ui);font-weight:var(--hn-weight-bold);letter-spacing:var(--hn-tracking);text-transform:uppercase;color:var(--text-heading);text-align:left}
.hn-filtergroup__toggle:hover{background:var(--hn-surface)}
.hn-filtergroup__chev{flex:none;transition:transform .15s ease;color:var(--hn-muted)}
.hn-filtergroup[data-open="true"] .hn-filtergroup__chev{transform:rotate(180deg)}
.hn-filtergroup__body{padding:0 var(--hn-s4) var(--hn-s3)}
.hn-chips{display:flex;flex-wrap:wrap;gap:var(--hn-s2)}
/* display:flex wint anders van het hidden-attribuut: de rij bleef als lege
   strook staan, en met een label erin werd dat een kop zonder inhoud. */
.hn-chips[hidden]{display:none}
.hn-chip{display:inline-flex;align-items:center;gap:var(--hn-s2);min-height:32px;padding:0 var(--hn-s3);border:1px solid var(--hn-line);border-radius:var(--hn-radius-pill);background:var(--hn-white);font-size:var(--hn-ui);color:var(--text-body);cursor:pointer}
.hn-chip:hover{border-color:var(--hn-brand)}
.hn-chip__x{font-weight:700;color:var(--hn-muted)}
/* Het contactformulier (Fluent Forms): de verzendknop in de look van .hn-btn--primary
   in plaats van Fluent-blauw (Ruud, 2026-09-19). De lange selector wint van Fluents
   eigen knopregel. Uitzondering op "niets binnen het hek", zie check_assets.py. */
.fluentform form .ff-btn.ff-btn-submit:not(.ff_btn_no_style){min-height:var(--hn-veld);padding:0 var(--hn-s5);border:1px solid transparent;border-radius:var(--hn-radius);background:var(--action-primary);color:var(--text-on-brand);font-family:var(--font-body);font-size:var(--hn-knop);font-weight:var(--hn-weight-bold);line-height:1}
.fluentform form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover{background:var(--action-primary-hover)}