* {
    box-sizing: border-box;
}

    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f0f8f1;
        color: #26352a;
}

/* Header */

    header {
        background-color: #176b3a;
        color: white;
         text-align: center;
        padding: 35px 20px;
}

    header h1 {
        font-size: 38px;
        margin: 0;
}

    header p {
        margin-bottom: 0;
}

/* Navigation */

    nav {
        background-color: #238b4b;
        padding: 16px;
        text-align: center;
}

    nav a {
        color: white;
        text-decoration: none;
        margin: 0 15px;
        font-weight: bold;
}

    nav a:hover {
        color: #d3ffdf;
}

/* Hauptinhalt */

    main {
        max-width: 850px;
        margin: auto;
        padding: 40px 20px;
        text-align: center;
}

    h2 {
        color: #176b3a;
}

/* Fragen */

    .frage {
        background-color: white;
        border: 2px solid #b6dfc2;
        border-radius: 12px;
        padding: 25px;
        margin: 25px 0;
        text-align: left;
}

.   .frage h3 {
        color: #176b3a;
        margin-top: 0;
}

    .frage label {
        display: block;
        padding: 12px;
        margin: 8px 0;
        background-color: #f0f8f1;
        border-radius: 7px;
        cursor: pointer;
}

    .frage label:hover {
        background-color: #d5efdd;
}

    input[type="radio"] {
        accent-color: #238b4b;
        margin-right: 10px;
}

/* Richtige und falsche Antworten */

    .richtig {
        background-color: #d1f2d9 !important;
        border: 2px solid #238b4b;
}

   .falsch {
        background-color: #ffe0e0 !important;
        border: 2px solid #c62828;
}

/* Buttons */

    button {
        background-color: #238b4b;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 14px 22px;
        margin: 10px;
        font-size: 16px;
        cursor: pointer;
}

    button:hover {
        background-color: #145c31;
}

/* Ergebnis */

    #ergebnis {
        font-size: 22px;
        font-weight: bold;
        color: #176b3a;
        margin: 30px auto;
}

/* Zurück-Button */

    .zurueck {
        display: inline-block;
        background-color: #238b4b;
        color: white;
        padding: 13px 25px;
        border-radius: 8px;
        text-decoration: none;
}

    .zurueck:hover {
        background-color: #145c31;
}

/* Footer */

    footer {
        background-color: #176b3a;
        color: white;
        text-align: center;
        padding: 20px;
        margin-top: 40px;
}

/* Smartphone */

    @media (max-width: 600px) {

        nav a {
        display: block;
        margin: 12px;
    }

        header h1 {
        font-size: 28px;
    }

        .frage {
        padding: 15px;
    }

        button {
        width: 100%;
        margin: 8px 0;
    }
}