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

    body {
        position: relative;
        top: 0;
    }

    :root {
        --unit-feinregler: 32px;
        /*--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;
        /*6 Zeilen auf die Höhe eines img-containers:*/
        --poster-font-line-height-x-colums: calc(99vw / var(--variable-colums-number) * 8 / 7 / 8);
        --poster-font-size-x-colums: calc(99vw / var(--variable-colums-number) / 5.5);

        --poster-claim-font-line-height-x-colums: calc(99vw / var(--variable-colums-number) * 8 / 7 / 14);
        --poster-claim-font-size-x-colums: calc(99vw / var(--variable-colums-number) / 11.2);

        --poster-artist-font-line-height-x-colums: calc(99vw / var(--variable-colums-number) * 8 / 7 / 12);
        --poster-artist-font-size-x-colums: calc(99vw / var(--variable-colums-number) / 8.5);

    }

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

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


    #m-logo {
        position: sticky;
        top: var(--unit-body-margin);
        z-index: 10;
    }

    .byline-date {
        position: relative;
        top: 0;
        display: block;
    }

    .m-sticky-section {
        position: sticky;
        top: var(--sticky-pos-1);
        z-index: 10;
    }


    .block-36 {
        display: block;
    }

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

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


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

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


    #infobar {
        display: block;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        line-height: var(--zab-7);
        font-size: var(--font-size-7);
    }

    .infobar-title {
        visibility: hidden;
    }

    .span-2 {

    }

    .abstand-festival {
  height: 0px;
  margin-top:-20px;
  display: block;
}


    .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);
        overflow: hidden;

    }

    .m-img-container {
        width: 100%;
        height: calc(var(--img-width-x-colums) * 8 / 7);
    }

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

    /*claim über 2 spalten*/
    /*.poster-claim {*/
    /*    line-height: calc(var(--poster-font-line-height-x-colums) * 2 / 3);*/
    /*    font-size: calc(var(--poster-font-size-x-colums) * 0.7);*/
    /*    width: 100%;*/
    /*    height: 50%;*/
    /*}*/
    .claim-and-date {
        width: 100%;
        height: calc(var(--img-width-x-colums) * 8 / 7);

        /*über 2 spalten*/
        /*grid-column-start: 1;*/
        /*grid-column-end: -1;*/
    }

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

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


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

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

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

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




    .circle {
        height: 100%;
    }


    /* 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;
      align-items: 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);
    }

    .pic-slide {
        display: flex;
        width: 100%;
        height: auto;
        max-height: initial;
        object-fit: cover;
    }


    /*Artist Section */
    .m-img-container-schopf {
        width: 100%;
        /*height: var(--height-3zu2);*/
        padding-bottom: var(--zab-5);
        display: block;
    }

    .minus-three-squares-height {
        display: none;
    }

    .artist-name {
        padding-left: 0px;

    }

    .event-main-container {
        width: 100%;
    }

    .event-time-and-type-balken {
        display: grid;
        grid-template-columns: 1fr 2fr;


    }

    .event-container {
        display: block;
        border: var(--variable-border);
        border-radius: var(--variable-border-radius);
    }


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

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


    }


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


    }

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

    }

    .logo-item {
        padding: 20px;

    }


    .map-main-container {
        display: block;
    }


    .event-container {
        margin-bottom: calc(var(--square-36) * 2);
    }

    .event-time-and-type {
        color: var(--variable-grey-darkest);
    }

    .event-news {
        font-size: var(--font-size-6);
        color: var(--variable-hover-color);
    }

    .event-title {
        margin-top: var(--zab-7);
        font-size: var(--font-size-7);
        font-weight: 500;
    }
    .event-tech-info {
        margin-top: calc(var(--zab-7) * 1);
        /*margin-left: var(--zab-7);*/
    }


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

    }


}