body {
    background-color: #333333;
}

.header {
    display: flex;
    justify-content: center;
}

.logo {
    width: 160px;  
    margin: 1rem;
}
    
.lightbox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}  
  
.plate_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.lamb_body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.lamb, .plate {
    position: relative;
}

.lamb {
    width: 86%; 
    z-index: 2;
}

.plate {
    width: 80%; 
    z-index: 1;
}


.timerOff {
    padding: 1.5rem;
    display: flex;
    text-align: center;
    font-size: 1.2rem;
    justify-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: aliceblue;
}


.timerOn {
    padding: 1.5rem;
    display: flex;
    text-align: center;
    font-size: 1.2rem;
    justify-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: aliceblue;
}


/* .footer {
    display: flex;
    flex-direction:row;
    align-items: center; 
    padding: 0.5rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #b3b3b3;
    font-size: 0.76rem;
    flex-wrap: wrap; 
}


.logoGaenge {
    width: 21%; 
    
    color: #b3b3b3;
    flex: 0 0 auto; 
}

.rights {
    margin: 1rem;
    text-align: right; 
    flex: 1;
} */


.footer {
    display: flex;
    flex-direction: row;
    align-items: center;     /* vertikale Zentrierung */
    justify-content: space-between; /* verteilt Platz zwischen den Elementen */
    padding: 0.5rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #b3b3b3;
    font-size: 0.76rem;
    flex-wrap: nowrap;       /* verhindert Umbruch */
}

.logoGaenge {
    width: 60px; 
    
    color: #b3b3b3;
    flex: 0 0 auto; 
}

.rights {
    margin: 0;
    text-align: right;
    flex: 1;
}

@keyframes rotateAndScale {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(95.5deg) scale(0.9); 
    }
    50% {
        transform: rotate(183.5deg) scale(1.0); 
    }
    75% {
        transform: rotate(290.5deg) scale(0.9); 
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

#rotateGroup {
    transform-origin: 161px 161px;
    animation: rotateAndScale 12s linear infinite;
}