/* phone vertical view
    buttons above the wheel */
@media (max-width: 1050px) and (min-height: 800px) {
    #aufforderung-smartphone {
        display: none;
    }

    #scheibe {
        position: relative;
        width: 360px;
        height: 360px;
        top: 50px;
        left: 0px;
        background-color: white;
        border-radius: 190px;
        margin-bottom: 30vh;
    }

    #scheibeAussen {
        z-index: 1;
        width: 360px;
    }

    #scheibeInnen {
        z-index: 2;
        position: absolute;
        top: 9.3%;
        left: 10.7%;
        width: 285px;
    }

    #buttons {
        z-index: 3;
        position: relative;
        left: 25%;
        width: 250px;
    }

    .newBtn {
        background-color: #011119;
        opacity: 0.85;
        border-radius: 3px;
        font-family: "open_sans", monospace;
        color: #eff2f7;
        font-size: 1.2em;
        width: 1.8em;
        padding: 5px 8px 5px 8px;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 2px;
        border: solid #246685 1px;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }

    .newBtn:hover {
        opacity: 1;
        box-shadow: 0 0 0.25em gray;
        text-decoration: none;
    }

    #aufforderung {
        color: white;
        text-align: center;
        margin: auto;
        margin-bottom: 1em;
    }
}

/* phone horizontal view / larger desktop split view */
@media (max-height: 799px) and (max-width: 1050px) and (min-width: 731px) {
    #aufforderung-smartphone {
        display: none;
    }
    #scheibe {
        position: relative;
        width: 325px;
        height: 325px;
        top: -200px;
        left: 43%;
        background-color: rgba(255, 255, 255, 0.92);
        border-radius: 180px;
        margin-bottom: 30vh;
    }

    #scheibeAussen {
        z-index: 1;
        width: 325px;
    }

    #scheibeInnen {
        z-index: 2;
        position: absolute;
        top: 7.55%;
        left: 10.5%;
        width: 257px;
    }

    #buttons {
        z-index: 3;
        position: relative;
        left: 3%;
        width: 230px;
    }

    .newBtn {
        background-color: #011119;
        opacity: 0.85;
        border-radius: 3px;
        font-family: "open_sans", monospace;
        color: #eff2f7;
        font-size: 1.2em;
        width: 1.8em;
        padding: 5px 8px 5px 8px;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 2px;
        border: solid #246685 1px;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }

    .newBtn:hover {
        opacity: 1;
        box-shadow: 0 0 0.25em gray;
        text-decoration: none;
    }

    #aufforderung {
        color: white;
        text-align: center;
        margin: auto;
        margin-bottom: 1em;
    }
}

/* Smartphone Ansicht */
@media (max-height: 799px) and (max-width: 730px) {
    #aufforderung-smartphone {
        display: block;
    }
    #scheibe {
        position: relative;
        width: 360px;
        height: 360px;
        top: 60px;
        left: 0px;
        background-color: white;
        border-radius: 190px;
        margin-bottom: 30vh;
    }

    #scheibeAussen {
        z-index: 1;
        width: 360px;
    }

    #scheibeInnen {
        z-index: 2;
        position: absolute;
        top: 7.5%;
        left: 10.5%;
        width: 285px;
    }

    #buttons {
        display: none;
        z-index: 3;
        position: relative;
        left: 15%;
        width: 250px;
    }

    .newBtn {
        background-color: #011119;
        opacity: 0.85;
        border-radius: 3px;
        font-family: "open_sans", monospace;
        color: #eff2f7;
        font-size: 1.2em;
        width: 1.8em;
        padding: 5px 8px 5px 8px;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 2px;
        border: solid #246685 1px;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }

    .newBtn:hover {
        opacity: 1;
        box-shadow: 0 0 0.25em gray;
        text-decoration: none;
    }

    #aufforderung {
        color: white;
        text-align: center;
        margin: auto;
        margin-bottom: 1em;
        display: none;
    }
}

/* desktop version */
@media (min-width: 1050px) {
    #aufforderung-smartphone {
        display: none;
    }
    #scheibe {
        position: relative;
        width: 500px;
        height: 500px;
        top: -140px;
        left: 36%;
        background-color: white;
        border-radius: 290px;
        margin-bottom: 30vh;
    }

    #scheibeAussen {
        z-index: 1;
        width: 500px;
    }

    #scheibeInnen {
        z-index: 2;
        position: absolute;
        top: 8.3%;
        left: 11%;
        width: 390px;
    }

    #buttons {
        z-index: 3;
        position: relative;
        left: 15%;
        width: 250px;
    }

    .newBtn {
        background-color: #011119;
        opacity: 0.85;
        border-radius: 3px;
        font-family: "open_sans", monospace;
        color: #eff2f7;
        font-size: 1.2em;
        width: 1.8em;
        padding: 5px 8px 5px 8px;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 2px;
        border: solid #246685 1px;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }

    .newBtn:hover {
        opacity: 1;
        box-shadow: 0 0 0.25em gray;
        text-decoration: none;
    }

    #aufforderung {
        color: white;
        text-align: center;
        margin: auto;
        margin-bottom: 1em;
    }
}