/* Mobile */
@media only screen and (-webkit-min-device-pixel-ratio: 1.77) and (orientation:portrait) {
    * {
        -webkit-tap-highlight-color: transparent;
        word-wrap: break-word;       /* Alte Syntax für Umbruch */
        overflow-wrap: break-word;   /* Moderne Syntax für Umbruch */
        white-space: normal;          /* Zeilenumbruch erlauben */
    }
    html, body, main {
        width: 100%;
        height: 100%;
    }
    body {
        font-size: 2vh;
    }
    h1 {
        font-size: 2vh;
    }
    h2 {
        font-size: 1.5vh;
    }
    ::-webkit-scrollbar { width: 0; }
    #loginform {
        height: 30vh;
        width: 60vw;
    }
    .logininput {
        width: 57vw;
    }
    .loginbutton {
        display: block;
        margin-bottom: 1vh;
        width: 61vw;
    }
    #loginform > a {
        color: #000;
        font-size: 1vh;
    }
    #loginform > img {
        width: 8vh;
    }
    #content {
        position: absolute;
        display: block;
        width: 96vw;
        max-width: 96vw;
        left: 0px;
        right: 0px;
        bottom: var(--footer-height);
        top: var(--navi-button-height);
        padding-top: 2vh;
        padding-bottom: 4vh;
    }
    #naviButton {
        display: block;
        position: absolute;
        z-index: 99;
        left: 0;
        right: 0;
    }
    .button {
        font-size: 1.2vh;
        padding: 0.2vh 0.5vh;
    }
    nav {
        position: absolute;
        width: 100%;
        top: var(--navi-button-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        padding-bottom: 10vh;
        display: none;
        overflow-y: scroll !important; 
        overflow-x: hidden;
    }
    nav ul li {
       padding-left: 1vh;
       margin: 0;
       width: auto;
    }
    nav ul li ul li {
        padding-left: 10vw;
        margin: 0;
     }
    nav ul li a {
        font-size: 2vh;
        display: block;
        font-weight: bold;
        padding: 1vh;
    }
    nav ul li a i {
        margin-right: 4vw;
        width: 4vw;
        text-align: center;
    }
    #naviLogo {
        width: 16vw;
        margin: 0px auto;
        margin-bottom: 2vh;    
    }
    #quickSettings {
        font-size: 3vw;
    }
    .desc {
        font-size: 1.5vh; 
        padding: 1vh 0vh;
    }
    #toTopButton {
        right: 5vw;
    }
    #toTopButton i {
        padding: 3vw;
    }
    #footer {
        position: absolute;
        z-index: 98;
        height: var(--footer-height);
        line-height: var(--footer-height);
        bottom: 0px;
        left: 0;
        right: 0px;
        font-size: 1vh;
        text-align: center;
    }
    .grid3 {
        display: grid; 
        grid-template-columns: auto auto auto; 
        column-gap: 0vh;
        margin: 0px auto;
        text-align: center;
    }
    .grid5 {
        display: grid; 
        grid-template-columns: auto auto auto auto auto; 
        column-gap: 0vh;
    }
    #naviLogoLink {
        display: none;
    }
    #licenseInfo {
        padding: 0px;
        margin: 0px;
        font-size: 2vh;
        height: auto;
        color: #fff;
        text-align: left;
        padding: 1vh;
    }
    .sl-table {
        max-width: 100%;
        width: 100%;
    }
    .sl-table td, .sl-table th {
        font-size: 1.5vh;
        padding: 0.5vh;
        -webkit-tap-highlight-color: transparent;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    .pagination {
        width: 3vh;
        height: 3vh;
        line-height: 3vh;
        font-size: 2vh;
        color: #000 !important;
        display: inline-block;
    }
    #loading {
        top: var(--navi-button-height);
        left: 0;
        bottom: 0;
        right: 0;
    }
    .scorcardItem {
        font-size: 3vh;
        text-align: center;
        line-height: 3vw;
        width: 14vw;
        height: 14vw;
        border: 1px solid #c0c0c0;
        display: inline-block;
        border-radius: 0;
        margin: 0px;
    }
    .grid4, .grid3, .grid5, .grid12 {
        display: block;
        text-align: center;
        width: auto;
    }
    .grid3 > div, .grid4 > div, .grid5 > div, .grid12 > div {
        margin-bottom: 1vh;
    }
    .grid5-2 {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        margin: 0px;
        column-gap: 1vh;
        row-gap: 1vh;
        justify-content: center;
    }
    #customKeyBoard {
        position: fixed; 
        bottom: 0px; 
        right: 0px; 
        left: 0px; 
        background-color: rgba(0,0,0,0.95); 
        color: #fff; 
        height: 30vh; 
        z-index: 100; 
        text-align: center; 
        display: grid; 
        grid-template-columns: auto auto auto; 
        row-gap: 0.5vh; 
        column-gap: 0.5vh;
        align-content: center;
        padding: 1vh;
    }
    .ckbbutton {
        font-size: 2vh;
        padding: 2vh 1vh;
        font-weight: bold;
        border: 1px solid #fff;
        border-radius: 1vh;
    }
    .biggerbutton {
        width: 100%;
        padding: 1vh 1vh;
        font-size: 1.5vh;
        font-weight: bold;
    }
    .superVisAdminItem {
        margin: 0px auto;
        margin-bottom: 2vh;
    }
    .supervisionsPageTag {
        min-width: 70vw;
    }
    .sl-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        color: #444;
        margin-bottom: 0.3vh;
    }
    .sl-grid-2 {
        display: block;
    }
    .sl-grid-2-label {
        font-weight: bold;
        display: none;
    }
    .sl-grid-2-value {
        display: block;
        background-color: #fff;
        padding-bottom: 1vh;
        font-size: 1.6vh;
    }
    .sl-grid-2-value:before {
        font-size: 1.4vh;
        content: attr(data-label) "\A";
        white-space: pre-wrap;
        text-transform: uppercase;
        text-decoration-line: underline;
    }
    .mobileTableViewBlock {
        display: block !important;
        width: 100%;
    }
    .mobileTableViewHide {
        display: none !important;
    }
    input {
        box-sizing: border-box;
    }
    input[type="text"], input[type="email"], input[type="datetime-local"], input[type="submit"], input[type="date"], input[type="select"], select, option {
        width: 100%;
        padding: 1vh;
        font-size: 1.8vh;
    }
    input[type="submit"] {
        background-color: #000;
        background-color: var(--grey-tone);
        color: var(--nearly-white);
        font-weight: bold;
    }
    input[type="radio"], input[type="checkbox"] {
        transform: scale(1.5);
        margin: 0.5em;
    }
    .button {
        display: block;
        margin: 1vh 0vh;
    }
    .button a {
        font-size: 1.8vh;
        padding: 1vh;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.77) and (orientation:landscape) {
    #loginform {
        height: 60vh;
        width: 50vw;
        margin-top: 5vh;
    }
    .logininput {
        width: 48vw;
    }
    .loginbutton {
        display: block;
        width: 48vw;
    }
    #loginform > a {
        color: #000;
        font-size: 1vw;
    }
    #loginform > img {
        width: 8vw;
    }
    .sl-table td, .sl-table th {
        font-size: 1.5vh;
        word-wrap: break-word;
        padding: 0.5vh;
    }    
}