html,body{
    margin:0;
    height:100%;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--quiz-page-bg,#222);
    color:#fff;
}

.quiz-wrap{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4vw;
    box-sizing:border-box;
}

.quiz-card{
    width:min(1100px,92vw);
    height:500px;
    background:var(--quiz-question-bg,#20a9df);
    border:var(--quiz-border-width,15px) solid var(--quiz-border-color,#ff4faa);
    border-radius:20px;
    box-sizing:border-box;
    padding:35px 60px;
    text-align:center;
    display:grid;
    grid-template-rows:30px 1fr 120px;
    align-items:center;
    overflow:hidden;
}

.kategorie{
    font-size:var(--quiz-category-font-size,16px);
    color:var(--quiz-category-color,#fff);
    opacity:.75;
    min-height:24px;
}

.frage{
    font-size:var(--quiz-question-font-size,clamp(30px,4.5vw,54px));
    line-height:1.15;
    color:var(--quiz-question-color,#fff);
    background:var(--quiz-question-bg,#20a9df);
    border-radius:12px;
    padding:10px 18px;
    box-sizing:border-box;
    height:100%;
    max-height:230px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.antwort{
    font-size:var(--quiz-answer-font-size,clamp(30px,4.5vw,54px));
    font-weight:400;
    color:var(--quiz-answer-color,#111);
    background:var(--quiz-answer-bg,#20a9df);
    border-radius:12px;
    padding:10px 18px;
    box-sizing:border-box;
    height:180px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
}

.antwort.sichtbar{
    visibility:visible;
}

.footer{
    position:fixed;
    right:18px;
    bottom:14px;
    font-size:14px;
}

.footer a{
    color:#777;
    text-decoration:none;
}

@media(max-width:700px){
    .quiz-card{
        height:390px;
        padding:25px 22px;
        grid-template-rows:28px 1fr 100px;
    }

    .frage{
        max-height:210px;
    }

    .antwort{
        height:95px;
    }
}