.vagsteg{--vs-nr:36px;--vs-bredd:22px;--vs-mitt:22px;--vs-in:64px;--vs-skata:72px;position:relative;container:vagsteg/inline-size}.vagsteg-lista{z-index:1;gap:var(--rytm-6);margin:0;padding:0;list-style:none;display:grid;position:relative}.vagsteg-stopp{min-width:0;padding-left:var(--vs-in);position:relative}.vagsteg-nr{z-index:2;left:calc(var(--vs-mitt) - var(--vs-nr) / 2);width:var(--vs-nr);height:var(--vs-nr);background:var(--k-yta);color:var(--f-text);box-shadow:inset 0 0 0 2px var(--f-text);font:800 15px/1 var(--font-display);transition:background-color var(--k-mellan) var(--k-kurva), color var(--k-mellan) var(--k-kurva), box-shadow var(--k-mellan) var(--k-kurva);border-radius:50%;place-items:center;display:grid;position:absolute;top:0}.vagsteg-text{align-content:start;gap:var(--rytm-2);padding-top:4px;display:grid}.landning .vagsteg-text :is(h3,p){margin:0}.landning .vagsteg-text h3{font-size:19px;line-height:1.25}.landning .vagsteg-text p{color:var(--f-text-2);font-size:15.5px;line-height:1.5}.vagsteg-text a{color:inherit}.vagsteg-vag{z-index:0;left:calc(var(--vs-mitt) - var(--vs-bredd) / 2);width:var(--vs-bredd);top:calc(var(--vs-nr) / 2);bottom:var(--rytm-5);position:absolute}.vagsteg-yta,.vagsteg-kord{border-radius:calc(var(--vs-bredd) / 2);position:absolute;inset:0}.vagsteg-v-vag .vagsteg-yta{background:var(--vag-asfalt);box-shadow:inset 3px 0 0 var(--vag-asfalt), inset 4.5px 0 0 var(--vag-kantlinje), inset -3px 0 0 var(--vag-asfalt), inset -4.5px 0 0 var(--vag-kantlinje)}.vagsteg-v-vag .vagsteg-yta:after{content:"";border-left:2px dashed var(--vag-mittlinje);position:absolute;top:6px;bottom:6px;left:calc(50% - 1px)}.vagsteg-v-vag .vagsteg-kord{transform-origin:top;transform:scaleY(var(--vs-f,0));background:var(--vag-asfalt);box-shadow:inset 3px 0 0 var(--vag-asfalt), inset 4.5px 0 0 var(--vag-kord), inset -3px 0 0 var(--vag-asfalt), inset -4.5px 0 0 var(--vag-kord);transition:transform .56s var(--k-kurva)}.vagsteg-v-vag .vagsteg-kord:after{content:"";background:var(--vag-kord);width:2px;position:absolute;top:0;bottom:0;left:calc(50% - 1px)}.vagsteg-v-vag .vagsteg-nr{box-shadow:inset 0 0 0 2px var(--f-text), 0 0 0 3px var(--k-yta)}.vagsteg-v-vag .vagsteg-stopp.aktiv .vagsteg-nr,.vagsteg-v-vag .vagsteg-stopp.klar .vagsteg-nr{background:var(--f-accent-yta);color:var(--f-accent-text);box-shadow:inset 0 0 0 2px var(--f-accent-yta), 0 0 0 3px var(--k-yta)}.vagsteg-v-falt{--vs-nr:32px;--vs-in:52px;--vs-mitt:16px}.vagsteg-v-falt .vagsteg-vag{display:none}.vagsteg-v-falt .vagsteg-stopp:not(:last-child):before{content:"";left:calc(var(--vs-mitt) - 1px);top:calc(var(--vs-nr) + 4px);bottom:calc(4px - var(--rytm-6));border-left:2px dashed var(--vag-falt);position:absolute}.vagsteg-v-falt .vagsteg-stopp:first-child .vagsteg-nr{background:var(--f-vald-yta);color:var(--f-vald-text);box-shadow:none}.vagsteg-med-skata .vagsteg-lista{padding-top:calc(var(--vs-skata) * .66)}.vagsteg-med-skata .vagsteg-vag{top:calc(var(--vs-skata) * .66 + var(--vs-nr) / 2)}.vagsteg-skata{z-index:3;left:calc(var(--vs-mitt) - var(--vs-skata) / 2);width:var(--vs-skata);height:var(--vs-skata);pointer-events:none;--kontur:#f6f3ea;transform:translate(calc(var(--vs-x,0px) + var(--vs-dx,0px)), calc(var(--vs-y,0px) + var(--vs-dy,0px)));transition:transform .62s var(--k-kurva);position:absolute;top:0}.vagsteg-skata .skata{width:100%;height:100%;display:block}.vagsteg-skata .skata svg{width:100%;height:100%;transition:rotate .24s var(--k-kurva)}.vagsteg-skata [data-del=vag]{display:none}.vagsteg-skata.kor .skata svg{rotate:-6deg}@container vagsteg (width>=860px){.vagsteg-lista,.vagsteg-vag,.vagsteg-skata{--vs-skata:92px}.vagsteg-lista{grid-template-columns:repeat(var(--vs-n), minmax(0, 1fr));gap:var(--rytm-5)}.vagsteg-stopp{padding:calc(var(--vs-nr) + var(--rytm-4)) 0 0}.vagsteg-nr{left:0}.vagsteg-vag{left:calc(var(--vs-nr) / 2);right:0;top:calc(var(--vs-nr) / 2 - var(--vs-bredd) / 2);width:auto;height:var(--vs-bredd);bottom:auto}.vagsteg-v-vag .vagsteg-yta{box-shadow:inset 0 3px 0 var(--vag-asfalt), inset 0 4.5px 0 var(--vag-kantlinje), inset 0 -3px 0 var(--vag-asfalt), inset 0 -4.5px 0 var(--vag-kantlinje)}.vagsteg-v-vag .vagsteg-yta:after{border-left:0;border-top:2px dashed var(--vag-mittlinje);inset:calc(50% - 1px) 10px auto}.vagsteg-v-vag .vagsteg-kord{transform-origin:0;transform:scaleX(var(--vs-f,0));box-shadow:inset 0 3px 0 var(--vag-asfalt), inset 0 4.5px 0 var(--vag-kord), inset 0 -3px 0 var(--vag-asfalt), inset 0 -4.5px 0 var(--vag-kord)}.vagsteg-v-vag .vagsteg-kord:after{width:auto;height:2px;inset:calc(50% - 1px) 0 auto}.vagsteg-v-falt .vagsteg-stopp:not(:last-child):before{display:none}.vagsteg-v-falt .vagsteg-stopp:not(:first-child):after{content:"";left:calc(-100% - var(--rytm-5) + var(--vs-nr) + 4px);right:calc(100% + 4px);top:calc(var(--vs-nr) / 2 - 1px);border-top:2px dashed var(--vag-falt);position:absolute}.vagsteg-med-skata .vagsteg-lista{padding-top:calc(var(--vs-skata) * .66)}.vagsteg-med-skata .vagsteg-vag{top:calc(var(--vs-skata) * .66 + var(--vs-nr) / 2 - var(--vs-bredd) / 2)}.vagsteg-skata{left:calc(var(--vs-nr) / 2 - var(--vs-skata) / 2);--vs-dx:calc(var(--vs-nr) / 2 + var(--vs-skata) * .16);--vs-dy:calc(var(--vs-nr) / 2 - var(--vs-skata) * .09)}}.js .avslojas .vagsteg-yta{transition:transform .9s var(--k-kurva);transform-origin:0 0}.js .avslojas:not(.syns) .vagsteg-yta{transform:scaleY(0)}@container vagsteg (width>=860px){.js .avslojas:not(.syns) .vagsteg-yta{transform:scaleX(0)}}.js .avslojas .vagsteg-nr{transition:opacity .32s var(--k-kurva) calc(.2s + var(--vs-i,0) * .12s), scale .32s var(--k-kurva) calc(.2s + var(--vs-i,0) * .12s), background-color var(--k-mellan) var(--k-kurva), color var(--k-mellan) var(--k-kurva), box-shadow var(--k-mellan) var(--k-kurva)}.js .avslojas:not(.syns) .vagsteg-nr{opacity:0;scale:.6}@media (prefers-reduced-motion:reduce){.vagsteg *,.vagsteg-skata{transition:none!important}.js .avslojas:not(.syns) .vagsteg-yta,.js .avslojas:not(.syns) .vagsteg-nr{opacity:1;transform:scale(1)}}