/* Kopstijl Delistaff-vacaturesites (vanaf 21 okt 2026)
   B · De route: kernwoord krijgt een stippel-route met de speld aan het eind.
       <span class="kw-route">om de hoek.</span>   op donker: class="kw-route kw-route--licht"
       Regels: 1–3 woorden, breekt nooit af, alleen in grote koppen (hero, sectietitels, video).
       Nooit B en C samen in één kop: één accent per kop.
   C · Het straatnaambord: alleen voor de stadsnaam.
       <span class="kw-bord">Breda</span>          op donker: class="kw-bord kw-bord--donker"  */
.kw-route{position:relative;display:inline-block;white-space:nowrap;padding-right:.08em}
.kw-route::after{content:"";position:absolute;left:-.04em;right:-.19em;bottom:-.3em;height:.32em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 80 4, 190 22, 298 24' fill='none' stroke='%2300A45F' stroke-width='5' stroke-linecap='round' stroke-dasharray='2 13'/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none}
.kw-route::before{content:"";position:absolute;right:-.34em;bottom:-.22em;width:.3em;height:.3em;border-radius:50% 50% 50% 0;background:#F2B203;transform:rotate(-45deg);pointer-events:none}
.kw-route--licht::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 80 4, 190 22, 298 24' fill='none' stroke='%2340dfa5' stroke-width='5' stroke-linecap='round' stroke-dasharray='2 13'/%3E%3C/svg%3E")}
h1:has(.kw-route),h2:has(.kw-route){padding-bottom:.18em}
.kw-route::before{z-index:1}
.kw-bord{display:inline-block;background:#00A45F;color:#fff;border-radius:.16em;padding:0 .24em .04em;line-height:1.15;box-shadow:inset 0 0 0 .05em #fff,0 0 0 .035em #00A45F}
.kw-bord--donker{box-shadow:inset 0 0 0 .05em #0c3a26,0 0 0 .035em #00A45F}
@media (prefers-reduced-motion:no-preference){
  .kw-route.kw-teken::after{clip-path:inset(0 100% 0 0);animation:kwTeken .9s cubic-bezier(.2,.7,.3,1) .25s forwards}
  .kw-route.kw-teken::before{transform:rotate(-45deg) scale(0);animation:kwPin .45s cubic-bezier(.34,1.56,.64,1) 1.05s forwards}
}
@keyframes kwTeken{to{clip-path:inset(0 0 0 0)}}
@keyframes kwPin{to{transform:rotate(-45deg) scale(1)}}
