:root {
    /* Vorgaben aus deiner Nachricht */
    --brand-bg: #fdf1b9; /* Seitenhintergrund */
    --brand-card: #fffbe8; /* Karten-Panels */
    --brand-text: #212529; /* Standard-Textfarbe */
    --brand-muted: #5c5f64; /* Sekundärtext */
    --brand-gold: #f9c736; /* Button-Hintergrund */
    --brand-gold-600: #ffde77; /* Button Hover */
    --brand-gold-200: #fce289; /* hellere Akzente */
    --brand-outline: rgba(249, 199, 54, .45);
}

.btn {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}

#wirkungstest-content, #wirkungstest-doi-target {
    min-height: 620px;

    .btn-dark:hover {
        background: var(--brand-gold-600) !important;
        color: var(--brand-text) !important;
    }

    /* Basislayout */

    .card {
        border: 0;
        border-radius: 1rem;
        background: transparent;
    }

    /* Links & Badges */

    a {
        color: var(--brand-text);
        text-decoration-color: var(--brand-gold);
    }

    .badge.text-bg-warning {
        background: var(--brand-gold);
        color: var(--brand-text);
    }

    /* Antwort-Buttons (Hover-Fix: Text bleibt dunkel) */

    .answer-btn {
        text-align: left;
        background: #fff9dc;
        color: var(--brand-text);
        border-color: #f9e68c;
        margin-bottom: 1rem;
    }

    .answer-btn:hover,
    .answer-btn.selected {
        background: var(--brand-gold-600) !important;
        color: var(--brand-text) !important;
    }

    .answer-btn:focus {
        outline: 4px solid var(--brand-outline);
        outline-offset: 2px;
    }

    /* Progressbar */

    .progress {
        background: #fcefb1;
        border: 1px solid black;
    }

    .progress-bar {
        background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-200));
    }

    /* Formulare (inkl. Checkbox-Labels explizit dunkel) */

    .form-control, .form-check-input {
        border-color: #fcefb1;
        color: var(--brand-text);
    }

    .form-control:focus {
        border-color: var(--brand-gold-200);
        box-shadow: 0 0 0 .2rem var(--brand-outline);
    }

    .form-check-input {
        accent-color: var(--brand-gold);
    }

    label.form-label, .form-check-label {
        color: var(--brand-text) !important;
    }

    textarea, input:not([type="checkbox"]):not([type="radio"]) {
        background: var(--brand-gold-600) !important;
        border: 1px solid var(--brand-gold) !important;

        &::placeholder {
            color: #000000 !important;
            font-size: 1rem;
            opacity: 0.5;

        }

        &::-ms-input-placeholder { /* Edge 12-18 */
            color: #000000 !important;
        }

        &::-webkit-input-placeholder {
            color: #000000 !important;
        }

    }


    /* Tabellen (helle Variante) */

    .table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--brand-text);
    }

    .table thead th {
        border-bottom-color: #f2e7a6;
    }

    .table td, .table th {
        border-color: #f2e7a6;
    }

    /* Alerts auf hellem Theme gut lesbar lassen */

    .alert-success {
        color: #0a2612;
        background: #dff3c7;
        border-color: #c6e7a5;
    }

    .alert-warning {
        color: #3f2e10;
        background: #fff1cd;
        border-color: #ffe29a;
    }

    .alert-danger {
        color: #3b1e1e;
        background: #ffd8d6;
        border-color: #ffc2bf;
    }

    #questionText {
        min-height: 80px;
    }
}