:root{
    font-size: 16px;
    --background-color: #E9F1F7;
    --font-color: #131B23;
    --surface-color: #E7DFC6;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--background-color);
    color: var(--font-color);
}

@font-face{
    font-family: 'GrapeNut';
    src: url('/src/font/GrapeNuts-Regular.ttf');
}
@font-face{
    font-family: 'Caudex';
    src: url('/src/font/Caudex-Regular.ttf');
}
body{
    font-family: 'Caudex', Arial, serif;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'GrapeNut', Arial, serif;
    margin-bottom: 1rem;
}

#content-limiter{
    padding: 0 2rem;
    max-width: 1200px;
    margin-inline: auto;
}

.two-col{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;

    .col-left{
        width: 49%;
    }
    .col-right{
        width: 49%;
    }
}

.no-scroll{
    overflow: hidden;
}
/*
    Header
 */
header{
    width: 100%;
    background-color: var(--surface-color);

    .two-col{
        padding: 2rem;
        max-width: 1200px;

        .col-left{
            display:flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: start;
            gap: 1rem;
        }

        @media screen and (max-width: 768px){
            flex-direction: column;
            align-items: start;

            .col-left{
                width: 100%;
            }
            .col-right{
                width: 100%;
                margin-top: 2rem;
            }
        }


        ul{
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li{
                border: 2px solid transparent;
                padding: 0.5rem;
                border-radius: 1rem;
                transition: all 0.2s ease-in-out;

                &:hover{
                    border: 2px solid var(--font-color);
                }
            }
        }

        .nav__toggle{
            display: none;
        }
        @media screen and (max-width: 480px){
            ul{
                display: none;
            }

            .nav__toggle{
                display: block;
                position: fixed;
                top: 1rem;
                right: 1.5rem;
                z-index: 1001;
                width: 2rem;
                height: 2rem;
                border-radius: 0.5em;

                button{
                    width: 42px;
                    height: 42px;
                    border-radius: 0.5rem;
                }
            }
        }

        dialog{
            width: 100%;
            height: 100%;
            margin-inline: auto;

            .two-col{
                flex-direction: row;
            }

            .close-button{
                position: absolute;
                top: 1rem;
                right: 1rem;
                z-index: 1001;
                width: 100px;
                height: 32px;
                border-radius: 0.5em;
                background-image: url('/src/svg/Back.svg');
                background-repeat: no-repeat;
                background-position: center;
            }
        }
        .mobile_nav__menu{
            display: block;
        }
    }

    *{
        background-color: var(--surface-color);
    }

    a{
        text-decoration: none;
    }
}
/*
    Main
 */
