body {
    margin: 0px;
    background-color: var(--farbe-gelb);
    color: var(--farbe-violett);
    font-family: DINPro;
}

.fett {
    font-family: D-DIN-PRO-Bold;
}

.cb-antwort {
    min-width: 1em;
    min-height: 1em;
    width: 1em;
    height: 1em;
    margin-right: 1em;
    background-image: url("bilder/checkbox_leer.PNG");
    background-size: cover;
    cursor: pointer;
}

.cb-antwort.ist-gewaehlt {
    width: 1em;
    height: 1em;
    background-image: url("bilder/checkbox_checked.PNG");
    background-size: cover;
}

:root {
    --farbe-violett: #59358c;
    --farbe-gelb: #ffdf30;

    --farbband-versatz: 0px;
    --hoehe-behaelter-farbband: 40em;
    --breite-behaelter-farbband: 40em;

    --animation-farbband-breite-dauer: 10s;
    --animation-farbband-breite-verzoegerung: 0s;

    --animation-erscheine-farbband-dauer: 7s;
    --animation-erscheine-farbband-verzoegerung: 0s;

    --animation-erscheine-zirkel-dauer: 5s;
}

#behaelter-seite {
    width: 100vw;
    height: 100vh;
    font-size: large;
}
/* Startseite */
#startseite {
    width: 100%;
    height: 100%;
    background-color: var(--farbe-gelb);
}
#bereich-zirkel {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* position: relative; */
}
#bereich-btn-los {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#zirkel-startseite {
    width: 80%;
    max-width: 460px;
    animation-name: erscheine;
    animation-duration: var(--animation-erscheine-zirkel-dauer);
}
#btn-los {
    background-color: var(--farbe-violett);
    color: var(--farbe-gelb);
    font-family: D-DIN-PRO-Bold;
    display: flex;
    justify-content: center;
    min-width: 200px;
    width: 30%;
    padding: 1em;
    animation-name: erscheine;
    animation-delay: var(--animation-erscheine-zirkel-dauer);
    cursor: pointer;
}
#behaelter-farbband {
    position: fixed;
    top: -5em;
    left: -27em;
    height: var(--hoehe-behaelter-farbband);
    width: var(--breite-behaelter-farbband);
    animation-name: farbband-breite, erscheine;
    animation-duration: var(--animation-farbband-breite-dauer), var(--animation-erscheine-farbband-dauer);
    animation-delay: var(--animation-farbband-breite-verzoegerung);
    overflow: hidden;
}
#farbband {
    width: calc(2 * var(--breite-behaelter-farbband));
    rotate: -45deg;
}
#farbband-1 {
    height: 1em;
    background-color: black;
    margin-right: calc(0 * var(--farbband-versatz));
}
#farbband-2 {
    height: 1em;
    background-color: darkgoldenrod;
    margin-right: calc(1 * var(--farbband-versatz));
}
#farbband-3 {
    height: 1em;
    background-color: red;
    margin-right: calc(2 * var(--farbband-versatz));
}
/* Frageseite */
#frageseite {
    width: 100%;
    height: 100%;
    display: none;
}
#bereich-fragetext {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 30%;
    border-bottom: solid;
    border-color: var(--farbe-violett);
    border-width: 1px;
}
#fragetitel {
    font-family: D-DIN-PRO-Bold;
    margin-bottom: 2em;
}
#bereich-antworten {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
}
#behaelter-antworten {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em
}
#behaelter-btn-weiter {
    display: flex;
    padding-top: 2em;
    justify-content: center;
    align-items: center;
}
.antwort {
    display: flex;
    align-items: center;
    margin: 1rem;
    cursor: pointer;
}
#btn-weiter {
    background-color: var(--farbe-violett);
    color: var(--farbe-gelb);
    font-family: D-DIN-PRO-Bold;
    display: flex;
    justify-content: center;
    min-width: 200px;
    width: 30%;
    padding: 1em;
    cursor: pointer;
}
/* Ergebnisseite */
#ergebnisseite {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}

#ergebnis-positiv {
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2em;
}

#ergebnis-negativ {
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2em;
}

.ergebnistitel {
    margin-bottom: 3em;
}

#btn-weiter.disabled {
    opacity: 0.5;
}

/* Animationen */
@keyframes erscheine {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes farbband-breite {
    from {
        height: 0px;
    }

    to {
        height: var(--hoehe-behaelter-farbband);
    }
}