#initial-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 9999;
    font-family: sans-serif;
}

#initial-loader.hidden {
    display: none;
}

.spinner .spinner__container {
    align-items: center;
    display: inline-flex;
}

.spinner.spinner--alignment-horizontal.spinner--size-small .spinner__container {
    width: 4rem;
    height: 4rem;
    text-align: left;
}

.spinner .spinner__container .spinner__circle {
    animation: 2s linear 0s infinite normal none running rotate;
    z-index: 2;
    position: absolute;
    width: 4rem;
    height: 4rem;
}

.spinner .spinner__container .spinner__circle .path {
    animation: 1.5s ease-in-out 0s infinite normal none running dash;
    stroke: var(--telekom-color-primary-standard);
}

.spinner .spinner__container .spinner__circle-background {
    animation: 2s linear 0s infinite normal none running rotate;
    position: absolute;
    width: 4rem;
    height: 4rem;
}

.spinner .spinner__container .spinner__circle-background .path {
    stroke: var(--telekom-color-ui-subtle);
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}