#hero .bg-tint {
    --tint-opacity: 0.85;
    background: #0e130c;
    mix-blend-mode: normal;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

#statistik .quick-data-col {
    --color-2023: var(--accent-color);
    --color-total: #375d38;
}

#statistik .quick-data-col .quick-data-meta {
    flex-wrap: wrap;
}

#statistik .quick-data-col .legend > span {
    display: flex;
    align-items: center;
}


#statistik .quick-data-col .legend > span::after {
    content: '';
    margin-left: 0.5em;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    display: inline-block;
}

#statistik .quick-data-col #legend-2023::after {
    background-color: var(--color-2023);
}

#statistik .quick-data-col #legend-total::after {
    background-color: var(--color-total);
}

#statistik .quick-data-wrapper {
    gap: 15px;
}

#statistik .quick-data {
    display: grid;
    row-gap: 8px;
}

#statistik .quick-data .quick-data-bars {
    height: 10px;
    width: 100%;
    position: relative;
}

#statistik .quick-data .quick-data-bars > .value-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 4px 0 4px -1px rgb(0,0,0,0.2);
}

#statistik .triggered .quick-data .quick-data-bars > .value-bar {
    animation: slide-in-bars var(--cubic-bezier) 1s forwards;
}

#statistik .quick-data .quick-data-bars > .value-bar.value-total-bar {
    background-color: var(--color-total);
    animation-delay: calc(0.5s + 0.1s * var(--order));
}

#statistik .quick-data .quick-data-bars > .value-bar.value-2023-bar {
    background-color: var(--color-2023);
    animation-delay: calc(0.8s + 0.1s * var(--order));
}

@keyframes slide-in-bars {
    from {
        width: 0;
    }
    
    to {
        width: calc(100% * var(--bar-value));
    }
}

@media screen and (max-width: 999px) {
    #statistik > .container {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 1000px) {
    #statistik .quick-data {
        grid-template-columns: 2fr 3fr;
        column-gap: 10px;
        row-gap: 5px;
    }
    
    #statistik .quick-data .quick-data-bars {
        grid-column: span 2;
    }
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

#referens .products-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media screen and (max-width: 999px) {
    #referens > .container {
        grid-template-columns: 1fr !important
    }
}

@media screen and (max-width: 749px) {
    #referens .products-wrapper {
        grid-template-columns: 1fr !important; 
    }
    
    #referens .quote > div:last-child {
        display: flex;
        justify-content: center;
    }
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

#priskalkylatorn {
    border-bottom: solid 5px var(--white-color);
    border-top: solid 5px var(--white-color);
    filter: saturate(1.75);
    box-shadow: 0 0 10px 0px rgb(0 0 0 / 2%);
    z-index: 2;
}

@media screen and (max-width: 749px) {
    #priskalkylatorn > .container {
        gap: 20px;
    }
    
    #priskalkylatorn .section-title-wrapper {
        justify-content: center !important;
    }
    
    #priskalkylatorn .section-title-wrapper > * {
        text-align: center;
    }
}