.pl {
    width: 160px;
    /* Breite des Laders */
    height: 160px;
    /* Höhe des Laders */
    position: fixed;
    /* Fixiert den Lader relativ zum Viewport */
    top: 50%;
    /* Setzt die obere Position auf 50% des Viewports */
    left: 50%;
    /* Setzt die linke Position auf 50% des Viewports */
    transform: translate(-50%, -50%);
    /* Verschiebt das Element um -50% seiner eigenen Breite und Höhe von der Position, um es zu zentrieren */
    display: none;
    /* Das Element ist standardmäßig nicht sichtbar */
    z-index: 1000;
    /* Stellt sicher, dass der Lader über anderen Elementen liegt */
}

.pl__arrows,
.pl__ring-rotate,
.pl__ring-stroke,
.pl__tick {
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.pl__arrows {
    animation-name: arrows42;
    transform: rotate(45deg);
    transform-origin: 16px 52px;
}

.pl__ring-rotate,
.pl__ring-stroke {
    transform-origin: 80px 80px;
}

.pl__ring-rotate {
    animation-name: ringRotate42;
}

.pl__ring-stroke {
    animation-name: ringStroke42;
    transform: rotate(-45deg);
}

.pl__tick {
    animation-name: tick42;
}

.pl__tick:nth-child(2) {
    animation-delay: -1.75s;
}

.pl__tick:nth-child(3) {
    animation-delay: -1.5s;
}

.pl__tick:nth-child(4) {
    animation-delay: -1.25s;
}

.pl__tick:nth-child(5) {
    animation-delay: -1s;
}

.pl__tick:nth-child(6) {
    animation-delay: -0.75s;
}

.pl__tick:nth-child(7) {
    animation-delay: -0.5s;
}

.pl__tick:nth-child(8) {
    animation-delay: -0.25s;
}

/* Animations */
@keyframes arrows42 {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }
}

@keyframes ringRotate42 {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(720deg);
    }
}

@keyframes ringStroke42 {

    from,
    to {
        stroke-dashoffset: 452;
        transform: rotate(-45deg);
    }

    50% {
        stroke-dashoffset: 169.5;
        transform: rotate(-180deg);
    }
}

@keyframes tick42 {

    from,
    3%,
    47%,
    to {
        stroke-dashoffset: -12;
    }

    14%,
    36% {
        stroke-dashoffset: 0;
    }
}

@media only screen and (max-width: 767px) {
    .pl {
        top: 30%;
        /* Setzt die obere Position auf 30% des Viewports */
    }
}

@media only screen and (max-height: 550px) {

    /* CSS für den pl */
    .pl {
        top: 50%;
        left: 30%;
    }
}