/*------------------------Startseite------------------------------------------*/

/* Klasse des Bildes "Herzlich Willkommen" */

.startseite_titel_bild {
    height             : 150px;
    background-image   : url('../img/release/startseite/titel_bild_klein.jpg');
    background-repeat  : no-repeat;
    background-position: center;
}

/* startseite_grid_content */
.content {
    display: grid;
    gap    : 5px;
    grid-template-areas:
        "startseite_text_oben startseite_text_oben startseite_text_oben"
        "startseite_bilder_mittel startseite_bilder_mittel startseite_bilder_mittel"
        "startseite_text_unter startseite_text_unter startseite_text_unter"
        "oeffnung oeffnung oeffnung";
    width : auto;
    margin: 20px;
}

.startseite_text_oben {
    grid-area: startseite_text_oben;
}

.startseite_text_unter {
    grid-area: startseite_text_unter;
}

.startseite_bilder_mittel {
    display  : flex;
    grid-area: startseite_bilder_mittel;
}

.startseite_bilder_mittel>div {
    max-width : 100%;
    margin    : 10px;
    text-align: center;
}

/* oeffungungszeiten */
.oeffnung {
    grid-area   : oeffnung;
    padding-left: 10%;
}

/*------------------------Startseite Ende------------------------------------------*/
/* 
/*--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------*/
/*----------------------------- KONTAKT ------------------------------------*/


.kontakt_flex_container {
    display        : flex;
    display        : -webkit-flex;
    flex-direction : row-reverse;
    flex-wrap      : wrap;
    justify-content: space-between;
}

.kontakt_flex_textfeld {
    margin-right : 20px;
    margin       : 0 auto;
    padding      : 20px;
    border       : solid 1px #420105;
    border-radius: 8px;
    max-width    : 100%;
}


.kontakt_flex_bildfeld {
    margin-left : 20px;
    margin-right: 20px;
    margin-top  : 20px;
    margin      : 0 auto;
    max-width   : 400px;
    padding-top : 10px;

}

.kontakt_tabelle {
    max-width: 100%;
}
/*---------------------------------------Kontakt Ende -----------------------------------*/
/*--------------------------------------------------------------------------*/
/*----------------------------- EVENTS ------------------------------------*/


.events_flex_container {
    display           : flex;
    display           : -webkit-flex;
    flex-wrap         : wrap;
    justify-content   : center;
    max-width         : 1035px;
    /* outline        : black solid; */

}

.events_text {
    margin    : 30px 0%;
    text-align: left;
}

.designer{
    margin: 0px;
    margin-top: 70px;
}

.monatsliste {
    margin    : 0 auto;
    max-width : 20%;
    text-align: center;
}

.events_monatsliste_flex {
    text-align: left;
    max-width : 100%;
    /* PC */
    /* padding: 0px 0px 0px 200px; */
    /* Tabled */
    /* padding: 0px 0px 0px 120px; */
    /* Handy */
    padding   : 30px 0px 0px 0px;

}

.events_bild {
    margin     : 0 auto;
    padding-top: 10px;
    max-width  : 100%;
    max-height : 300px;

}


.events_tag {
    margin-top : 15px;
    border     : solid 1px #420105;
    padding    : 5px;
    font-size  : 20px;
    font-weight: bold;
}

.events_untertitel {
    font-size  : 20px;
    font-weight: bold;
    text-align : center;
}

.events_titel_flex {
    text-align: center;
    max-width : 100%;
}

.events_kontakt_flex_textfeld {
    margin-right : 20px;
    margin       : 0 auto;
    padding      : 20px;
    border       : solid 1px #420105;
    border-radius: 8px;
    max-width    : 600px;
}

.kursive_center {
    font-style: italic;
}

/*----------------------------- Ende EVENTS ------------------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/* ------------------ @ MEDIA 503 -------------------------------- */

@media (min-width: 503px) {

    /* startseite */
    .startseite_titel_bild {
        height             : 176px;
        background-image   : url('../img/release/startseite/titel_bild_mittel.jpg');
        background-repeat  : no-repeat;
        background-position: center;

    }

    /* dort zu finden: kontakt*/
    .kontakt_flex_textfeld {
        width: 50%;
    }

    /* events */

    .kursive_center {
        max-width: 100%;
    }

    .monatsliste {
        margin    : 0 auto;
        width     : 20%;
        text-align: center;
    }

    .events_titel_flex {
        width: 100%;
    }

    .events_text {
        margin: 30px 15%;

    }

    .events_monatsliste_flex {
        padding: 50px 0px 0px 0px;
    }

}

/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/* ------------------ @ MEDIA  für PC ---------------------------- */

@media (min-width: 701px) {

    /*------------------------------------- Startseite -------------------------------------*/

    .startseite_titel_bild {
        background-image   : url('../img/release/startseite/titel_bild.jpg');
        background-repeat  : no-repeat;
        background-position: center;
        background-size    : 100%;
    }

    .content {
        grid-template-areas:
            /* "startseite_titel_bild startseite_titel_bild startseite_titel_bild" */
            "startseite_text_oben startseite_text_oben oeffnung"
            "startseite_bilder_mittel startseite_bilder_mittel oeffnung"
            "startseite_text_unter startseite_text_unter oeffnung"
            ". . .";
    }

    /*-------------------------------------- ENDE Startseite -----------------------------------*/
}

@media (min-width: 830px) {

    /* ueberschrift_left dort zu finden: kontakt*/
    .align {
        text-align: left;
    }

    /* events */
    .events_monatsliste_flex {
        padding: 0px 0px 0px 200px;
    }

    .events_titel_flex {
        width: auto;
    }
}
/* ------------------ Ende @ MEDIA ---------------------------- */