.scrolly-container{position:relative;margin:6em auto;}
.scrolly-graphic{width:100%;aspect-ratio:4 / 3;max-height:500px;position:sticky;top:20%;background-color:#ffffff;border:1px solid #e5e7eb;box-shadow:0 0 1em 0 rgba(0, 0, 0, 0.08);}
.scrolly-graphic{flex-basis:48%;top:2rem;height:90vh;align-self:flex-start;aspect-ratio:auto;border-radius:0.5rem;z-index:1;}
.scrolly-steps{position:relative;z-index:2;padding-bottom:60vh;}
#procedure-chart-container{width:100%;height:100%;padding:1rem;box-sizing:border-box;}
.scroll-step{padding:1.4em 2em 1em 2.4em;border-radius:0.5rem;margin-bottom:80vh;background-color:#f3f4f6;transition:background-color 0.3s ease;opacity:0.6;line-height:1.6;}
.scroll-step.is-active{background:var(--theme-ui-colors-secondary);color:var(--theme-ui-colors-white);opacity:1;}
.scroll-step h3{font-size:1.4em;margin:0 0 0.4em 0;}

#procedure-chart-container > *{position:absolute;top:0;left:0;width:100%;height:100%;padding:2em;box-sizing:border-box;transition:opacity 0.4s ease-in-out;}
#summary-view{display:flex;flex-direction:column;justify-content:center;align-items:center;}
#summary-view h3{font-size:1.2em;padding:0.4em 0.8em;text-align:center;background:var(--theme-ui-colors-main);color:var(--theme-ui-colors-white);border-radius:0.3em;}
#summary-view ul{list-style:none;padding:4em 0;margin-top:-5em;width:100%;}
#summary-view li{padding:0.5rem 0;border-bottom:1px solid #e5e7eb;}
#summary-view li:last-child{border-bottom:none;}
#summary-view .summary-phase{font-weight:600;display:block;margin-bottom:0.25rem;}
#summary-view .summary-text{line-height:1.5;}

.y-axis .domain,.y-axis .tick line{display:none;}
.y-axis .tick text{font-size:1.5em;font-weight:700;}
.bar-label{font-size:1em;font-weight:700;fill:#fff;}
.vacancy-label{font-size:1.4em;font-weight:700;}
.phase-group.phase-2CS .vacancy-label{font-size:1em;font-weight:700;}
.x-axis{display:none;}
.highlight-text{padding:0.2em 0.4em;margin:0 0.2em;font-weight:500;font-size:0.9em;line-height:1;white-space:nowrap;border-radius:0.2em;}
.vacancy-color{background:#eff2fa;color:#000;}
.taken-color{background:#36d989;color:#000;}
.oversub-color{background:#fd606b;}

@media (min-width:900px){
.scrolly-container{display:flex;justify-content:space-between;}
.scrolly-steps{flex-basis:48%;z-index:1;padding-bottom:0;}
.scroll-step{margin:50vh 0;}
}


@media (min-width:200px) and (max-width:768px){
.scrolly-graphic{box-shadow:none;border:none;}
#procedure-chart-container > *{padding:0;}
.scroll-step{padding:1.4em 1em 0.6em 1.4em;}
.vacancy-label{font-size:1em;}
}