/* Aufgabe in einer Einfuehrungsfolie (assets/js/folienaufgabe.js).
   Hell wie die Folienkarte, nicht dunkel wie die Quizkarte: Die Aufgabe ist
   Teil der Folie. Farben ueber die Bootstrap-Variablen, damit Hell und Dunkel
   von selbst folgen. Richtig/falsch traegt immer auch ein Zeichen, nie nur
   die Farbe. */

.folienaufgabe {
    --fa-akzent: var(--bs-primary, #1d6f8c);
    --fa-richtig: var(--bs-success, #198754);
    --fa-falsch: #c26a1b;
    margin: 1.25rem 0 .5rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-left: 4px solid var(--fa-akzent);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f8fafc);
}

.fa-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.fa-marke {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fa-akzent);
}

.fa-frage { font-weight: 600; margin-bottom: .75rem; }
.fa-hinweis, .fa-schlussfrage { font-size: .9rem; color: var(--bs-secondary-color, #6b7280); margin-bottom: .5rem; }
.fa-schlussfrage { font-weight: 600; color: inherit; margin-top: .75rem; }

.fa-optionen { display: grid; gap: .4rem; }

.fa-option {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .55rem .75rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .4rem;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
}
.fa-option:hover { border-color: var(--fa-akzent); }
.fa-option .form-check-input { margin-top: .2rem; flex-shrink: 0; }

.fa-zuordnung { display: grid; gap: .4rem; }

.fa-zeile {
    display: grid;
    grid-template-columns: 1fr minmax(9rem, 14rem);
    gap: .6rem;
    align-items: center;
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .4rem;
    background: var(--bs-body-bg, #fff);
}

.fa-wf { display: inline-flex; gap: .35rem; justify-self: end; }
.fa-wf-wahl {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: 1rem;
    cursor: pointer;
    font-size: .9rem;
}
.fa-wf-wahl:has(input:checked) { border-color: var(--fa-akzent); background: var(--bs-primary-bg-subtle, #e3f1f6); }

.fa-reihe { padding-left: 1.5rem; display: grid; gap: .4rem; margin-bottom: 0; }
.fa-reihe-schritt {
    padding: .45rem .6rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .4rem;
    background: var(--bs-body-bg, #fff);
}
.fa-reihe-schritt { display: list-item; }
.fa-reihe-text { display: inline; }
.fa-reihe-knoepfe { float: right; display: inline-flex; gap: .25rem; margin-left: .5rem; }

.fa-lueckentext, .fa-markiertext { line-height: 2.1; }
.fa-luecke {
    display: inline-block;
    width: 11rem;
    max-width: 100%;
    margin: 0 .2rem;
    vertical-align: baseline;
}

.fa-wolke { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.fa-chip, .fa-wort {
    border: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-body-bg, #fff);
    color: inherit;
    border-radius: .35rem;
    padding: .05rem .4rem;
    font: inherit;
}
.fa-chip { border-radius: 1rem; padding: .15rem .65rem; font-size: .9rem; }
.fa-wort { border-color: transparent; background: transparent; padding: 0 .1rem; cursor: pointer; }
.fa-wort:hover { border-color: var(--bs-border-color, #d1d5db); }
.fa-wort[aria-pressed="true"] { background: #fde68a; color: #1f2937; }

.fa-diagnose { margin-bottom: .75rem; }
.fa-diagnose-titel { font-size: .95rem; font-weight: 600; margin-bottom: .35rem; float: none; }

.fa-zahl { display: flex; align-items: center; gap: .5rem; max-width: 18rem; }
.fa-einheit { color: var(--bs-secondary-color, #6b7280); }

.fa-fuss { display: flex; align-items: center; gap: .75rem; margin-top: .85rem; }
.fa-versuch { font-size: .85rem; color: var(--bs-secondary-color, #6b7280); }

/* Rueckmeldung: Farbe und Zeichen */
.folienaufgabe .ist-richtig { border-color: var(--fa-richtig) !important; }
.folienaufgabe .ist-falsch { border-color: var(--fa-falsch) !important; }
.fa-option.ist-richtig::after, .fa-zeile.ist-richtig::after, .fa-reihe-schritt.ist-richtig .fa-reihe-text::after {
    content: " ✓"; color: var(--fa-richtig); font-weight: 700;
}
.fa-option.ist-falsch::after, .fa-zeile.ist-falsch::after, .fa-reihe-schritt.ist-falsch .fa-reihe-text::after {
    content: " ✗"; color: var(--fa-falsch); font-weight: 700;
}
/* Das Zeichen sitzt in der Ecke, nicht in einer eigenen Rasterspalte:
   eine dritte Spalte quetscht auf schmalen Schirmen den Text */
.fa-zeile { position: relative; padding-right: 2rem; }
.fa-zeile.ist-richtig::after, .fa-zeile.ist-falsch::after { position: absolute; top: .45rem; right: .65rem; }
.fa-option.ist-richtig { background: var(--bs-success-bg-subtle, #e8f5ee); }
.fa-option.ist-falsch { background: var(--bs-warning-bg-subtle, #fdf1e6); }
.fa-wort.ist-richtig { outline: 2px solid var(--fa-richtig); }
.fa-wort.ist-falsch { outline: 2px dashed var(--fa-falsch); }
.fa-luecke.ist-richtig, .fa-zahl-feld.ist-richtig { border-width: 2px; }
.fa-luecke.ist-falsch, .fa-zahl-feld.ist-falsch { border-width: 2px; border-style: dashed; }
.ist-geloest { font-style: italic; }

.fa-rueckmeldung:empty { display: none; }
.fa-rueckmeldung {
    margin-top: .85rem;
    padding: .65rem .85rem;
    border-radius: .4rem;
    border: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-body-bg, #fff);
}
.fa-rueckmeldung.ist-richtig { border-color: var(--fa-richtig); }
.fa-rueckmeldung.ist-richtig strong::before { content: "✓ "; color: var(--fa-richtig); }
.fa-rueckmeldung.ist-falsch, .fa-rueckmeldung.ist-loesung { border-color: var(--fa-falsch); }
.fa-rueckmeldung.ist-falsch strong::before { content: "↻ "; color: var(--fa-falsch); }
.fa-rueckmeldung.ist-loesung strong::before { content: "→ "; color: var(--fa-falsch); }

/* Bezug: Grafik oder Text aus einer frueheren Folie */
.fa-fenster {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .6);
}
.fa-fenster[hidden] { display: none; }
.fa-fenster-box {
    width: min(64rem, 100%);
    max-height: 100%;
    overflow: auto;
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2937);
    padding: 1rem 1.1rem 1.25rem;
}
.fa-fenster-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.fa-fenster-inhalt img { display: block; width: 100%; height: auto; background: #fff; border-radius: .35rem; }
.fa-fenster-text { margin-top: .5rem; }

@media (max-width: 575.98px) {
    .fa-zeile { grid-template-columns: 1fr; }
    .fa-wf { justify-self: start; }
}