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

    body {
        position: relative;
        top: 0;
    }

    :root {
        --unit-feinregler: 26px;
        /*--zab-9: calc(var(--unit) * 9);*/
        /*--font-size-9: calc(var(--unit) * 8);*/
        --unit-body-margin: calc(var(--unit) * 3);
        --unit-padding-top-bottom: calc(var(--unit) * 3);
        --variable-colums-number: 2;

        --zab-9: calc(var(--unit) * 8.0);

    }

    .d-top-background {
        height: 36px;
    }

    /*desktop elemente ausblenden*/
    .d-header-container {
        display: none;
    }

    .d-nav-container {
        display: none;
    }

    #d-menu-icon {
        display: none;
    }

    .d-overlay-nav {
        display: none;
    }

    .m-sticky-section {
        position: fixed;
        top: 0;
        display: none;
        width: 100%;
        background-color: hsl(0deg 0% 100% / 96%);
        height: 100vh;
        z-index: 100;
        left: 0;
    }

    .d-sticky-section {
        display: none;
    }


    #m-logo {
        position: sticky;
        font-size: var(--zab-7);
        top: var(--unit-body-margin);
        z-index: 10;
        letter-spacing: 2px;
    }

    .triage-container {
                width: calc(100vw - 24px);

    }


    .two-col-container {
        display: block;
    }


    .triage-element-1 {
        position: relative;
        height: 40vh;
        left: 0;
        /* background-color: aqua; */
    }

    .triage-element-2 {
        position: relative;
        height: 20vh;
        left: 0;
        /* background-color: aqua; */
    }

    .reading-text-lettre {

        padding-left: 8px;
    }


    .caption {
        line-height: var(--zab-6);
        font-size: var(--font-size-6);
        padding-left: 0;
    }

    #table001 {
        color: black;
        max-width: initial;
        width: 100%;
    }

    .m-nav-container {
        display: grid;
        grid-template-columns: 1fr var(--square-36);
    }


    .m-nav-item {
        display: flex;
    }

    #m-menu-icon {
        position: relative;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
    }


    .scroll-container {
        position: absolute;
        top: 0;
    }

    .key-image-container {
        position: relative;
        /*top: 30px;*/
        left: 0;
        width: 100%;


    }

    .logo-type-container {}


    .indent-1 {
        padding-left: calc(var(--font-size-8) * 0.75 * 1);
    }

    .indent-2 {
        padding-left: calc(var(--font-size-8) * 0.75 * 2);
    }


    .verlauf {
        position: absolute;
        top: calc(var(--unit)* 3);
        left: calc(var(--unit)* 3);
        right: calc(var(--unit)* 3);
        bottom: calc(var(--unit)* 3);
        background-image: linear-gradient(to bottom, #ffff00, rgba(246, 48, 4, 0.83), #00e1ff);
        z-index: -1;
    }


    .chapter-start {
        height: calc(var(--square-36) * 2);
    }

    .chapter-title {
        text-align: center;
        margin-left: auto;
    }


    .bildeinschub {
        grid-template-columns: 1fr 1fr;
    }

    .img-item {
        padding-right: 0;
    }

    .img-item-hoch {
        width: 100%;
        padding-right: 33%;
    }

    .landscape {
        width: 85%;
    }

    .portrait {
        width: 63.75%;
    }

    .portrait-two-cols {
        width: 42.5%;
    }


    .hidden-on-mobile {
        display: none;
    }


    .grid-container {
        display: grid;
        grid-template-columns: repeat(var(--variable-colums-number), 1fr);
        width: 100%;
    }

    .m-two-cols {
        display: grid;
        grid-gap: var(--unit-body-margin);
    }


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

    .poster-claim {
        line-height: var(--poster-claim-font-line-height-x-colums);
        font-size: var(--poster-claim-font-size-x-colums);
        width: 100%;
        height: 50%;
    }


    .poster-title {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .claim-and-date {
        grid-column-start: 2;
        grid-row-start: 1;
    }


    /* Mobil Overlay Nav  */
    .m-overlay-nav {
        /* Height & width depends on how you want to reveal the overlay (see JS below) */
        position: fixed;
        /* Stay in place */
        top: var(--unit-body-margin);
        right: var(--unit-body-margin);
        bottom: var(--unit-body-margin);
        height: 100%;
        width: 0;
        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) */
    }

    .m-overlay-nav-surface {
        position: relative;
        /*top: var(--sticky-pos-1);*/
        top: var(--square-36);

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

    /* Position the content inside the overlay */
    .m-overlay-nav-content {
        width: calc(100% - var(--square-36));
    }

    /* The navigation links inside the overlay */
    .m-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 */
    .m-overlay-nav-content a:hover,
    .m-overlay-nav-content a:focus {
        color: red;
    }


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

    /* Position the close button (top right corner) */
    .m-overlay-nav .close-icon {
        position: relative;
        top: 0;
        right: 0;
        z-index: 200;
        color: white;
        text-align: right;
    }

    .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;
        /*padding-left: var(--square-36);*/
        color: var(--variable-black);
    }


    .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;
    }

    /*rückblick section*/
    .slide-container .caption {
        font-size: var(--font-size-6);
        line-height: var(--zab-6);
    }


    .main-container {
        display: block;
        width: 100%;
        border: var(--variable-border);
        font-size: var(--font-size-6);
        line-height: var(--zab-7);
        padding: 0;
    }

    .four-col-container {
        display: block;
        width: 100%;

    }


    .three-col-container {
        display: block;
        width: 100%;

    }

    .logo-container {
        display: flex;
        justify-content: center;

    }


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

    }


    .m-header-container {
        position: fixed;
        top: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        background-color: white;
        width: 100%;
        height: fit-content;
        z-index: 99;
        padding: 0;
        float: left;
    }

    .m-open-menu-btn {}

    .m-close-menu-btn {
        position: fixed;
        top: 0;
        right: 0;
        background-color: white;
        width: 44px;
        height: 44px;
        z-index: 99;
        padding: 8px 14px;
        float: left;
        text-align: right;
    }

    nav {
        width: 100%;
        padding: calc(var(--unit-body-margin) * 1);
    }

    .nav-mobile {
        display: block;
    }

    .nav-list {
        display: block !important;
    }

    .nav-dropdown {
        position: relative;
    }

    nav ul li a,
    nav ul li a:visited {
        display: block;
        line-height: var(--zab-12);
        font-size: var(--zab-7);
        padding: 0 0px;
        color: black;
        text-decoration: none;
    }

    .key-text-container {

        z-index: 98;


        .key-text {
            line-height: var(--zab-8);
            font-size: var(--font-size-8);
            margin-block-end: var(--zab-8);
            max-width: 1500px;
        }

        .img-inline-text {
            display: block;
            position: relative;
        }


        .text-left-60 {
            padding-left: var(--square-36);
        }

        .img-item {
            width: 100%;
            height: auto;
            object-position: center;
        }


    }
}