.b-score{
--b-score-foto:clamp(17rem,calc(29*var(--vw)),26rem);
--b-score-gat:clamp(1.5rem,calc(3*var(--vw)),2.5rem);
--b-score-over:clamp(2rem,calc(4*var(--vw)),3.5rem);
--b-score-band:clamp(14rem,calc(22*var(--vw)),20rem);
--b-score-onder:clamp(3rem,calc(6*var(--vw)),5.5rem);
--b-score-px:0px;
padding-bottom:calc(var(--b-ruimte) + 1.5rem)
}
.b-score__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--b-score-foto);column-gap:var(--b-score-gat);align-items:start}
.b-score__kop{grid-column:1;grid-row:1;position:relative;z-index:4}
.b-score__kop .b-tekst p{max-width:60ch}
.b-score__beeld{grid-column:2;grid-row:1 / span 2;align-self:end;position:relative;z-index:2}
.b-score__band{position:absolute;z-index:0;left:-100dvw;right:-50dvw;bottom:calc(-1 * var(--b-score-onder));height:var(--b-score-band);
transform-origin:calc(100% - 50dvw) 100%;transform:translateY(var(--b-score-px)) skewY(3deg);backface-visibility:hidden;pointer-events:none;
background:
radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1px,transparent 1.5px) 0 0/18px 18px,
linear-gradient(90deg,var(--b-donker),var(--b-bordeaux) 45%,var(--b-bordeaux-800))}
.b-score__foto{position:relative;z-index:1;margin:0;aspect-ratio:3 / 4;overflow:hidden;border-radius:var(--b-r-media);
background:var(--b-bordeaux-800);box-shadow:0 30px 60px -30px rgba(10,10,10,.5)}
.b-score__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);transition:transform .8s var(--b-ease)}
.b-score__notitie{position:absolute;z-index:2;top:clamp(1rem,calc(2.4*var(--vw)),2rem);right:calc(-1 * clamp(.5rem,calc(2*var(--vw)),1.75rem));display:grid;gap:.3rem;
width:max-content;max-width:min(13.5rem,80%);margin:0;padding:.9rem 1.05rem 1rem;background:var(--b-wit);border-radius:var(--b-r-control);
box-shadow:var(--b-schaduw);transform:rotate(-2.5deg);transition:transform .45s var(--b-ease);
font-size:.88rem;line-height:1.45;color:var(--b-zacht)}
.b-score__notitie b{font:700 2.2rem/1 var(--font-titel);letter-spacing:-.02em;color:var(--b-inkt)}
.b-score__kaart{grid-column:1;grid-row:2;position:relative;z-index:4;margin:0 calc(-1 * (var(--b-score-gat) + var(--b-score-over))) 0 0;
display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.4rem,calc(3*var(--vw)),2.6rem);align-items:center;
padding:clamp(1.3rem,calc(2.6*var(--vw)),2.2rem);background:var(--b-wit);border-radius:var(--b-r-kaart);box-shadow:var(--b-schaduw)}
.b-score__boog{width:clamp(11rem,calc(15*var(--vw)),13.5rem)}
.b-score__boog .b-stemmen__boog{width:100%}
.b-score__boog .b-stemmen__getal b{font-size:clamp(3rem,2.2rem + calc(2*var(--vw)),4.3rem)}
.b-score__titel{margin:0 0 .7rem;font:600 1.05rem/1.3 var(--font-kop);letter-spacing:-.01em;color:var(--b-inkt)}
.b-score__rijen{list-style:none;margin:0;padding:0}
.b-score__link,.b-score__rij--leeg{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr) 1.2rem;align-items:center;
min-height:30px;padding:0 .35rem 0 0;border-radius:var(--b-r-control);color:var(--b-inkt);text-decoration:none}
.b-score__rij--leeg{color:var(--b-zacht)}
.b-score__link::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--b-roze);opacity:0;transition:opacity .3s var(--b-ease)}
.b-score__cijfer{position:relative;padding-right:.7rem;text-align:right;font:600 .9rem/1 var(--font-kop);font-variant-numeric:tabular-nums}
.b-score__spoor{position:relative;display:flex;align-items:center;gap:.55rem;align-self:stretch;border-left:1px solid var(--b-lijn-grijs)}
.b-score__balk{flex:none;width:calc(var(--aandeel) * (100% - 3.2rem));min-width:3px;height:14px;background:var(--b-signaal);
border-radius:0 4px 4px 0;transform-origin:left center;transition:transform .8s var(--b-ease) calc(var(--i,0) * 55ms);transition-property:transform,opacity}
.b-score__rij--leeg .b-score__balk{display:none}
.b-score__aantal{position:relative;font:600 .9rem/1 var(--font-kop);font-variant-numeric:tabular-nums}
.b-score__pijl{position:relative;width:14px;height:14px;color:var(--b-bordeaux);opacity:0;transform:translateX(-4px);transition:opacity .3s var(--b-ease),transform .3s var(--b-ease)}
.b-score__noot{margin:1rem 0 0;padding-top:.9rem;border-top:1px dashed var(--b-lijn);font-size:.86rem;line-height:1.6;color:var(--b-zacht)}
.b-score__noot a{color:var(--b-bordeaux);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.b-score--js:not(.b-score--in) .b-score__balk{transform:scaleX(0)}
.b-score__link:focus-visible{outline:3px solid var(--b-bordeaux);outline-offset:2px}
.b-score__link:focus-visible::before{opacity:1}
.b-score__link:focus-visible .b-score__pijl{opacity:1;transform:none}
.b-score__noot a:focus-visible{outline:3px solid var(--b-bordeaux);outline-offset:2px}
@media (hover:hover){
.b-score__link:hover::before{opacity:1}
.b-score__link:hover .b-score__pijl{opacity:1;transform:none}
.b-score__rijen:hover .b-score__link:not(:hover) .b-score__balk{opacity:.45}
.b-score__beeld:hover .b-score__foto img{transform:scale(1.05)}
.b-score__beeld:hover .b-score__notitie{transform:rotate(-1deg) translateY(-4px)}
.b-score__noot a:hover{color:var(--b-inkt)}
}
@media (max-width:959.98px){
.b-score{--b-score-band:9rem;--b-score-onder:1.25rem;padding-bottom:var(--b-ruimte)}
.b-score__in{grid-template-columns:minmax(0,1fr)}
.b-score__beeld{grid-column:1;grid-row:2;align-self:auto;justify-self:end;width:82%;margin-top:.5rem}
.b-score__foto{aspect-ratio:1 / 1}
.b-score__notitie{top:.9rem;right:.7rem;max-width:min(11rem,62%);font-size:.82rem}
.b-score__notitie b{font-size:1.9rem}
.b-score__kaart{grid-row:3;margin:-1rem 0 0}
}
@media (max-width:640px){
.b-score__kaart{grid-template-columns:minmax(0,1fr);justify-items:stretch}
.b-score__boog{margin-inline:auto}
}
@media (pointer:coarse){.b-score__link,.b-score__rij--leeg{min-height:44px}}
@media (prefers-reduced-motion:reduce){
.b-score__foto img,.b-score__notitie{transition:none}
.b-score__beeld:hover .b-score__foto img{transform:none}
.b-score__beeld:hover .b-score__notitie{transform:rotate(-2.5deg)}
}
@media print{
.b-score__band,.b-score__foto{display:none}
.b-score__notitie{position:static;transform:none;box-shadow:none;max-width:none}
}
