#kaco {
    height: calc(100vh - 71px);
    width: 100%;
    display: flex;
    flex-direction: row;
}

#kalender, #kalenderdisplay {
    height: 100%;
    width: 50%;
}

#kalenderdisplay {
    padding: 20px;
    height: calc(100% - 40px);
    width: calc(50% - 40px);
    font-family: var(--normal-font), serif;
}

@media screen and (max-width: 850px) {
    #kaco {
        height: calc(100vh - 71px);
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #kalender, #kalenderdisplay {
        height: 50%;
        width: 100%;
    }

    #kalenderdisplay {
        padding: 20px;
        height: calc(50% - 40px);
        width: calc(100% - 40px);
        font-family: var(--normal-font), serif;
    }
}

@media screen and (pointer: coarse) and (orientation: portrait) {
    #kaco {
        height: calc(100vh - 71px);
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #kalender, #kalenderdisplay {
        height: 50%;
        width: 100%;
    }

    #kalenderdisplay {
        padding: 20px;
        height: calc(50% - 40px);
        width: calc(100% - 40px);
        font-family: var(--normal-font), serif;
    }
}