main{
    section{
        margin-bottom: 5rem;
        width: 100%;

        .hero-container {
            width: 100%;
            height: 400px;              /* feste Maximalhöhe */
            overflow: hidden;           /* überschüssiges Bild abschneiden */
            position: relative;
            margin-bottom: 1rem;
            background-image: url('/src/img/Willkommen.png');
        }

        &.news-container{
            background-color: var(--surface-color);
            border-radius: 1rem;
            border: 1rem solid var(--surface-color);
            width: calc(100% + 2rem);
            margin-inline: auto;
            transform: translateX(-1rem);

            *{
                background-color: var(--surface-color);
            }
        }

        .cow{
            background-image: url('/src/img/Kuh.png');

            @media screen and (min-width: 1024px){
                background-position-y: -250px;
            }

        }
        .beer{
            background-image: url('/src/img/Bier.jpg');
        }
        .cheese{
            background-image: url("/src/img/Kaese.png");
            @media screen and (min-width: 1024px){
                background-position-y: -50px;
            }
        }
        .family{
            background-image: url("/src/img/familie.jpeg");

            @media screen and (min-width: 1024px){
                background-position-y: -250px;
            }
        }

        .weißlacker{
            background-image: url("/src/img/weißlacker.jpeg");

            @media screen and (min-width: 1024px){
                background-position-y: -500px;
            }
        }

        .butter{
            background-image: url("/src/img/butter.jpeg");

            @media screen and (min-width: 1024px){
                background-position-y: -600px !important;
            }
        }

        .winter-landscape{
            background-image: url("src/img/landscape_winter.jpg");
            @media screen and (min-width: 1024px){
                background-position-y: -280px !important;
            }

        }
        .winter-small{
            background-image: url("src/img/winter_small.jpeg");
        }
        .food-winter{
            background-image: url("src/img/food_winter.jpeg");

            @media screen and (min-width: 1024px){
                background-position-y: -430;
            }
        }
.food-grid {
    display: grid;
    grid-template-columns: 1fr 3fr; /* Tag | Gericht */
    gap: 1.5rem 1rem;
    max-width: 800px;
    background-color: var(--surface-color);
margin-top: 1rem; 
}

.food-grid .day {
    font-weight: 600;
    background-color: var(--surface-color);
}

.food-grid .meal {
    text-align: left;
    background-color: var(--surface-color)
}
        .ce-two-col-img{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 2rem;

            table, tr, td{
                background-color: var(--surface-color);
            }
            
            tr{
               border-bottom: 1px solid black;
            }
            .col-left-img, .col-right-img{
                width: 70%;
                height: 450px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position-x: center;
            }


            .col-text-right, .col-text-left{
                width: 30%;
                z-index:1;

                .ce-text{
                    padding: 1rem;
                    background-color: var(--surface-color);
                    border-radius: 1rem;
                    border: 1rem solid var(--surface-color);
                    position: relative;
                    min-width: 250px;
                }
            }

            .col-text-right .ce-text{
                top: 3rem;
                left: -5rem;
                box-shadow: -5px 5px 20px 0px;
            }

            .col-text-left .ce-text{
                top: 3rem;
                left: 5rem;
                box-shadow: 5px 5px 20px 0px;
            }

            @media screen and (max-width: 480px){
                flex-direction: column;

                .col-left-img, .col-right-img{
                    width: 100%;
                    overflow: hidden;
                }

                .col-text-right, .col-text-left{
                    width: 100%;
                    z-index:1;

                    .ce-text{
                        padding: 1rem;
                        background-color: var(--surface-color);
                        border-radius: 1rem;
                        border: 1rem solid var(--surface-color);
                        position: relative;
                    }
                }

                .col-text-right .ce-text{
                    top: -3rem;
                    left: 0rem;
                }

                .col-text-left .ce-text{
                    top: 3rem;
                    left: 0;
                }
            }
        }

        .ce-full-screen-img{
            width: 100%;
            height: 400px;
            overflow: hidden;
            margin-bottom: 2rem;
            background-size: cover;
            background-repeat: no-repeat;
            background-position-y: bottom;
            background-position-x: center;
        }

        .food{
            background-image: url('/src/img/Brotzeit.png');
        }
        .all{
            background-image: url('/src/img/allePersonen.png');
            background-position: center;
        }
        .ce-contact-buttons{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 2rem;
            padding: 2rem;
            justify-content: space-evenly;
            align-items: center;

            @media screen and (max-width: 480px){
                flex-direction: column;
                gap: 5rem;
            }

            .contact-button{
                padding: 1rem;
                text-decoration: none;
                border: 2px solid var(--font-color);
                background-color: var(--surface-color);
                border-radius: 1rem;
                transition: all 0.2s ease-in-out;

                &:hover{
                    background-color: var(--font-color);
                    color: var(--surface-color);
                }
            }

        }
    }
}
/*
    Footer
 */
footer{
    width: 100%;
    background-color: var(--surface-color);

    .two-col{
        padding: 2rem;
        max-width: 1200px;
        margin-inline: auto;

        ul{
            list-style-type: none;
            li:not(:last-child){
                margin-bottom:1rem
            }

            text-align: right;
        }
    }

    *{
        background-color: var(--surface-color);
    }
}