/* Responsive Style */

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


    /******************************************************************************************************************/
    /* Allgemeine Einstellungen */

    .body-mojo {
        font-size: 34px;
        /* Bezugspixelgröße für Einheit em: 32px für @media */
    }

    /******************************************************************************************************************/
    /* #region Grid-Container und Items für gesamtes Layout */

    .grid-layout {
        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-columns: min(0.5em) 1fr 1fr min(0.5em);
    }

    .grid-layout .nav {
        display: inline;
        grid-row: 1;
        grid-column: 2 / 4;
    }


    /* Ausgeblendet für 40 Jahre Jubiläum */
    
    .grid-layout .logo {
        grid-row: 2;
        grid-column: 2;
        background-image: none; /* Ausgeblendet für 40 Jahre Jubiläum */
        background-size: contain;
    }
        

    .grid-layout .jubileelogo {
        grid-row: 2;
        grid-column: 2;
        background-size: contain;
}

    .grid-layout .title {
        grid-row: 2;
        grid-column: 3;
    }

    .grid-layout .side-nav {
        grid-row: 3;
        grid-column: 2 / 4;
    }

    .grid-layout .content {
        grid-row: 4;
        grid-column: 2 / 4;
    }

    .grid-layout .footer {
        grid-row: 5;
        grid-column: 2 / 4;
    }

    /* #endregion */


    /******************************************************************************************************************/
    /* #region Navigation Header*/


    /* Es wird nur der Menü-Button angezeigt */
    .main-nav {
        position: fixed;
        /* positionieren */
        width: 300px;
        /* Breite der div-Box */
        margin-left: -150px;
        /* Damit der "Ausrichtungspunkt" in der Mitte der Box liegt */
        left: 50%;
        /* in die Mitte verschieben */
        padding: 0;
        transform: rotateZ(0);
    }

    .main-nav .icon {
        display: block;
        padding: 15px 50px 15px 50px;
        float: none;
        text-align: center;
        border-width: 0;
    }

    .main-nav a {
        display: none;
    }


    /* Navi wird ausgeklappt dargestellt */
    .main-nav-responsive {
        position: fixed;
        /* positionieren */
        width: 300px;
        /* Breite der div-Box */
        margin-left: -150px;
        /* Damit der "Ausrichtungspunkt" in der Mitte der Box liegt */
        left: 50%;
        /* in die Mitte verschieben */
        justify-content: center;
        transform: rotateZ(0);
    }

    .main-nav-responsive a {
        display: block;
        padding: 15px 50px 15px 50px;
        text-align: center;
        text-decoration: none;
        float: none;
        border-style: solid;
        border-width: 0 0 0.065em 0;
        border-radius: 5px;
        border-color: var(--nav-border-color);
        color: var(--mojo-orange);
        background-color: black;
        font-size: 1.7em;
        font-weight: 500;
        font-style: normal;
        transition: background-color 300ms linear;
    }

    .main-nav-responsive a:last-child {
        border-width: 0;
    }


    .main-nav-responsive a:hover {
        color: var(--mojo-blue);
        background-color: #505050;
    }

    .main-nav-responsive a#aktiv {
        color: var(--mojo-blue);
        background-color: #303030;
    }

    /* #endregion */


    /******************************************************************************************************************/
    /* #region Termine */

    .grid-dates {
        display: grid;
        grid-template-columns: auto auto;
    }

    .grid-dates hr,
    .grid-datesadmin hr,
    .grid-subscriber hr {
        grid-column: 1 / 3;
    }

    .grid-dates .display,
    .grid-datesadmin .display,
    .grid-subscriber .display {
        display: inline;
    }

    /* Termine bearbeiten als Admin*/
    .grid-datesadmin {
        display: grid;
        grid-template-columns: auto auto;
    }

    /* Tabelle Abonnenten*/
    .grid-subscriber {
        display: grid;
        grid-template-columns: auto auto;
    }

    /* #endregion */


    /******************************************************************************************************************/
    /* #region Band */

    .grid-band {
        grid-template-columns: repeat(auto-fill, minmax(480px, auto));
    }

    /* #endregion */


    /******************************************************************************************************************/
    /* #region Presse */

    .grid-media {
        grid-template-columns: auto;
    }

    /* #endregion */


    /******************************************************************************************************************/
    /* #region Zeitungsartikel */

    .grid-article {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .grid-article .row1 {
        grid-row: 1;
        grid-column: 1 / 3;
    }

    .grid-article .row2 {
        grid-row: 2;
        grid-column: 1;
    }

    .grid-article .column1 {
        grid-row: 3;
        grid-column: 1;
    }

    .grid-article .column2 {
        grid-row: 4;
        grid-column: 1;
    }

    .grid-article .column3 {
        grid-row: 5;
        grid-column: 1;
    }

    /* #endregion */


}

/* Ende @media screen */