/* ═══════════════════════════════════════════════════════════════════════════
   Quiz — Museum Abtei Liesborn

   Greift auf die Tokens des Sitepackages zu (--ink, --mint, --gold …), jeweils
   mit Rückfallwert. Damit fügt sich das Element ohne Zutun ins Haus ein und
   funktioniert trotzdem, wenn die Extension allein installiert wird.

   Geladen wird die Datei über das Site-Set der Extension. Kein CDN.
   ═══════════════════════════════════════════════════════════════════════════ */

.quiz {
    --quiz-ink: var(--ink, #2A2A26);
    --quiz-muted: var(--muted, #55554F);
    --quiz-linie: var(--rule-strong, #2A2A2622);
    --quiz-flaeche: var(--paper-2, #F2EFE8);
    --quiz-radius: var(--radius, 4px);
    --quiz-richtig: #2F6B4F;
    --quiz-falsch: #8C3A3A;
}

/* Fläche aus dem Farbleitsystem der Sammlung.
   Umgesetzt wird allein der Token --quiz-flaeche; Kästen, Abstände und
   Zustände hängen daran und ziehen von selbst mit. Gefärbt werden die
   FRAGEKÄSTEN, nicht das ganze Element: Das Quiz hat keine Außenfläche, und
   die Antwortzeilen darin bleiben weiß — sonst verschwände der Unterschied
   zwischen Kasten und Auswahl.

   Die Werte kommen aus dem Sitepackage; die Rückfallwerte gelten nur, wenn
   die Extension allein installiert ist. */
.quiz--farbe-abtei  { --quiz-flaeche: var(--c-abtei-soft, #E9EFE4); }
.quiz--farbe-kunst  { --quiz-flaeche: var(--c-kunst-soft, #DAE7F1); }
.quiz--farbe-kreuz  { --quiz-flaeche: var(--c-kreuz-soft, #F1D6CC); }
.quiz--farbe-alltag { --quiz-flaeche: var(--c-alltag-soft, #F7ECD8); }
.quiz--farbe-sonder { --quiz-flaeche: var(--c-sonder-soft, #E9DFE9); }
.quiz--farbe-grau   { --quiz-flaeche: var(--c-grau, #E1E1DD); }

.quiz__einleitung {
    font-size: 17px;
    line-height: 1.7;
    max-width: 720px;
    margin-bottom: 32px;
}

.quiz__fragen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* fieldset bringt eigenen Rand und Innenabstand mit — beides weg, die
   Gestaltung macht der Kasten selbst. */
.quiz__feld {
    border: 0;
    margin: 0;
    padding: 28px 32px;
    background: var(--quiz-flaeche);
    border-radius: var(--quiz-radius);
}

/* legend sitzt im Kasten und darf nicht als Rahmenbeschriftung erscheinen */
.quiz__legende {
    display: block;
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
}
.quiz__legende + * { clear: both; }

.quiz__nummer {
    display: block;
    font-family: var(--sans, sans-serif);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--quiz-muted);
    margin-bottom: 8px;
}
.quiz__wortlaut {
    display: block;
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.25;
    color: var(--quiz-ink);
}

.quiz__bild {
    margin: 0 0 20px;
    max-width: 480px;
}
.quiz__bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--quiz-radius);
}

.quiz__mehrfachhinweis {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--quiz-muted);
}

.quiz__antworten {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Die ganze Zeile ist das Label — damit trifft auch ein Klick neben den
   Knopf, was auf dem Telefon den Unterschied macht. */
.quiz__antwort {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    background: var(--paper, #FFFFFF);
    border: 1px solid var(--quiz-linie);
    border-radius: var(--quiz-radius);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.quiz__antwort:hover { border-color: var(--quiz-ink); }
/* Bootstrap 3 setzt für den alten Seitenbestand "label { font-weight: 700 }"
   und einen Außenabstand. Beides hier ausdrücklich zurücknehmen — sonst steht
   jede Antwort fett, je nachdem auf welcher Site das Quiz liegt. */
.quiz__antwort {
    font-weight: 400;
    margin-bottom: 0;
    max-width: none;
}
.quiz__antwort:has(input:disabled) { cursor: default; }
.quiz__antwort:has(input:disabled):hover { border-color: var(--quiz-linie); }

.quiz__antwort input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--quiz-ink);
    flex-shrink: 0;
}
.quiz__antworttext {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--quiz-ink);
}

/* Der Hinweis steht in der zweiten Spalte unter der Antwort */
.quiz__hinweis {
    grid-column: 2;
    font-size: 14px;
    line-height: 1.5;
    color: var(--quiz-muted);
    padding-top: 6px;
}

/* Ausgewertet: richtig und falsch werden NICHT allein über die Farbe
   unterschieden — die Zeichen ✓ und ✕ stehen davor. Farbe allein wäre für
   farbenblinde Menschen keine Information (WCAG 1.4.1). */
.quiz__antwort.ist-richtig {
    border-color: var(--quiz-richtig);
    background: #F1F7F3;
}
.quiz__antwort.ist-falsch {
    border-color: var(--quiz-falsch);
    background: #FBF3F3;
}
.quiz__antwort.ist-richtig .quiz__antworttext::before,
.quiz__antwort.ist-falsch .quiz__antworttext::before {
    font-weight: 700;
    margin-right: 8px;
}
.quiz__antwort.ist-richtig .quiz__antworttext::before {
    content: "\2713";
    color: var(--quiz-richtig);
}
.quiz__antwort.ist-falsch .quiz__antworttext::before {
    content: "\2715";
    color: var(--quiz-falsch);
}

.quiz__rueckmeldung {
    margin: 18px 0 0;
    font-weight: 500;
    font-size: 15px;
}
.quiz__rueckmeldung.ist-richtig { color: var(--quiz-richtig); }
.quiz__rueckmeldung.ist-falsch { color: var(--quiz-falsch); }

.quiz__aufloesung {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--quiz-linie);
    font-size: 15px;
    line-height: 1.6;
    color: var(--quiz-ink);
}
.quiz__aufloesung p { margin: 0; }

.quiz__aktion { margin: 28px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }

.quiz__ergebnis {
    margin: 24px 0 0;
    padding: 20px 24px;
    background: var(--mint, #BDD2BC);
    border-radius: var(--quiz-radius);
    font-family: var(--serif, Georgia, serif);
    font-size: 20px;
    color: var(--quiz-ink);
}

/* Rückfall, falls das Sitepackage fehlt: Ohne .btn wären die Schaltflächen
   nackte Browserknöpfe. Die Regeln greifen nur, wenn .btn nichts gesetzt hat. */
.quiz__aktion .btn:not([class*="btn--"]):not([style]) { cursor: pointer; }

@media (max-width: 767px) {
    .quiz__feld { padding: 22px 18px; }
    .quiz__antwort { padding: 12px 14px; }
}

/* Dunkle Seite: Der Kasten bringt seine eigene helle Fläche mit und behält
   deshalb dunkle Schrift — wie Infobox und Akkordeon im Sitepackage. */
.seite--dunkel .quiz__feld,
.seite--dunkel .quiz__antwort,
.seite--dunkel .quiz__ergebnis {
    color: var(--quiz-ink);
}
.seite--dunkel .quiz__einleitung { color: var(--paper, #FFFFFF); }