.b-route{--wagen-b:clamp(8.6rem,calc(10.5*var(--vw)),10.25rem)}
.b-route__baan{position:relative}
.b-route__stops{--gang:clamp(14rem,calc(19*var(--vw)),16.5rem);--zwaai:0px;--eind:4.4rem;position:relative;z-index:2;display:grid;
grid-template-columns:minmax(0,1fr) var(--gang) minmax(0,1fr);margin:0;padding:var(--eind) 0 calc(var(--eind) + .4rem);list-style:none;
counter-reset:b-stop;
background:repeating-linear-gradient(180deg,#fff 0 12px,transparent 12px 25px) 50% var(--eind)/3px calc(100% - 2*var(--eind)) no-repeat,
linear-gradient(var(--b-inkt),var(--b-inkt)) 50% var(--eind)/26px calc(100% - 2*var(--eind)) no-repeat}
.b-route--js .b-route__stops{background:none}
.b-route__stop{position:relative;z-index:0;grid-column:1;counter-increment:b-stop;padding:.2rem 0 2rem}
.b-route__stop:nth-child(even){grid-column:3}
.b-route__stop:nth-child(1){grid-row:1/span 2}
.b-route__stop:nth-child(2){grid-row:2/span 2}
.b-route__stop:nth-child(3){grid-row:3/span 2}
.b-route__stop:nth-child(4){grid-row:4/span 2}
.b-route__stop:nth-child(5){grid-row:5/span 2}
.b-route__stop:nth-child(6){grid-row:6/span 2}
.b-route__stop::before{content:counter(b-stop);content:counter(b-stop) / "";position:absolute;z-index:1;top:0;
right:calc(-1*(var(--gang)/2 - var(--zwaai) + 1.25rem));width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%;
background:var(--b-signaal);color:var(--b-inkt);font:700 1rem/1 var(--font-kop);font-variant-numeric:tabular-nums;
box-shadow:0 0 0 4px var(--b-inkt);transition:transform .45s var(--b-ease)}
.b-route__stop:nth-child(even)::before{right:auto;left:calc(-1*(var(--gang)/2 - var(--zwaai) + 1.25rem))}
.b-route--js .b-route__stop:not(.is-langs)::before{background:var(--b-wit)}
.b-route__stop::after{content:"";position:absolute;z-index:-1;inset:-1rem -1.2rem .6rem;border-radius:var(--b-r-kaart);background:var(--b-roze);
opacity:0;transition:opacity .45s var(--b-ease)}
.b-grond--roze .b-route__stop::after{background:var(--b-wit)}
:is(.b-grond--donker,.b-grond--bordeaux) .b-route__stop::after{background:rgba(255,255,255,.07)}
.b-route__stop h3{margin:0 0 .45rem;font:600 clamp(1.15rem,1rem + calc(.5*var(--vw)),1.4rem)/1.25 var(--font-kop);letter-spacing:-.01em;color:inherit}
.b-route__stop p{margin:0 0 .55rem;color:var(--b-zacht);line-height:1.65;max-width:34rem}
.b-route__stop>:last-child{margin-bottom:0}
.b-route__stop ul{margin:.35rem 0 .55rem;padding:0;list-style:none;display:grid;gap:.4rem}
.b-route__stop ul li{position:relative;padding-left:1.25rem;color:var(--b-zacht);line-height:1.55}
.b-route__stop ul li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:2px;background:var(--b-signaal)}
.b-route__stop a{color:var(--b-bordeaux);font-weight:600;text-decoration:underline;text-underline-offset:3px}
:is(.b-grond--donker,.b-grond--bordeaux) .b-route__stop :is(p,ul li){color:rgba(255,255,255,.84)}
:is(.b-grond--donker,.b-grond--bordeaux) .b-route__stop a{color:#fff}
.b-route__stops::before,.b-route__stops::after{position:absolute;left:50%;display:flex;align-items:center;min-height:2.6rem;padding:.55rem 1.05rem .55rem 2.45rem;
border-radius:999px;font:700 .95rem/1 var(--font-kop);white-space:nowrap;transform:translateX(-50%);background-repeat:no-repeat;background-position:.85rem 50%;background-size:1.1rem}
.b-route__stops::before{content:"Van";content:"Van" / "";top:.4rem;background-color:var(--b-inkt);color:#fff;box-shadow:0 0 0 4px var(--b-grond,#fff);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.4 7-12a7 7 0 1 0-14 0c0 5.6 7 12 7 12z' fill='%23fff'/%3E%3Ccircle cx='12' cy='10' r='2.8' fill='%23FF5100'/%3E%3C/svg%3E")}
.b-route__stops::after{content:"Naar";content:"Naar" / "";bottom:.4rem;background-color:var(--b-signaal);color:var(--b-inkt);box-shadow:0 0 0 4px var(--b-grond,#fff);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 12 3l9 8v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z' fill='%230A0A0A'/%3E%3C/svg%3E")}
.b-route__weg{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.b-route__asfalt{fill:none;stroke:var(--b-inkt);stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.b-route__streep{fill:none;stroke:#fff;stroke-width:2.6;stroke-dasharray:12 13;stroke-linecap:butt}
:is(.b-grond--donker) .b-route__asfalt{stroke:#1a0307}
.b-route__wagen{display:block;width:clamp(10rem,calc(20*var(--vw)),14rem);height:auto;margin:.4rem auto 0;filter:drop-shadow(0 12px 12px rgba(10,10,10,.3))}
.b-route--js .b-route__baan .b-route__wagen{position:absolute;z-index:1;left:0;top:0;width:var(--wagen-b);margin:0;
transform-origin:50% 50%;will-change:transform}
@media (min-width:1000px){
.b-route--js .b-route__stops{grid-auto-rows:minmax(7rem,auto);padding-top:calc(4rem + var(--wagen-b)*.631);
padding-bottom:calc(3.75rem + var(--wagen-b)*.631)}
}
.b-route .b-knoppen{margin-top:2rem}
@media (hover:hover){
.b-route__stop:hover::before{transform:scale(1.14)}
.b-route__stop:hover::after{opacity:1}
}
.b-route__stop:focus-within::before{transform:scale(1.14)}
.b-route__stop:focus-within::after{opacity:1}
@media (max-width:999px){
.b-route__stops{--gang:4.3rem;grid-template-columns:var(--gang) minmax(0,1fr);padding:4.1rem 0 4.3rem;
background-position:calc(2.1rem - 1.5px) var(--eind),calc(2.1rem - 9px) var(--eind);background-size:3px calc(100% - 2*var(--eind)),18px calc(100% - 2*var(--eind))}
.b-route__stop,.b-route__stop:nth-child(n){grid-column:2;grid-row:auto;padding:.25rem 0 2rem}
.b-route__stop::before,.b-route__stop:nth-child(n)::before{right:auto;left:calc(-1*var(--gang) + 2.1rem - 1.15rem + var(--zwaai));width:2.3rem;height:2.3rem;font-size:.92rem}
.b-route__stop:nth-child(even)::before{left:calc(-1*var(--gang) + 2.1rem - 1.15rem - var(--zwaai))}
.b-route__asfalt{stroke-width:18}
.b-route__streep{stroke-width:2;stroke-dasharray:9 10}
.b-route__stop::after{inset:-.8rem -.7rem .7rem -.7rem}
.b-route__stops::before,.b-route__stops::after{left:0;transform:none;padding-left:3.05rem;background-position:1.55rem 50%}
.b-route--js .b-route__baan .b-route__wagen{position:relative;z-index:3;display:block;width:min(13rem,62%);margin:-2.6rem 0 0 auto;transform:none!important}
}
@media (prefers-reduced-motion:reduce){
.b-route__stop:hover::before,.b-route__stop:focus-within::before{transform:none}
}
@media print{
.b-route__weg,.b-route__wagen{display:none}
}