@media screen and (min-width: 301px) and (max-width: 800px){
    :root {
        font-size: 10px;
    }


    body{
        padding: 0px;
        margin: 0px;
        font-family: Roboto,sans-serif;
    }






    /*************************************************************** header */


    .header{
        height: 220px;
        font-size: calc(16px + (28 - 10) * ((100vw - 320px) / (1600 - 320)));

    }

    .headerbackground{
       display: none;
    }

    #firmenlogo img{
        height: 60px;
        width: 80px;
        position: absolute;
        top: 2%;
        left: 11%;
        z-index: 90;
    }

    .beschreibung{
        width: 100%;
        text-align: center;
        position: absolute;
    }

    .headertitel{
        font-size: calc(16px + (28 - 10) * ((100vw - 320px) / (1600 - 320)));
        font-weight: 700;
        font-size: 0.9em;
        margin: 5px 130px;
    }

    .headertext{
        font-size: calc(16px + (28 - 10) * ((100vw - 320px) / (1600 - 320)));
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight:lighter;
        font-size: 0.9em;
        margin: 2px 10px;
    }




/* ***********************************   NAV Burger   ***************************** */


    #menuToggle
    {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;

    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
    }

    #menuToggle a
    {
    text-decoration: none;
    color: #232323;

    transition: color 0.3s ease;
    }

    #menuToggle input
    {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */

    -webkit-touch-callout: none;
    }

    /*
    * Just a quick hamburger
    */
    #menuToggle span
    {
    display: block;
    width: 32px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: #717171;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
    transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
    transform-origin: 0% 100%;
    }

    /*
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    #menuToggle input:checked ~ span
    {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
    }

    /*
    * But let's hide the middle one.
    */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
    * Ohyeah and the last one should go the other direction
    */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
    transform: rotate(-45deg) translate(0, -1px);
    }

    /*
    * Make this absolute positioned
    * at the top left of the screen
    */
    #menu
    {
    position: fixed;
    width: 300px;
    margin: 0px;
    padding: 50px;
    padding-top: 110px;
    right: 0;
    top: 0;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 150% 0%;
    transform: translate(150%, 0);

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    #menu li{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.2em;
    text-decoration: none;
    margin-top: 13px;
        margin-right: 10px;
        background-color: rgba(94, 193, 48, 1.0);
        padding: 12px;
        box-shadow: 2px 2px 4px #000000;
        border-radius: 5px;
        position: relative;
    }

    /*
    * And let's slide it in from the left
    */
    #menuToggle input:checked ~ ul{
    transform: translate(0, 0);
    }


    nav ul li a:hover{
        color: #fff;
    }

    #menu #seiteaktiv{
        color: rgb(54, 54, 54)
    }



    /*************************************************************** news */



    .news{
        background-color: rgba(94, 193, 48, 1.0);
        margin: 10px 0px;
        padding: 0px;
    }

    .newstext{
        color: #000000;
        text-align: center;
        font-size: 1.4em;
        font-weight: 400;
        margin: 10px;
    }

    .weihnachtsbild{
        width: 100%; /* Passt die Breite an den Container an */
        max-width: 400px; /* Maximale Breite, z. B. 400px */
        height: auto; /* Hält das Seitenverhältnis bei */
        display: block; /* Verhindert Lücken unter Bildern */
        margin: 0 auto; /* Zentriert das Bild */
    }




    /*************************************************************** themen */

    .themen{
        background-color: #fff;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 50px;
        padding: 0px;
        margin-bottom: 50px;
    }

    .thementitel{
        color: rgba(94, 193, 48, 1.0);
        text-align: center;
        font-size: 1.4em;
        font-weight: 400;
    }

    .themenplace{
        width: 80%;
        margin: auto;
    }

    .cardplace{
        width: 90%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        margin: auto;
    }

    .cards{
        max-width: 360px;
        min-width: 360px;
        border: 1px solid #dadada;
        border-radius: 10px;
        margin: 40px;
        padding: 0px;
        box-shadow: 3px 3px 25px #000000;
    }

    .cardimg{
        width: 340px;
        height: auto;
        border-radius: 5px;
        text-align: center;
        margin: 10px;
    }

    .cardtitel{
        font-size: 1.4em;
        font-weight: bold;
        color: rgba(94, 193, 48, 1.0);
        margin: 10px ;
    }

    .cardtext{
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 10px ;
    }

    .cardbutton{
        color: #fff;
        background-color: rgba(94, 193, 48, 1.0);
        height: 50px;
        width: 120px;
        margin-left: 40px;
        margin-bottom: 40px;

    }







    /*************************************************************** kontakt */

    .kontakt{
        padding-top: 50px;
        background-color: rgba(94, 193, 48, 1.0);
        height: 20em;
        color: #fff;
    }

    .kontaktplace{
        width: 90%;
        padding: 8px;
        margin:auto;
        display: flex;
    }

    .kontaktcards{
        max-width: 400px;
        padding: 8px;
        margin: auto;
    }

    .ausblenden{
        display: none;
    }





    /*************************************************************** footer */

    .footer{
        height: 16em;
        background-color: #333;
        font-size: 0.8em;
    }

    .footernav{
        width: 80%;
        margin:auto;
        padding: 8px;
        display: block;
    }

    .footernav a:link{
        color: #fff;
        background-color: transparent;
        text-decoration: none;
    }

    .copyright{

        font-weight: 700;
        color: #fff;
        background-color: transparent;
        text-decoration: none;
    }

    .footercards{

        margin: 1em;
        color: #fff;
        font-weight: 400;
        font-size: small;
        text-decoration: none;
        text-transform: uppercase;
    }

    .footercards a:visited {
        color: #fff;
    }






    /**************************************************************** V card  **/



    .vcardsheader{
        background-color: rgba(94, 193, 48, 1.0);
        height: 160px;
        margin: -1px;
        border-radius: 10px 10px 10px 10px;
    }

    .vcardimg{
        background-color: #fff;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        margin: auto;
        display: block;
        margin-top: -100px;

    }

    .vcardtitel{
        text-align: center;
        font-size: 1.4em;
        font-weight: bold;
        color: rgb(79, 79, 79);
        margin: 50px 10px 50px 10px;

    }

    .vcardtext{
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 50px 10px 60px 50px;
        color: rgb(105, 105, 105);
    }



    /**********************************************   nav-container   ***************************************/

    .nav-container {
       display: none;
    }


      /**********************************************   weihnachtsspiel   ***************************************/

      .btn-weihnachtsspiel {
        display: none;
     }


}