:root {
    --vl-good: #198754;
    --vl-bad: #dc3545;
    --vl-neutral: #6c757d;
}

body {
    min-height: 100vh;
}

.vl-card-link {
    text-decoration: none;
    color: inherit;
}

.vl-card-link:hover .card {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .25);
}

/* Lernkarte */
.learn-card {
    max-width: 640px;
    margin: 0 auto;
}

.learn-prompt {
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    font-weight: 600;
    word-break: break-word;
}

.answer-input {
    font-size: 1.4rem;
    text-align: center;
}

.feedback-correct {
    color: var(--vl-good);
}

.feedback-wrong {
    color: var(--vl-bad);
}

/* Kategorie-Balken (rot/gruen) */
.mastery-bar {
    height: 1.4rem;
    border-radius: .4rem;
    overflow: hidden;
    background: var(--bs-secondary-bg);
}

.mastery-bar .bar-good { background: var(--vl-good); }
.mastery-bar .bar-bad { background: var(--vl-bad); }
.mastery-bar .bar-neutral { background: var(--vl-neutral); }
.mastery-bar .bar-new { background: var(--bs-border-color); }

.streak-flame {
    color: #fd7e14;
}

@media (max-width: 575.98px) {
    .learn-prompt { font-size: 1.8rem; }
    main.container { padding-left: .75rem; padding-right: .75rem; }
}