/* Balance Art Timmendorfer Strand Formatierungen Smartphones */
 

.linie {
    width: 40px;
    height: 4px;
    background-color: #24DED1;
    border-radius: 4px;
    position: absolute;
}

.einsham {top: 16px;}
.zweiham {top: 32px;}
.dreiham {top: 48px;}

.rahmen {
    width: 60px;
    height: 70px;
    padding-right: 10px;
    padding-left: 10px;
    background: #FFFFFF;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    margin: 40px;
}

#click {display: none;}

p {display: none; font-size: 1.5em; background: white; margin: 0;}

#click:checked~p {display: block;}

#click:checked~label .einsham {transform: rotate(-45deg); top: 40px; transition: transform 1.5s;}
#click:checked~label .zweiham {opacity: 0;}
#click:checked~label .dreiham {transform: rotate(45deg); top: 40px; transition: transform 1.5s;}

@media (max-width:800px) {
    .linie {
        width: 40px;
        height: 3px;
        border-radius: 3px;
    }

    .rahmen {
        width: initial;
        height: 60px;
        padding: 0 7.5px;
        border-radius: 0;
        margin: 0;
    }

    .einsham {top: 12px;}
    .zweiham {top: 24px;}
    .dreiham {top: 36px;}

    #click:checked~label .einsham {top: 30px;}
    #click:checked~label .dreiham {top: 30px;}