/*SWITCHER*/
/**

<label class="switch">
    <input type="checkbox" />
    <span class="slider"></span>
</label>

*/
/* From Uiverse.io by BurgiSimon */
/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 4.5em;
    height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff3636;
    transition: 0.1s;
    transition-delay: 0.2s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 20px;
    left: 0.3em;
    bottom: 0.3em;
    background-color: white;
    transition-delay: 0.2s;
    transition: 0.1s;
}

.switch input:checked + .slider {
    transition-delay: 0.2s;
    background-color: #00c763;
}

.switch input:focus + .slider {
    transition-delay: 0.2s;
    box-shadow: 0 0 1px #00c763;
}

.switch input:checked + .slider:before {
    transform: translateX(2.5em);
    transition-delay: 0.2s;
    transition-duration: 0.1s;
}

/* Container mit Perspektive für 3D-Transformationen */
.switch {
    perspective: 1000px; /* Eine größere Perspektive vermindert die Verzerrung */
}

/* Anpassen der .slider:before-Definition für die 3D-Bewegung */
.slider:before {
    /* Deine bisherigen Stile, plus: */
    transform: translateX(0) rotateX(0);
    transition: transform 0.1s;
}

/* 3D-Animation für den Check-Zustand */
.switch input:checked + .slider:before {
    transform: translateX(2.5em) rotateX(-180deg); /* Eine volle Drehung */
}

/* Optional: Anpassung für den uncheck-Zustand für eine umgekehrte Drehung */
.switch input:not(:checked) + .slider:before {
    transform: translateX(0) rotateX(0);
    transition-delay: 0.2s;
}