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

    :root {
        --unit-feinregler: 26px;
        --unit: calc(var(--unit-feinregler) / 10);

        --quadrat: calc(var(--unit) * 9);
        --unit-margin: calc(var(--unit) * 1);
        --unit-padding: calc(var(--unit) * 0);
    }


    body {
       
    }

    /*#header {*/
    /*    z-index: 100;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    height: calc(var(--quadrat) * 2);*/
    /*    !*height: calc(var(--quadrat) * 2 + var(--unit) * 2);*!*/
    /*}*/
    /*.logo {*/
    /*    position: relative;*/
    /*    top: calc(var(--unit) * 0);*/
    /*    left: calc(var(--unit) * 2);*/
    /*    right: calc(var(--unit) * 2);*/
    /*    !*padding-top: calc((var(--unit) * 1));*!*/
    /*    !*height: calc(var(--quadrat) * 2);*!*/
    /*    width: 100%;*/
    /*}*/
    #header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--quadrat) * 2 + var(--unit));
        padding-top: 0;
        /*display: grid;*/
        /*grid-template-columns: 2fr 1fr;*/
        /*padding-left: var(--unit-padding);*/
        z-index: 10;
        background-color: white;
    }

    .logo {
        color: black;
        font-size: var(--font-size-7);
        line-height: 90%;
        font-weight: 600;
        padding-top: calc(var(--unit) * 2);
        padding-left: calc(var(--unit) * 2);

    }


    .menu-btn {
        color: black;
        display: block;
        text-transform: uppercase;
        font-size: calc(var(--quadrat) * 0.8);
        font-weight: 400;
        line-height: calc(var(--quadrat) * 1);
        letter-spacing: 0.5px;
        text-decoration: none;
        width: 100%;
        padding-top: calc(var(--unit) * 1);
        padding-left: calc(var(--unit) * 2);
        color: red;
        cursor: pointer;
        /*border-top: 1px solid red;*/
    }

    /*.localeSwitch {*/
    /*    position: fixed;*/
    /*    top: 6px;*/
    /*    right: 6px;*/
    /*    display: block;*/
    /*    text-transform: uppercase;*/
    /*    color: red;*/
    /*}*/
    .localeSwitch {
        /*display: block;*/
        position: fixed;
        left: 78%;
        /*right: calc(var(--unit) * 2);*/
        font-size: calc(var(--quadrat) * 0.8);
        font-weight: 400;
        line-height: calc(var(--quadrat) * 1);
        letter-spacing: 0.5px;
        text-decoration: none;
        padding-top: calc(var(--unit) * 1);
        color: red;
    }


    #nav-icon {
        color: black;
        /*display: grid;*/
        /*grid-template-rows: repeat(7, 1fr);*/
        position: fixed;
        top: calc(var(--unit) * 2);
        /*right: calc(var(--unit) * 2);*/
        left: 50%;
        z-index: 100;
    }

    /*    container für mobile navigation */
    #nav-container {
        position: absolute;
        top: calc(var(--quadrat) * 3);
        left: calc(var(--unit) * 2);
        right: 0%;
        /*right: calc(var(--unit) * 2);*/

        /*        top: calc(var(--quadrat) * 2);*/
        display: block;

        z-index: 100;
        transition: top 0.5s;

        /* Transition effect when sliding down (and up) */

    }

    nav {
        position: absolute;
        display: block;
        right: 0;
        /*width: 50%;*/
        /*        left: 50%;*/
        top: 0px;
        /*        width: calc(100% - (--var;*/
        z-index: 500;
        /*        margin: 0 calc(var(--unit) * 2) 0 calc(var(--unit) * 2);*/
    

    }

    .nav-1 {
        position: absolute;
        top: calc(var(--quadrat) * 0);
        height: calc(var(--quadrat) * 1);
    }

    .nav-2 {
        position: absolute;
        top: calc(var(--quadrat) * 1);
        height: calc(var(--quadrat) * 1);
    }

    .nav-3 {
        position: absolute;
        top: calc(var(--quadrat) * 2);
        height: calc(var(--quadrat) * 1);
    }

    .nav-4 {
        position: absolute;
        top: calc(var(--quadrat) * 3);
        height: calc(var(--quadrat) * 1);
    }

    .nav-5 {
        position: absolute;
        top: calc(var(--quadrat) * 4);
        height: calc(var(--quadrat) * 1);
    }

    .nav-6 {
        position: absolute;
        top: calc(var(--quadrat) * 5);
        height: calc(var(--quadrat) * 1);
    }

    .nav-7 {
        position: absolute;
        top: calc(var(--quadrat) * 6);
        height: calc(var(--quadrat) * 1);
    }

    .nav-1 .nav-2 .nav-3 .nav-4 .nav-5 .nav-6 .nav-7 {
        
    }

    .off {
        right: 0;
        width: 50%;
        border-top: 1px solid red;
        color: red;
        background-color: white;
        
    }

    .on {
        right: 0;
        width: 50%;
        border-top: 1px solid red;
        background-color: white;
    }

    .on-notext {
        display: none;
    }

  /*  

    .off {
        right: 0;
        width: 50%;
        border-top: 1px solid red;
        color: red;
        
    }

    .on {
        display: none;
        right: 0;
        width: 100%;
    }
*/


    /*
    nav a {
	display: table;
	vertical-align: top;
	text-transform: uppercase;
	font-size: var(--font-size-1);
    font-weight: 400;
    line-height: calc(var(--quadrat) * 1.1);
	letter-spacing: 0.5px;
	color: black;
	text-decoration: none;
	width: calc(var(--quadrat)*10);
	padding-left: 3px;
}
*/
    nav a,
    .inner-grid-container .a-nav {
        height: calc(var(--quadrat) * 1);
        padding-left: calc(var(--unit) * 0);

    }


    .outer-grid-container {
        position: relative;
        grid-template-columns: 1fr;
        overflow: initial;
        height: initial;
    }


    .inner-grid-container {
        display: block;
        height: initial;
        /*damit die cat-col-titel auf dem Mobil sticky sind:*/
        overflow: initial;
        /*overflow-x: clip;*/
    }


    .cat-col-titel {
        /*display: block;*/
        position: sticky;
        top: calc(var(--quadrat) * 2 - var(--unit));
        right: 0;
        width: 100%;
        float: none;
        z-index: 11;

        min-width: inherit;
        height: var(--quadrat);
        padding-bottom: calc(var(--quadrat) * 1);
    }


    .cat-column {
        min-width: calc(var(--unit) * 1);
    }

    .scroll-container {
        display: block;
        width: 100%;
        min-width: inherit;
    }

    .scroll-content {
        display: block;
        width: 100%;
        overflow: hidden;
        padding-right: 0;
        box-sizing: border-box;
    }

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

    .article {
    }


    .article-item {
    }


    .pic {
        padding-top: 0;
    }

    .mobil-color {
        filter: grayscale(0%);
    }

    .mob-half {
        width: 50%;
    }


    .list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-bottom: 0px;
    }


    /*    positionen:*/
    /*Auf dem Mobil den ganzen inhalt zeigen: */
    .ay1,
    .ay2,
    .ay3,
    .ay4,
    .ay5,
    .ay6,
    .ay7 {
        height: max-content;
    }

    /*x1 - x7 sind nicht verwendet: */
    .x1 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .y7 {
        grid-row-start: 7;
        grid-row-end: 8;
        z-index: +7;
    }


    .y6 {
        grid-row-start: 6;
        grid-row-end: 8;
        z-index: +6;
    }


    .y5 {
        grid-row-start: 5;
        grid-row-end: 8;
        z-index: +5;
    }


    .y4 {
        grid-row-start: 4;
        grid-row-end: 8;
        z-index: +4;
    }

    .y3 {
        grid-row-start: 3;
        grid-row-end: 8;
        z-index: +3;
    }


    .y2 {
        grid-row-start: 2;
        grid-row-end: 8;
        z-index: +2;
    }

    .y1 {
        grid-row-start: 1;
        grid-row-end: 8;
        z-index: +1;
    }

    .x7 {
        grid-column-start: 2;
        grid-column-end: 3;

    }


    .x1,
    .x2,
    .x3,
    .x4,
    .x5,
    .x6,
    .x6,
    .x7 {
    }


    .my1 {
        position: relative;
        top: calc(var(--quadrat) * 2);

    }

    .my2 {
        position: relative;
        top: calc(var(--quadrat) * 3);

    }


    .my3 {
        position: relative;
        top: calc(var(--quadrat) * 4);

    }

    .my4 {
        position: relative;
        top: calc(var(--quadrat) * 5);

    }

    .my5 {
        position: relative;
        top: calc(var(--quadrat) * 6);

    }


    .my6 {
        position: relative;
        top: calc(var(--quadrat) * 7);

    }

    .my7 {
        position: relative;
        top: calc(var(--quadrat) * 8);

    }

    .y-span1 {
        height: calc(var(--quadrat) * 1);
    }

    .y-span2 {
        height: calc(var(--quadrat) * 2);
    }

    .y-span3 {
        height: calc(var(--quadrat) * 3);
    }

    .y-span4 {
        height: calc(var(--quadrat) * 4);
    }

    .y-span5 {
        height: calc(var(--quadrat) * 5);
    }

    .y-span6 {
        height: calc(var(--quadrat) * 6);
    }

    .y-span7 {
        height: calc(var(--quadrat) * 7);
    }


    .bildspalte {
        display: none;
        top: calc(var(--quadrat) * 2);
    }

    /* The Overlay (background) */
    .overlay {
        /* Height & width depends on how you want to reveal the overlay (see JS below) */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        left: 0;
        bottom: 0;
        right: 0;
        height: 0;
        background-color: rgb(255, 255, 255); /* Black fallback color */
        /*background-color: rgba(255,255,255, 0.9); !* Black w/opacity *!*/
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }

    /* Position the content inside the overlay */
    .overlay-content {
        position: absolute;
        top: calc(var(--quadrat) * 2);
        left: calc(var(--unit) * 1);
        width: 100%; /* 100% width */
        text-align: left; /* Centered text/links */
        margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
        width: 100%;
        font-size: var(--font-size-7);
        line-height: var(--zab-7);
    }


    footer {
        height: calc(var(--quadrat) * 2);
        padding-top: calc(var(--unit) * 2);
    }

    .footer-line {
        font-size: var(--font-size-6);

    }

    .two-cols {
        display: block;
    }

    .bandcamp-quadrat {
        /* height: calc(var(--block) * 5); */
        width: calc(100vw - var(--unit-margin) * 4);
    }

    .youtube-voll-breit {
        display: flex;
        width: 100%;
        height: auto;
        min-width: calc(var(--quadrat) * 2);
        filter: grayscale(100%);
        min-height: calc(var(--quadrat) * 2);
    
        mix-blend-mode: multiply;
    }


   

}