.shake-animation, .shake-tear {
    animation: shake 1s ease-in-out forwards;
    transform-origin: center 1cm; /* Anpassung basierend auf der tatsächlichen Position des Lochs */
}

.shake-animation {
    animation: shake 1s ease-in-out forwards;
}

/*@keyframes shake {*/
/*    10%, 90% {*/
/*        transform: translate3d(-2px, 0, 0);*/
/*    }*/

/*    20%, 80% {*/
/*        transform: translate3d(2px, 0, 0);*/
/*    }*/

/*    30%, 50%, 70% {*/
/*        transform: translate3d(-2px, 0, 0);*/
/*    }*/

/*    40%, 60% {*/
/*        transform: translate3d(2px, 0, 0);*/
/*    }*/
/*}*/


@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-10px, 0) rotate(-2deg);
    }
    20% {
        transform: translate(10px, 0) rotate(2deg);
    }
    30% {
        transform: translate(-7px, 0) rotate(-1.5deg);
    }
    40% {
        transform: translate(7px, 0) rotate(1.5deg);
    }
    50% {
        transform: translate(-4px, 0) rotate(-1deg);
    }
    60% {
        transform: translate(4px, 0) rotate(1deg);
    }
    70% {
        transform: translate(-1px, 0) rotate(-0.6deg);
    }
    80% {
        transform: translate(1px, 0) rotate(0.6deg);
    }
    90% {
        transform: translate(-0.1px, 0) rotate(-0.1deg);
    }
    99% {
        transform: translate(0.1px, 0) rotate(0.1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0);
    }
}

@keyframes shake-tear {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(-4deg);
    }
    20% {
        transform: rotate(4deg);
    }
    30% {
        transform: rotate(-3deg);
    }
    40% {
        transform: rotate(3deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    60% {
        transform: rotate(2deg);
    }
    70% {
        transform: rotate(-1deg);
    }
    80% {
        transform: rotate(1deg);
    }
    90% {
        transform: rotate(-0.1deg);
    }
    99% {
        transform: rotate(0.1deg);
    }
    100% {
        transform: rotate(0);
    }
}

@keyframes shake-tear50 {
    0% {
        transform: rotate(-2deg);
    }
    20% {
        transform: rotate(2deg);
    }
    40% {
        transform: rotate(-1deg);
    }
    60% {
        transform: rotate(1deg);
    }
    80% {
        transform: rotate(-0.1deg);
    }
    90% {
        transform: rotate(0.1deg);
    }
    100% {
        transform: rotate(0);
    }
}