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

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    background: #f4f6f8;

    color: #333;

}

.danger {

    background: #b22222;

}


.danger:hover {

    background: #8b0000;

}

.info-box {

    background: #eef7ee;

    border-left: 5px solid #2e8b57;

    padding: 15px;

    margin-top: 20px;

    border-radius: 8px;

}

button.button {

    border: none;

    cursor: pointer;

    font-size: 1rem;

}


.container {

    max-width: 1100px;

    margin: 0 auto;

    padding: 20px;

}

.code-box {

    background: #333;

    color: white;

    font-size: 1.8rem;

    font-weight: bold;

    letter-spacing: 3px;

    text-align: center;

    padding: 15px;

    border-radius: 10px;

    margin: 20px 0;

}


/* ===============================
   Überschriften
================================ */

h1 {

    text-align: center;

    color: #333;

    margin-bottom: 10px;

}


h2 {

    margin-top: 0;

    padding-top: 10px;

    border-top: 2px solid #ddd;
    margin-bottom: 0px;

}


h3 {

    margin-top: 0;

    font-size: 1.2rem;

}


/* ===============================
   Buttons
================================ */

.button {

    display: inline-block;

    background: #2e8b57;

    color: white;

    text-decoration: none;

    padding: 12px 20px;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.2s;

}


.button:hover {

    background: #236b43;

}



/* ===============================
   Tagesbereiche
================================ */

.days {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


.day {

    background: white;

    border-radius: 12px;

    padding: 20px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

}



/* ===============================
   Speisekarten
================================ */

.card {

    background: #fafafa;

    border-left: 5px solid #2e8b57;

    padding: 15px;

    margin-bottom: 15px;

    border-radius: 8px;

}


.card p {

    margin: 8px 0;

}


/* Links in Karten */

.card a {

    color: #2e8b57;

    text-decoration: none;

    font-weight: bold;

}


.card a:hover {

    text-decoration: underline;

}


/* ===============================
   Formulare
================================ */

form {

    background: white;

    padding: 25px;

    border-radius: 12px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

}



label {

    display: block;

    margin-top: 15px;

    margin-bottom: 5px;

    font-weight: bold;

}



input,
textarea,
select {


    width: 100%;

    padding: 12px;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 1rem;

}



textarea {

    min-height: 120px;

    resize: vertical;

}



input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: #2e8b57;

}


/* ===============================
   Radio Buttons
================================ */

.radio-group {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}


.radio-group label {

    font-weight: normal;

}


/* ===============================
   Statistik später
================================ */

.stat {

    background: white;

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 10px;

}


/* ===============================
   Mobile Ansicht
================================ */

@media(max-width:800px){


    .days {

        grid-template-columns: 1fr;

    }


    .container {

        padding: 10px;

    }


    h1 {

        font-size: 1.8rem;

    }


    .button {

        width: 100%;

        text-align: center;

    }

}