.b-kaart{--k-vel:var(--b-lijn);--k-vel-stip:rgba(121,36,47,.22);--k-stap:clamp(.9rem,.3rem + calc(2*var(--vw)),2.4rem);--k-kader:#fff;--k-rand:var(--b-lijn);--k-ring:rgba(121,36,47,.22);--k-tekst:var(--b-inkt);
--k-zacht:var(--b-zacht);--k-stip:#fff;--k-stiprand:var(--b-bordeaux);--k-nr:var(--b-bordeaux);--k-nadruk:var(--b-bordeaux);
--k-rij-hover:var(--b-roze);--k-bol:var(--b-roze);--k-onder:clamp(2.6rem,calc(5*var(--vw)),4.2rem)}
.b-kaart.b-grond--roze{--k-rij-hover:#fff;--k-bol:#fff}
.b-kaart.b-grond--creme{--k-rij-hover:#fff}
.b-kaart:is(.b-grond--donker,.b-grond--bordeaux){--k-vel:var(--b-bordeaux);--k-vel-stip:rgba(255,255,255,.14);--k-kader:var(--b-diepst);--k-rand:rgba(255,255,255,.14);
--k-ring:rgba(244,204,205,.24);--k-tekst:#fff;--k-zacht:rgba(255,255,255,.72);--k-stip:var(--b-diepst);--k-stiprand:var(--b-op-donker);
--k-nr:#fff;--k-nadruk:var(--b-op-donker);--k-rij-hover:rgba(255,255,255,.07);--k-bol:rgba(255,255,255,.1)}
.b-kaart__in{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);grid-template-areas:"kop kop" "vlak zij";column-gap:clamp(2rem,calc(4.5*var(--vw)),4.5rem);align-items:start}
.b-kaart__kop{grid-area:kop}
.b-kaart__vlak{grid-area:vlak;position:relative;padding-bottom:var(--k-onder)}
.b-kaart__zij{grid-area:zij;position:relative;z-index:2}
.b-kaart__vel{position:absolute;z-index:0;left:calc(-1 * var(--k-stap));right:var(--k-stap);top:var(--k-stap);bottom:calc(var(--k-onder) - var(--k-stap));
border-radius:var(--b-r-media);background:radial-gradient(circle,var(--k-vel-stip) 1.5px,transparent 2px) 0 0/18px 18px,var(--k-vel);
box-shadow:0 1px 2px rgba(10,10,10,.05),0 22px 38px -26px rgba(69,10,20,.45);transition:transform .5s var(--b-ease);pointer-events:none}
.b-kaart__kader{position:relative;z-index:1;margin:0;background:var(--k-kader);border:1px solid var(--k-rand);border-radius:var(--b-r-media);padding:clamp(.4rem,calc(1.3*var(--vw)),1rem);box-shadow:var(--b-schaduw)}
.b-kaart__svg{display:block;width:100%;height:auto}
.b-kaart__raster{fill:none;stroke:var(--k-ring);stroke-width:1.6}
.b-kaart__raster line{stroke-dasharray:3 9;stroke-linecap:round}
.b-kaart__ringlabels text{fill:var(--k-zacht);font-family:var(--font-kop);font-weight:600;font-size:15px;paint-order:stroke;stroke:var(--k-kader);stroke-width:6px;stroke-linejoin:round}
.b-kaart__noord path{fill:none;stroke:var(--k-tekst);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.b-kaart__noord text{fill:var(--k-tekst);font-family:var(--font-kop);font-weight:700;font-size:16px}
.b-kaart__plek{--k-schaal:1;transition:opacity .35s var(--b-ease)}
.b-kaart__plek:focus{outline:none}
.b-kaart__lijn{fill:none;stroke:var(--b-signaal);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--b-ease)}
.b-kaart__stip{fill:var(--k-stip);stroke:var(--k-stiprand);stroke-width:4;transform-box:fill-box;transform-origin:center;transform:scale(var(--k-schaal));transition:transform .35s var(--b-ease)}
.b-kaart__stip--basis{fill:var(--b-bordeaux);stroke:#fff}
.b-kaart__huis{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.b-kaart__nr{fill:var(--k-nr);font-family:var(--font-kop);font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}
.b-kaart:not(.b-kaart--reviews) .b-kaart__nr{font-size:15px}
.b-kaart__naam{fill:var(--k-tekst);font-family:var(--font-kop);font-weight:600;font-size:20px;paint-order:stroke;stroke:var(--k-kader);stroke-width:6px;stroke-linejoin:round;transition:fill .3s var(--b-ease)}
.b-kaart__sub{fill:var(--k-zacht);font-family:var(--font-kop);font-weight:600;font-size:15px;paint-order:stroke;stroke:var(--k-kader);stroke-width:5px;stroke-linejoin:round}
.b-kaart__afst{fill:var(--k-nadruk);font-family:var(--font-kop);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--k-kader);stroke-width:6px;stroke-linejoin:round;opacity:0;transition:opacity .3s var(--b-ease)}
.b-kaart--reviews .b-kaart__stip{fill:rgba(255,81,0,.14);stroke:var(--b-signaal);stroke-width:3}
.b-kaart--reviews .b-kaart__stip--leeg{fill:var(--k-stip);stroke:var(--k-ring);stroke-width:3}
.b-kaart--reviews .b-kaart__nr{fill:var(--k-tekst)}
.b-kaart__plek:is(.is-aan,.is-vast){--k-schaal:1.28}
.b-kaart__plek:is(.is-aan,.is-vast) .b-kaart__lijn{stroke-dashoffset:0}
.b-kaart__plek:is(.is-aan,.is-vast) .b-kaart__afst{opacity:1}
.b-kaart__plek:is(.is-aan,.is-vast) .b-kaart__naam{fill:var(--k-nadruk)}
.b-kaart__svg.is-actief .b-kaart__plek:not(.is-aan):not(.b-kaart__plek--basis){opacity:.34}
@media (hover:hover){
.b-kaart__plek:hover{--k-schaal:1.28}
.b-kaart__plek:hover .b-kaart__lijn{stroke-dashoffset:0}
.b-kaart__plek:hover .b-kaart__afst{opacity:1}
.b-kaart__plek:hover .b-kaart__naam{fill:var(--k-nadruk)}
.b-kaart__svg:has(.b-kaart__plek:hover) .b-kaart__plek:not(:hover):not(.b-kaart__plek--basis){opacity:.34}
.b-kaart__vlak:hover .b-kaart__teamvak{transform:translateY(-6px)}
.b-kaart__vlak:hover .b-kaart__vel{transform:translate(-6px,6px)}
}
.b-kaart__teamvak{position:absolute;z-index:2;left:-2%;bottom:calc(var(--k-onder) * .1);width:50%;filter:drop-shadow(0 20px 18px rgba(69,10,20,.28));transition:transform .5s var(--b-ease);pointer-events:none}
.b-kaart__team{display:block;width:100%;height:auto}
.b-kaart__lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--k-rand)}
.b-kaart__rij{display:grid;grid-template-columns:1.9rem minmax(0,1fr) auto auto 1rem;align-items:center;column-gap:.7rem;min-height:46px;padding:.42rem .45rem .42rem .15rem;
border-bottom:1px solid var(--k-rand);color:var(--k-tekst);text-decoration:none;transition:background-color .3s var(--b-ease)}
.b-kaart__rij-nr{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--k-bol);color:var(--k-nadruk);font:700 .8rem/1 var(--font-kop);font-variant-numeric:tabular-nums;transition:transform .35s var(--b-ease)}
.b-kaart__rij-nr svg{width:1rem;height:1rem}
.b-kaart__rij--basis .b-kaart__rij-nr{background:var(--b-bordeaux);color:#fff}
.b-kaart__rij-naam{font:600 .98rem/1.25 var(--font-kop);min-width:0}
.b-kaart__rij-naam small{display:block;font-weight:400;font-size:.8rem;color:var(--k-zacht)}
.b-kaart__rij-km{font:600 .92rem/1 var(--font-kop);font-variant-numeric:tabular-nums;color:var(--k-tekst);text-align:right;white-space:nowrap}
.b-kaart__rij--basis .b-kaart__rij-km{font-weight:400;font-size:.82rem;color:var(--k-zacht)}
.b-kaart__rij-rv{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;color:var(--k-zacht);font-variant-numeric:tabular-nums;white-space:nowrap}
.b-kaart__rij-rv svg{width:.8rem;height:.8rem;color:var(--b-signaal)}
.b-kaart__rij-rv--nul svg{opacity:.3}
.b-kaart--zonder-beeld{--k-onder:1.8rem}
.b-kaart__rij-pijl{width:1rem;height:1rem;color:var(--k-nadruk);opacity:.45;transition:transform .35s var(--b-ease),opacity .35s var(--b-ease)}
.b-kaart__rij[aria-current] .b-kaart__rij-naam{color:var(--k-nadruk)}
.b-kaart__rij.is-aan{background:var(--k-rij-hover)}
.b-kaart__rij.is-aan .b-kaart__rij-pijl,.b-kaart__rij:focus-visible .b-kaart__rij-pijl{transform:translateX(4px);opacity:1}
.b-kaart__rij.is-aan .b-kaart__rij-nr,.b-kaart__rij:focus-visible .b-kaart__rij-nr{transform:scale(1.12)}
.b-kaart__rij:focus-visible{outline-offset:-3px;border-radius:var(--b-r-control)}
@media (hover:hover){
.b-kaart__rij:hover{background:var(--k-rij-hover)}
.b-kaart__rij:hover .b-kaart__rij-pijl{transform:translateX(4px);opacity:1}
.b-kaart__rij:hover .b-kaart__rij-nr{transform:scale(1.12)}
}
.b-kaart__noot{margin:.9rem 0 0;font-size:.84rem;line-height:1.55;color:var(--k-zacht)}
.b-kaart .b-knoppen{margin-top:1.3rem}
@media(max-width:1100px) and (min-width:900px){
.b-kaart--breed .b-kaart__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media(max-width:899px){
.b-kaart__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "vlak" "zij"}
.b-kaart__vlak{margin-bottom:1.6rem}
.b-kaart__naam,.b-kaart__sub,.b-kaart__afst{display:none}
.b-kaart__plek{--k-schaal:1.5}
.b-kaart__plek:is(.is-aan,.is-vast){--k-schaal:1.8}
.b-kaart:not(.b-kaart--reviews) .b-kaart__nr{font-size:22px}
.b-kaart__ringlabels text{font-size:26px;stroke-width:8px}
.b-kaart__noord text{font-size:26px}
.b-kaart__teamvak{width:48%}
}
@media(max-width:560px){
.b-kaart__rij{column-gap:.55rem}
}
@media (prefers-reduced-motion:reduce){
.b-kaart__vlak:hover :is(.b-kaart__teamvak,.b-kaart__vel){transform:none}
}
@media(max-width:899px){.b-kaart--reviews .b-kaart__plek{--k-schaal:1}.b-kaart--reviews .b-kaart__plek:is(.is-aan,.is-vast){--k-schaal:1.15}}