@media screen and (min-width: 700px) {

    body {
        position: relative;
        top: 0;
    }

    /*weisse hintergünde auf home ausblenden*/
    .no-background {
        background-color: inherit;
    }


    /*mobil elemente ausblenden*/
    .m-header-container {
        display: none;
    }

    .m-open-menu-btn {
        display: none;
    }

    .m-close-menu-btn {
        display: none;
    }


    .dropdown-container {
        display: none;


    }

    #m-logo {
        display: none;
    }

    #m-byline {
        display: none;
    }

    #m-date {
        display: none;
    }

    #dNav {
        transform: translateX(-110%); /* Navigation ausblenden */
        transition: transform 0.3s ease-in-out;
    }

    #dNav.visible {
        transform: translateX(0); /* Navigation ausblenden */

    }

    #mNav {
        display: none;
    }

    .m-img-container-schopf {
        display: none;
    }


    /*desktop elemente*/
    .d-sticky-section {
        position: fixed;
        top: var(--unit-body-margin);
        z-index: 1;
        /*padding-left: var(--unit-body-margin);*/
    }

    .d-header-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        width: 100%;
    }

    .d-nav-container {
        position: relative;
        top: 0;
        display: flex;
        /*grid-template-columns: var(--square-36) repeat(5, 1fr);*/
        width: 100%;

    }

    #d-menu-icon {
        display: none;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        height: var(--square-36);
        width: var(--square-36);
    }

    #m-close-menu-btn {
        position: relative;
        top: 0;
        left: 0;
        height: var(--square-36);
        display: flex;
        justify-content: center;
        cursor: pointer;
        z-index: 200;
        border: var(--variable-border) solid white;
    }

    /* Desktop Overlay Nav  */
    .d-overlay-nav {
        /* Height & width depends on how you want to reveal the overlay (see JS below) */
        position: fixed; /* Stay in place */
        /*top:  calc(var(--variable-border) * 3);*/
        /*top: calc(var(--sticky-pos-1) + (var(--unit-body-margin)) + (2 * var(--variable-border)));*/
        top: var(--sticky-pos-1);
        right: var(--unit-body-margin);
        bottom: var(--unit-body-margin);
        height: 0;
        width: calc(100% - var(--unit-body-margin) * 2);
        z-index: 200; /* Sit on top */

        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.2s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }

    .d-overlay-nav-surface {
        position: relative;
        top: 0;

        background-color: rgb(255, 255, 255); /* White fallback color */
        background-color: rgba(255, 255, 255, 0.95); /* White w/opacity */
        height: calc(100% - var(--sticky-pos-1) * 1);
    }

    /* Position the content inside the overlay */
    .d-overlay-nav-content {
        position: relative;
        /* left: var(--square-36); */
        width: 50%;
        top: 0px;
        /*top: var(--sticky-pos-2);*/
    }

    /* The navigation links inside the overlay */
    .d-overlay-nav-content a, .dropdown-btn {
        text-decoration: none;
        text-align: left;
        /*display: block; !* Display block instead of inline *!*/
        transition: 0.3s; /* Transition effects on hover (color) */
    }

    /* When you mouse over the navigation links, change their color */
    .d-overlay-nav-content a:hover, .m-overlay-nav-content a:focus {
        color: red;
    }


    .dropdown-btn {
        cursor: pointer;
        display: block;


    }

    /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
    .dropdown-container {
        display: none;
        position: relative;
        top: 0;
        left: 0px;
        /*padding-left: var(--square-36);*/
        color: var(--variable-black);
        width: 100%;
        z-index: 5;
    }


    .dropdown-item {
    }


    .dropdown-container a {
        color: black;
        background-color: #e6e6e6;

    }

    /* Optional: Style the caret down icon */
    .fa-caret-down {
        float: right;
        padding-right: 8px;
    }

    /* Add an active class to the active dropdown button */
    .active {
        /*background-color: darkblue;*/
        color: white;
    }


    .news-item-1 {
        grid-column-start: 1;
        grid-row-start: 2;
        /*grid-area: 2 / 2 / 3 / 3;*/
    }

    .news-item-2 {
        grid-column-start: 3;
        grid-row-start: 3;
    }

    .news-item-3 {
        grid-column-start: 2;
        grid-row-start: 4;
    }

    .news-item-4 {
        /*grid-column-start: 2;*/
        /*grid-row-start: 5;*/
    }


    footer {
        position: relative;
        top: 0;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /*grid-template-rows: 50px;*/
        width: 100%;
        /*margin-top: 50px;*/
        /*padding-bottom: 50px;*/
        color: var(--variable-grey-dark);
    }


    /*Desktop Container Section*/
    .one-col-container {
        position: relative;
        left: var(--nav-col-width);
        width: calc(100% - var(--nav-col-width));
        display: grid;
        grid-template-columns: 1fr;

        max-width: 1400px;
        /*margin: auto;*/
        border: var(--variable-border);
    }


    .two-col-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 1100px;
        margin: auto;
        border: var(--variable-border);
    }

    .drei-zu-zwei {
        grid-template-columns: 3fr 2fr;
    }

    .d-img-container-schopf {
        width: 100%;
        height: calc(100vw / 2 * 4 / 6);
        max-height: 400px;
        /*damit das bild nicht mehr breiter wird sobald die maximale breite des main-containers erreicht ist*/
    }

    .img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


}

@media screen and (min-width: 1101px) {


    :root {
        --variable-colums-number: 4;
    }

    .main-container {
        margin: 0;
    }
}


@media screen and (min-width: 1401px) {


    :root {
        --variable-colums-number: 5;
    }

    .main-container {
        margin: 3%;
    }
}


@media only screen and (min-width: 701px) and (max-width: 1041px) {


    :root {
        --sticky-pos-1: calc(var(--zab-6) * 2 +
        var(--unit-padding-top-bottom) * 2 +
        var(--unit-body-margin) +
        var(--variable-border) * 2);


        --sticky-pos-2: calc(var(--zab-6) * 3 +
        var(--unit-padding-top-bottom) * 4 +
        var(--unit-body-margin) +
        var(--variable-border) * 5);


        --sticky-pos-3: calc(var(--zab-6) * 4 +
        var(--unit-padding-top-bottom) * 6 +
        var(--unit-body-margin) +
        var(--variable-border) * 7);


    }

}