/**
 * Theme Name: Kadence Child
 * Template:   kadence
 */


/* Badge */
.circle {
    position: fixed;
    z-index: 9999;
    right: 50px;
    bottom: 220px;
    /* animation: rotateClockwise 10s linear infinite; */
}
.circle .gb-container-link {
    z-index: 200;
}
.circle-arrow {
    width: 65px;
    height: 65px;
    border-radius: 50px;
    background-color: #1a202c;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(0deg);
    transition: all .2s ease-in-out;
    z-index: 60;
    position: absolute;
}
.circle-button .circle-button-text {
    animation: rotateClockwise 10s linear infinite;
    z-index: 100;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
}
.circle-arrow path {
    fill: #e8f2ff;
}
.circle > div {
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle:hover .circle-arrow {
    background-color: #e8f2ff;
}
.circle:hover .circle-arrow path {
    fill: #1a202c;
}
.circle-arrow {
    z-index: 150;
}
.circle-button svg {
    height: 110px;
    width: 110px;
}
/* Schnellere Drehung gegen den Uhrzeigersinn bei Hover */
.circle:hover .circle-button-text {
    animation: rotateCounterClockwise 1s linear infinite;
}
div#circle-link {
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 200;
}
div#circle-link .wp-block-button {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    opacity: 0;
}
/* Keyframes für die Drehungen */
@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCounterClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-180deg);
    }
}