/* Container styling */
.quiz-container { 
    text-align: center; 
    margin-top: 10px; 
}

/* Container, der Inputs und Button nebeneinander setzt */
.interaction-area {
    display: flex;
    justify-content: center; 
    align-items: flex-start; 
    gap: 40px;              
    margin-top: 15px;
}

/* Die graue Box mit den Inputs */
.input-box {
    text-align: right; 
    background-color: #f4f4f4; 
    padding: 15px 20px; 
    border-radius: 10px; 
    border: 1px solid #ddd;
}

/* Der Bereich rechts (Feedback + Buttons) */
.controls-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 280px; 
}

/* Wrapper für das Eingabefeld, um das Icon absolut zu positionieren */
.input-wrapper {
    display: inline-block;
    position: relative;
    padding-right: 35px;
}

/* Eingabefeld Stil */
.quiz-input {
    width: 80px; 
    padding: 5px; 
    text-align: center;
    border: 2px solid #6b7c38;
    border-radius: 4px;
    font-family: 'Oswald', sans-serif; 
    font-size: 18px; 
    margin-left: 10px; 
    color: #333;
}

/* Das Feedback-Icon (Häkchen/Kreuz) neben dem Feld */
.feedback-icon {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    display: none;
}

/* Zeile für jede Eingabe */
.input-row { 
    margin: 10px 0; 
    font-size: 18px; 
    font-family: 'Oswald', sans-serif; 
    color: #444; 
    white-space: nowrap;
}

/* Feedback Text */
#msg_feedback {
    height: 60px; 
    width: 100%;
    display: flex; 
    justify-content: center;
    align-items: flex-end; 
    text-align: center;
    font-family: 'Oswald', sans-serif; 
    font-size: 16px; 
    margin: 0 0 15px 0; 
    line-height: 1.3;
    color: rgb(65, 100, 74) !important; 
}

.msg-correct { font-weight: bold; }
.msg-wrong { font-weight: bold; color: #a00 !important; }

.button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}