body {
    background-color: lightblue;
}


/* Blockiert den Rechtsklick-Effekt beim Touch auf mobile devices */

img {
    -webkit-touch-callout: none !important;
}

html * {
    font-family: "Source Sans Pro", sans-serif;
}

p {
    font-family: "Source Sans Pro", sans-serif;
}

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 2vw;
    /* border: 1px solid red; */
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

@media (orientation: landscape) {
    /* Navigations-Bar*/
    .main-header {
        z-index: 1;
        width: 100%;
        height: 7vh;
        background-color: #00695c;
        padding: 0 1.5rem;
        display: flex;
        align-items: center;
    }
    .main-header__nav {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .main-header__item-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }
    .main-header__item {
        margin: 0 1rem;
        padding: 0;
        font-size: 1.25rem;
    }
    .people {
        margin-right: 0.5rem;
    }
    .main-header__item a,
    .main-header__item button {
        font: inherit;
        font-size: 1.5vw;
        background: transparent;
        border: none;
        text-decoration: none;
        color: white;
        cursor: pointer;
    }
    .main-header__item a:hover,
    .main-header__item a:active,
    .main-header__item a.active,
    .main-header__item button:hover,
    .main-header__item button:active {
        color: #ffeb3b;
    }
    /* für Dropdown */
    .slide {
        margin: 0.5vw;
        margin-left: 1.2vw;
        margin-top: 1vh;
        /* border: 1px solid black; */
        background: #0da593;
        color: white;
        width: auto;
        height: 0;
        overflow: hidden;
        position: absolute;
        z-index: 109;
    }
    .dropdown_item {
        margin-top: 1vh;
        z-index: 1000;
    }
    #touch:checked+.slide,
    #touch:checked+label+.slide {
        height: auto;
    }
    #touch1:checked+.slide,
    #touch1:checked+label+.slide {
        height: auto;
    }
    #touch2:checked+.slide,
    #touch2:checked+label+.slide {
        height: auto;
    }
    #touch3:checked+.slide,
    #touch3:checked+label+.slide {
        height: auto;
    }
    #touch4:checked+.slide,
    #touch4:checked+label+.slide {
        height: auto;
        z-index: 1000;
    }
    #touch5:checked+.slide,
    #touch5:checked+label+.slide {
        height: auto;
        z-index: 1000;
    }
    #touch6:checked+.slide,
    #touch6:checked+label+.slide {
        height: auto;
        z-index: 1000;
    }
}

@media (orientation: portrait) {
    /* Navigations-Bar*/
    .main-header {
        z-index: 1;
        width: 100vw;
        height: 3.5vh;
        background-color: #00695c;
        padding: 0 1.5vw;
        display: flex;
        align-items: center;
    }
    .main-header__nav {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .main-header__item-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }
    .main-header__item {
        margin: 0 1vw;
        padding: 0;
        font-size: 2vw;
    }
    .people {
        margin-right: 0.5rem;
    }
    .main-header__item a,
    .main-header__item button {
        font: inherit;
        font-size: 2vw;
        background: transparent;
        border: none;
        text-decoration: none;
        color: white;
        cursor: pointer;
    }
    .main-header__item a:hover,
    .main-header__item a:active,
    .main-header__item a.active,
    .main-header__item button:hover,
    .main-header__item button:active {
        color: #ffeb3b;
    }
    /* für Dropdown */
    .slide {
        margin: 0.5vw;
        margin-left: 1.2vw;
        margin-top: 1vh;
        /* border: 1px solid black; */
        background: #0da593;
        color: white;
        width: auto;
        height: 0;
        overflow: hidden;
        position: absolute;
        z-index: 9;
    }
    .dropdown_item {
        margin-top: 1vh;
        z-index: 10;
    }
    #touch:checked+.slide,
    #touch:checked+label+.slide {
        height: auto;
    }
    #touch1:checked+.slide,
    #touch1:checked+label+.slide {
        height: auto;
    }
    #touch2:checked+.slide,
    #touch2:checked+label+.slide {
        height: auto;
    }
    #touch3:checked+.slide,
    #touch3:checked+label+.slide {
        height: auto;
    }
    #touch4:checked+.slide,
    #touch4:checked+label+.slide {
        height: auto;
    }
    #touch5:checked+.slide,
    #touch5:checked+label+.slide {
        height: auto;
    }
    #touch6:checked+.slide,
    #touch6:checked+label+.slide {
        height: auto;
    }
}