/* Hairline: de opmaak die de kernel anders zelf invoegt (HL.inject), hier als vast bestand,
   want de echte site staat geen ingevoegde stijl toe (CSP). Overgenomen uit @lucasmarkes/hairline 0.5.1 (MIT).
   Daaronder de kleuren van het Kluslus-logo. */
:where([data-hairline]) { display: block; position: relative; aspect-ratio: 5 / 4; touch-action: pan-y; user-select: none; -webkit-user-select: none; --hl-sw: var(--hairline-stroke,0.9); --hl-plate: var(--hairline-plate,#ffffff); --hl-hi: var(--hairline-hi,#232327); --hl-edge: var(--hairline-edge,#a4a4ac); --hl-mid: var(--hairline-mid,#c3c3c9); --hl-lo: var(--hairline-lo,#e0e0e4); }
:where([data-hairline][data-hairline-theme="dark"]) { --hl-plate: var(--hairline-plate,#08090a); --hl-hi: var(--hairline-hi,#d0d6e0); --hl-edge: var(--hairline-edge,#5b5d64); --hl-mid: var(--hairline-mid,#3e3e44); --hl-lo: var(--hairline-lo,#29292d); }
:where([data-hairline]:focus-visible) { outline: 1.5px solid var(--hl-hi); outline-offset: 2px; }
:where([data-hairline] > svg) { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; overflow: visible; }
:where([data-hairline] > svg) :where(path, polygon, ellipse, line) { fill: var(--hl-plate); stroke: var(--hl-mid); stroke-width: var(--hl-sw); vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; transition: stroke 260ms cubic-bezier(0.5, 0, 0.1, 1); }
:where([data-hairline] > svg) :where(.nf) { fill: none; }
:where([data-hairline] > svg) :where(.fo) { stroke: none; }
:where([data-hairline] > svg) :where(.sil) { stroke: var(--hl-edge); }
:where([data-hairline] > svg) :where(.hi) { stroke: var(--hl-hi); }
:where([data-hairline] > svg) :where(.lo) { stroke: var(--hl-lo); }

/* Het logo: kleur in de lijn, niet in vlakken. */
.logo-samen { --kl-oranje: #f97316; --kl-vink: #f4f4f5; --kl-grond: var(--hl-plate); cursor: pointer; }
.logo-samen .kl-ring { stroke: var(--kl-oranje); stroke-width: 1.6; fill: color-mix(in srgb, var(--kl-oranje) 12%, var(--kl-grond)); }
.logo-samen .kl-ring-zij { fill: color-mix(in srgb, var(--kl-oranje) 5%, var(--kl-grond)); }
.logo-samen .kl-vink { stroke: var(--kl-vink); stroke-width: 1.6; fill: var(--kl-grond); }
.logo-samen .kl-vink-zij { fill: var(--kl-grond); }
/* Zonder script: het gewone logo. */
.logo-samen .logo-plat { position: absolute; inset: 18% 25%; width: 50%; height: auto; }