/*Root: Box wie das Inhalt-Element (weiße Fläche, Rahmen in Flächenfarbe, Innenabstand 0.7rem + 3px)*/
.lncu-quiz-block {
    position: relative;
    isolation: isolate; /*eigener Stapelkontext: das Feuerwerk liegt mit z-index -1 hinter dem Inhalt, aber vor der Fläche der Box*/
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--lncu-quiz-padding);
    border: var(--lncu-quiz-frame-width) solid var(--lncu-quiz-frame);
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-background);

    color: var(--lncu-quiz-text);
    font-size: var(--lncu-quiz-font-size);
    line-height: var(--lncu-quiz-line-height);

    /*Gestaltung: zentrale Stellschrauben für alle Fragetypen*/
    --lncu-quiz-font-size: 1.5rem;
    --lncu-quiz-line-height: 1.7;
    --lncu-quiz-title-size: 1.8rem;
    --lncu-quiz-small-size: 1.3rem;
    --lncu-quiz-radius: 1rem;                                       /*eine Rundung für Box, Knöpfe, Antworten und Felder*/
    --lncu-quiz-padding: 0.7rem;
    --lncu-quiz-frame-width: 3px;
    --lncu-quiz-field-border-width: 3px;                            /*Rahmen von Antworten, Feldern, Zeilen und Ablagefeldern*/
    --lncu-quiz-hover-width: var(--lncu-quiz-field-border-width);   /*Kontur beim Überfahren deckt den Rahmen genau*/
    --lncu-quiz-marker-size: 3.2rem;
    --lncu-quiz-bar-height: 0.6rem;
    --lncu-quiz-bar-gap: 0.8rem;

    /*Farben; die Farbschemata weiter unten setzen sie neu*/
    --lncu-quiz-background: var(--bricks-color-white);         /*Fläche des Quiz, Felder auf Bildern*/
    --lncu-quiz-frame: var(--bricks-color-white);              /*Rahmen des Quiz: immer weiß, die Farbschemata ändern ihn nicht*/
    --lncu-quiz-text: var(--bricks-color-blue-100);
    --lncu-quiz-field: var(--bricks-color-white);              /*Antworten, Eingabefelder, Zeilen in Ruhe: weiße Fläche mit Rahmen (Skizze F)*/
    --lncu-quiz-field-border: var(--lncu-quiz-line);           /*ihr Rahmen; folgt dem Farbschema über --lncu-quiz-line (Stufe 400)*/
    --lncu-quiz-field-hover: var(--lncu-quiz-surface);         /*Fläche wählbarer Antworten beim Überfahren (Stufe 600 des Schemas)*/
    --lncu-quiz-surface: var(--bricks-color-blue-600);         /*getönte Fläche: gewählte Antworten, Hinweiskästen*/
    --lncu-quiz-surface-strong: var(--bricks-color-blue-500);  /*Nebenknöpfe, Ablageziel*/
    --lncu-quiz-line: var(--bricks-color-blue-400);            /*gestrichelte Ablagefelder, Leiste der Regler*/
    --lncu-quiz-hover: var(--bricks-color-blue-200);           /*Kontur beim Überfahren, Fokus, Hinweisbalken*/
    --lncu-quiz-primary: var(--bricks-color-blue-100);         /*Hauptknöpfe, Karten, Nummern, Regler*/
    --lncu-quiz-on-primary: var(--bricks-color-white);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);      /*gewählt: Karten, Knöpfe, Füllung der Regler*/
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-akzent-100);        /*-100 des Schemas: Marker, Fortschrittsleiste, Regler und Balken*/
    --lncu-quiz-correct: var(--bricks-color-green-100);
    --lncu-quiz-correct-surface: var(--bricks-color-green-600);
    --lncu-quiz-wrong: var(--bricks-color-red-100);
    --lncu-quiz-wrong-surface: var(--bricks-color-red-600);
    --lncu-quiz-question-surface: transparent;                  /*Fläche der Frage: ohne Farbschema keine; Schema, Lernstraße und „Hintergrund der Frage“ setzen sie*/
    --lncu-quiz-question-padding: 0rem;                         /*Innenabstand der Frage, nur mit Fläche*/

    /*Maße der Abläufe und Bausteine*/
    --lncu-quiz-fade-duration: 0.3s;
    --lncu-quiz-fade-offset: 1rem;
    --lncu-quiz-scroll-offset: 10rem;
    --lncu-quiz-mark-size: 2.4rem;
    --lncu-quiz-range-thumb-size: 2.2rem;
    --lncu-quiz-range-track-height: 0.6rem;
    --lncu-quiz-result-min-height: 30rem;
    --lncu-quiz-fullscreen-max-width: 90rem;

    scroll-margin-top: var(--lncu-quiz-scroll-offset);
}

/*Direkt im Inhaltsbereich der Seite (#brx-content): eingerückt wie die Inhalte der Sektionen (Marker 4rem + Abstand 1rem), wie Hinweis und Tabs
  des Haupt-Plugins. Die Wurzel ist selbst die Box, deshalb margin statt padding; im Vollbild nicht*/
#brx-content > .lncu-quiz-block:not(.is-fullscreen):not(.is-fullscreen-fallback) {
    align-self: flex-start;
    width: calc(1100px - 5rem);
    max-width: none;
    margin: 0 0 1rem calc((100% - 1100px) / 2 + 5rem);
}

@media (max-width: 1100px) {
    #brx-content > .lncu-quiz-block:not(.is-fullscreen):not(.is-fullscreen-fallback) {
        width: calc(100% - 7rem);
        margin: 0 1rem 1rem 6rem;
    }
}

@media (max-width: 478px) {
    #brx-content > .lncu-quiz-block:not(.is-fullscreen):not(.is-fullscreen-fallback) {
        width: calc(100% - 2rem);
        margin: 0 1rem 1rem;
    }
}

/*Im Inhalt-Element: dessen Box genügt, kein zweiter Rahmen*/
.lncu-content-block .lncu-quiz-block {
    --lncu-quiz-padding: 0rem;
    border: none;
    border-radius: 0;
}

/*Fortschrittsleiste am oberen Rand der Box; Breite der Füllung über --lncu-quiz-progress (0 bis 1, setzt JS)*/
.lncu-quiz-block.has-progress-bar {
    padding-top: calc(var(--lncu-quiz-bar-height) + var(--lncu-quiz-bar-gap));
}

.lncu-quiz-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lncu-quiz-bar-height);
    overflow: hidden;
    border-radius: calc(var(--lncu-quiz-radius) - var(--lncu-quiz-frame-width)) calc(var(--lncu-quiz-radius) - var(--lncu-quiz-frame-width)) 0 0;
    background-color: var(--lncu-quiz-line);
}

.lncu-content-block .lncu-quiz-progress-bar {
    border-radius: var(--lncu-quiz-radius);
}

.lncu-quiz-progress-fill {
    display: block;
    width: calc(100% * var(--lncu-quiz-progress, 0));
    height: 100%;
    background-color: var(--lncu-quiz-accent);
    transition: width var(--lncu-quiz-fade-duration) ease;
}

/*Farbschemata: setzen nur Variablen, den äußeren Rahmen nicht; eigenes Schema (Control) geht dem Schema eines umgebenden Inhalt-Elements vor*/

/*Blau*/
:where(.lncu-content-block.blue) .lncu-quiz-block,
.lncu-quiz-block.blue {
    --lncu-quiz-surface: var(--bricks-color-blue-600);
    --lncu-quiz-surface-strong: var(--bricks-color-blue-500);
    --lncu-quiz-line: var(--bricks-color-blue-400);
    --lncu-quiz-hover: var(--bricks-color-blue-200);
    --lncu-quiz-primary: var(--bricks-color-blue-100);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-blue-100);
}

/*Rot*/
:where(.lncu-content-block.red) .lncu-quiz-block,
.lncu-quiz-block.red {
    --lncu-quiz-surface: var(--bricks-color-red-600);
    --lncu-quiz-surface-strong: var(--bricks-color-red-500);
    --lncu-quiz-line: var(--bricks-color-red-400);
    --lncu-quiz-hover: var(--bricks-color-red-300);
    --lncu-quiz-primary: var(--bricks-color-red-100);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-red-100);
}

/*Grün*/
:where(.lncu-content-block.green) .lncu-quiz-block,
.lncu-quiz-block.green {
    --lncu-quiz-surface: var(--bricks-color-green-600);
    --lncu-quiz-surface-strong: var(--bricks-color-green-500);
    --lncu-quiz-line: var(--bricks-color-green-400);
    --lncu-quiz-hover: var(--bricks-color-green-200);
    --lncu-quiz-primary: var(--bricks-color-green-100);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-green-100);
}

/*Gelb: yellow-100 taugt nicht als Fläche für Schrift, Knöpfe bleiben blau*/
:where(.lncu-content-block.yellow) .lncu-quiz-block,
.lncu-quiz-block.yellow {
    --lncu-quiz-surface: var(--bricks-color-yellow-600);
    --lncu-quiz-surface-strong: var(--bricks-color-yellow-500);
    --lncu-quiz-line: var(--bricks-color-yellow-400);
    --lncu-quiz-hover: var(--bricks-color-yellow-200);
    --lncu-quiz-primary: var(--bricks-color-blue-100);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-yellow-100);
}

/*Orange: Knöpfe in Akzentfarbe, „gewählt“ deshalb blau*/
:where(.lncu-content-block.orange) .lncu-quiz-block,
.lncu-quiz-block.orange {
    --lncu-quiz-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-surface-strong: var(--bricks-color-akzent-500);
    --lncu-quiz-line: var(--bricks-color-akzent-400);
    --lncu-quiz-hover: var(--bricks-color-akzent-200);
    --lncu-quiz-primary: var(--bricks-color-akzent-100);
    --lncu-quiz-selected: var(--bricks-color-blue-100);
    --lncu-quiz-selected-surface: var(--bricks-color-blue-500);
    --lncu-quiz-accent: var(--bricks-color-akzent-100);
}

/*Türkis*/
:where(.lncu-content-block.turkis) .lncu-quiz-block,
.lncu-quiz-block.turkis {
    --lncu-quiz-surface: var(--bricks-color-turkis-600);
    --lncu-quiz-surface-strong: var(--bricks-color-turkis-500);
    --lncu-quiz-line: var(--bricks-color-turkis-400);
    --lncu-quiz-hover: var(--bricks-color-turkis-200);
    --lncu-quiz-primary: var(--bricks-color-turkis-100);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-turkis-100);
}

/*Lila*/
:where(.lncu-content-block.violet) .lncu-quiz-block,
.lncu-quiz-block.violet {
    --lncu-quiz-surface: var(--bricks-color-violet-600);
    --lncu-quiz-surface-strong: var(--bricks-color-violet-500);
    --lncu-quiz-line: var(--bricks-color-violet-400);
    --lncu-quiz-hover: var(--bricks-color-violet-300);
    --lncu-quiz-primary: var(--bricks-color-violet-100);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-violet-100);
}

/*Grau*/
:where(.lncu-content-block.gray) .lncu-quiz-block,
.lncu-quiz-block.gray {
    --lncu-quiz-surface: var(--bricks-color-gray-600);
    --lncu-quiz-surface-strong: var(--bricks-color-gray-500);
    --lncu-quiz-line: var(--bricks-color-gray-400);
    --lncu-quiz-hover: var(--bricks-color-gray-300);
    --lncu-quiz-primary: var(--bricks-color-gray-100);
    --lncu-quiz-selected: var(--bricks-color-akzent-100);
    --lncu-quiz-selected-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-accent: var(--bricks-color-gray-100);
}

/*Fläche der Frage: in einer Lernstraße standardmäßig Akzent, mit Farbschema dessen Stufe 600 (geht der Lernstraße vor, weil es später steht);
  „Hintergrund der Frage“ setzt beide Variablen am Element selbst und geht allem vor*/
:where(.lncu-lernstrasse) .lncu-quiz-block {
    --lncu-quiz-question-surface: var(--bricks-color-akzent-600);
    --lncu-quiz-question-padding: 1rem;
}

:where(.lncu-content-block:is(.blue, .red, .green, .yellow, .orange, .turkis, .violet, .gray)) .lncu-quiz-block,
.lncu-quiz-block:is(.blue, .red, .green, .yellow, .orange, .turkis, .violet, .gray) {
    --lncu-quiz-question-surface: var(--lncu-quiz-surface);
    --lncu-quiz-question-padding: 1rem;
}

/*Beschriftungen: Bricks färbt label grau*/
.lncu-quiz-block label {
    color: var(--lncu-quiz-text);
}

/*Rich-Text in Frage und Einleitung übernimmt die Schrift des Quiz, auch wenn das Theme Absätze eigens setzt*/
.lncu-quiz-block :where(p, li) {
    font-size: inherit;
}

/*Kopf: Marker und Titel links, Knöpfe (Neustart, Vollbild) rechts*/
.lncu-quiz-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lncu-quiz-header > button:first-of-type {
    margin-left: auto;
}

/*Marker: kennzeichnet das Quiz wie die Marker der Sektionen (Fragezeichen, im Erwartungsmodus Glühbirne)*/
.lncu-quiz-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lncu-quiz-marker-size);
    height: var(--lncu-quiz-marker-size);
    margin-right: 0.2rem;
    border-radius: 50%;
    background-color: var(--lncu-quiz-accent);
    color: var(--bricks-color-white);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}

.lncu-quiz-marker svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.lncu-quiz-title {
    flex: 1;
    margin: 0;
    font-size: var(--lncu-quiz-title-size);
    line-height: 1.3;
}

/*Funktionsknöpfe (Neustart, Vollbild): dezent, damit Weiter und Prüfen führen; Selektor schlägt .lncu-quiz-button*/
.lncu-quiz-header .lncu-quiz-fullscreen,
.lncu-quiz-header .lncu-quiz-restart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-shrink: 0;
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 1rem;
    border: none;
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-surface-strong);
    color: var(--lncu-quiz-text);
}

.lncu-quiz-fullscreen:focus-visible,
.lncu-quiz-restart:focus-visible {
    outline: 3px solid var(--lncu-quiz-hover);
    outline-offset: 2px;
}

.lncu-quiz-fullscreen svg,
.lncu-quiz-restart svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor;
}

/*Neustart: beim ersten Antippen erscheint „Neu starten?“ zum Bestätigen*/
.lncu-quiz-restart-label {
    display: none;
    white-space: nowrap;
}

.lncu-quiz-header .lncu-quiz-restart.is-confirming {
    background-color: var(--bricks-color-red-100); /*wie „Neu beginnen“ in der Lernstraße*/
    color: var(--bricks-color-white);
}

.lncu-quiz-restart.is-confirming .lncu-quiz-restart-label {
    display: inline;
}

/*Builder: Formel ohne Formel-Element 2.0*/
.lncu-quiz-formula-missing {
    font-size: var(--lncu-quiz-small-size);
    color: var(--bricks-color-red-100);
}

.lncu-quiz-fullscreen-exit,
.lncu-quiz-block.is-fullscreen .lncu-quiz-fullscreen-enter {
    display: none;
}

.lncu-quiz-block.is-fullscreen .lncu-quiz-fullscreen-exit {
    display: block;
}

/*Vollbild: Inhalt mittig mit Höchstbreite; Ersatz ohne Fullscreen API liegt fest über dem Fenster.
  Kopf und Fußzeile bleiben stehen, nur der Mittelteil scrollt*/
.lncu-quiz-block.is-fullscreen {
    box-sizing: border-box;
    overflow: hidden;
    max-width: none;
    margin: 0;
    padding: 2rem max(2rem, calc((100% - var(--lncu-quiz-fullscreen-max-width)) / 2));
    border: none;
    border-radius: 0;
    background-color: var(--lncu-quiz-background);
}

.lncu-quiz-block.is-fullscreen .lncu-quiz-progress-bar {
    border-radius: 0;
}

.lncu-quiz-block.is-fullscreen-fallback {
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
}

html.lncu-quiz-no-scroll {
    overflow: hidden;
}

/*Vollbild: Alle rem-Maße wachsen mit dem Bildschirm; die Größe setzt und passt JS ein (Seite ist dann verdeckt)*/
html.lncu-quiz-fullscreen-active {
    font-size: var(--lncu-quiz-fullscreen-root-size);
}

/*Vollbild: Titel und Einleitung oben, Fußzeile unten; dazwischen scrollt die Frage (oder das Ergebnis) bei Bedarf.
  Eine kurze Frage steht senkrecht in der Mitte (margin: auto kürzt bei Überlänge nichts ab)*/
.lncu-quiz-block.is-fullscreen > .lncu-quiz-questions,
.lncu-quiz-block.is-fullscreen > .lncu-quiz-result {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.lncu-quiz-block.is-fullscreen > .lncu-quiz-questions > .lncu-quiz-question {
    margin-block: auto;
}

.lncu-quiz-block.is-fullscreen > .lncu-quiz-footer {
    flex: 0 0 auto;
}

/*Fragen*/
.lncu-quiz-questions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lncu-quiz-question {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lncu-quiz-question:focus {
    outline: none;
}

/*Fragetext fett, damit er sich von den Antworten abhebt*/
/*Frage: normal gedruckt wie Aufgaben (fett über „Frage fett“), Fläche und Innenabstand aus den Variablen*/
.lncu-quiz-question-text {
    margin: 0;
    padding: var(--lncu-quiz-question-padding);
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-question-surface);
}

.lncu-quiz-question-text > :first-child {
    margin-top: 0;
}

.lncu-quiz-question-text > :last-child {
    margin-bottom: 0;
}

.lncu-quiz-block.is-question-bold .lncu-quiz-question-text {
    font-weight: 700;
}

.lncu-quiz-block.is-question-centered .lncu-quiz-question-text {
    text-align: center;
}

/*Antworten: nur ein Rahmen für den Kern, ohne eigenes Layout*/
.lncu-quiz-answers {
    display: contents;
}

.lncu-quiz-question-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.lncu-quiz-block:not(.is-builder) .lncu-quiz-question-stem:empty {
    display: none;
}

/*Ablauf: vor dem Start nur die erste Frage, danach nur die aktive*/
.lncu-quiz-block:not(.is-builder):not(.is-ready) .lncu-quiz-question ~ .lncu-quiz-question {
    display: none;
}

.lncu-quiz-block.is-ready .lncu-quiz-question:not(.is-active) {
    display: none;
}

.lncu-quiz-block:not(.is-builder) .lncu-quiz-questions > :not(.lncu-quiz-question) {
    display: none;
}

.lncu-quiz-question.animate,
.lncu-quiz-result.animate {
    animation: lncu-quiz-fade-in var(--lncu-quiz-fade-duration) ease-out both;
}

@keyframes lncu-quiz-fade-in {
    from {
        opacity: 0;
        transform: translateY(var(--lncu-quiz-fade-offset));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/*Vollbild: ohne Überblenden; die Verschiebung ließ den scrollbaren Mittelteil kurz zittern*/
.lncu-quiz-block.is-fullscreen .lncu-quiz-question.animate,
.lncu-quiz-block.is-fullscreen .lncu-quiz-result.animate {
    animation: none;
}

/*Rückmeldung*/
.lncu-quiz-feedback {
    padding: 1rem;
    border-radius: var(--lncu-quiz-radius);
    border-left: 0.4rem solid var(--lncu-quiz-hover);
    background-color: var(--lncu-quiz-surface);
}

.lncu-quiz-feedback[hidden] {
    display: none;
}

/*Fußzeile*/
.lncu-quiz-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.lncu-quiz-footer[hidden] {
    display: none;
}

/*Navigationsknöpfe (Fußzeile und Ergebnis): 4rem hoch, so groß wie in der Lernstraße; die Knöpfe im Kopf bleiben bei 3.6rem*/
.lncu-quiz-footer .lncu-quiz-button,
.lncu-quiz-result .lncu-quiz-button {
    min-height: 4rem;
    padding: 1rem 1.4rem;
}

/*Fußzeile erst, wenn das Quiz läuft; im Builder immer, dort blättern Zurück und Weiter durch die Fragen*/
.lncu-quiz-block:not(.is-ready):not(.is-builder) .lncu-quiz-footer {
    display: none;
}

/*Automatisches Weiter: heller Balken füllt den Weiter-Knopf von links nach rechts, Dauer aus dem Control (setzt JS)*/
.lncu-quiz-next {
    position: relative;
    overflow: hidden;
}

.lncu-quiz-next::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.35);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/*Dark Mode: die Knopffläche ist hell, deshalb dunkelt der Balken ab statt aufzuhellen*/
html[data-brx-theme="dark"] .lncu-quiz-next::after {
    background-color: rgba(0, 0, 0, 0.25);
}

.lncu-quiz-next.is-counting::after {
    animation: lncu-quiz-countdown var(--lncu-quiz-auto-duration, 2s) linear forwards;
}

@keyframes lncu-quiz-countdown {
    to {
        transform: scaleX(1);
    }
}

.lncu-quiz-progress {
    margin: 0;
}

.lncu-quiz-block.is-single .lncu-quiz-progress {
    display: none;
}

.lncu-quiz-button {
    font: inherit;
    line-height: 1.2;
    padding: 1rem;
    border: none;
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-primary);
    color: var(--lncu-quiz-on-primary);
}

.lncu-quiz-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.lncu-quiz-button[hidden] {
    display: none;
}

.lncu-quiz-button:focus-visible {
    outline: 3px solid var(--lncu-quiz-hover);
    outline-offset: 2px;
}

/*Marken: Häkchen, Kreuz, Lösung; sichtbar über is-correct, is-wrong, is-solution am Elternelement*/
.lncu-quiz-marks {
    display: flex;
    justify-content: flex-end;
}

.lncu-quiz-mark {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lncu-quiz-mark-size);
    height: var(--lncu-quiz-mark-size);
    border-radius: 50%;
    margin-block: var(--lncu-quiz-mark-margin, -0.4rem); /*die Marke ist höher als eine Textzeile; so wächst die Antwort beim Auswerten nicht*/
}

.lncu-quiz-mark-icon {
    width: 55%;
    height: 55%;
    fill: currentColor;
}

.is-correct > .lncu-quiz-marks > .lncu-quiz-mark-correct {
    display: flex;
    background-color: var(--lncu-quiz-correct);
    color: var(--bricks-color-white);
}

.is-wrong > .lncu-quiz-marks > .lncu-quiz-mark-wrong {
    display: flex;
    background-color: var(--lncu-quiz-wrong);
    color: var(--bricks-color-white);
}

.is-solution > .lncu-quiz-marks > .lncu-quiz-mark-solution {
    display: flex;
    border: 2px dashed var(--lncu-quiz-correct);
    color: var(--lncu-quiz-correct);
}

/*Zweiter Versuch: Hinweis über der Fußzeile*/
.lncu-quiz-retry {
    margin: 0;
    padding: 1rem;
    border-radius: var(--lncu-quiz-radius);
    border-left: 0.4rem solid var(--lncu-quiz-selected);
    background-color: var(--lncu-quiz-surface);
    color: var(--lncu-quiz-text);
    font-weight: 700;
}

.lncu-quiz-retry[hidden] {
    display: none;
}

/*Erwartungsmodus: Hinweis „festgehalten“ wie der Hinweis zum zweiten Versuch; Hinweise zur Lösung entfallen*/
.lncu-quiz-recorded {
    margin: 0;
    padding: 1rem;
    border-radius: var(--lncu-quiz-radius);
    border-left: 0.4rem solid var(--lncu-quiz-primary);
    background-color: var(--lncu-quiz-surface);
    color: var(--lncu-quiz-text);
    font-weight: 700;
}

.lncu-quiz-recorded[hidden] {
    display: none;
}

.lncu-quiz-block.is-expectation .lncu-quiz-notice-solution {
    display: none;
}

/*Zurückblättern: Knopf unten links, Fortschritt und Weiter bleiben rechts*/
.lncu-quiz-previous {
    margin-right: auto;
}

.lncu-quiz-previous[hidden],
.lncu-quiz-review[hidden] {
    display: none;
}

/*Sicherheitsabfrage: vor der Auswertung, ersetzt solange „Antwort prüfen“*/
.lncu-quiz-confidence {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.lncu-quiz-confidence[hidden] {
    display: none;
}

.lncu-quiz-confidence-question {
    margin: 0;
    font-weight: 700;
}

.lncu-quiz-result-confidence {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lncu-quiz-result-confidence[hidden],
.lncu-quiz-result-hint[hidden] {
    display: none;
}

.lncu-quiz-result-hint {
    margin: 0;
}

/*Ergebnisseite: Mindesthöhe, Inhalt zentriert; im Vollbild füllt sie den Platz*/
.lncu-quiz-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    min-height: var(--lncu-quiz-result-min-height);
    text-align: center;
}

.lncu-quiz-block.is-fullscreen .lncu-quiz-result {
    flex: 1;
}

.lncu-quiz-result[hidden] {
    display: none;
}

.lncu-quiz-result:focus {
    outline: none;
}

.lncu-quiz-result-text {
    margin: 0;
    font-weight: 700;
}

/*Hinweise für Autorinnen und Autoren*/
.lncu-quiz-notice {
    margin: 0;
    padding: 1rem;
    border-radius: var(--lncu-quiz-radius);
    border-left: 0.4rem solid var(--bricks-color-red-100);
    background-color: var(--bricks-color-red-600);
    color: var(--bricks-color-red-100);
}

.lncu-quiz-block .lncu-quiz-question-orphan {
    display: none;
}

/*Nur für Screenreader*/
.lncu-quiz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*Builder: Neustart und Vollbild sind sichtbar wie im Frontend, aber ohne Funktion (wie in der Lernstraße)*/
.lncu-quiz-block.is-builder .lncu-quiz-header .lncu-quiz-button {
    pointer-events: none;
}

/*Builder: nur die aktuelle Frage; ohne Skript alle Fragen untereinander*/
.lncu-quiz-block.is-builder.is-slider-ready .lncu-quiz-questions > .is-slide:not(.is-current) {
    display: none;
}

.lncu-quiz-block.is-builder .lncu-quiz-questions > .is-slide:not(.lncu-quiz-question) {
    outline: 2px dashed var(--bricks-color-red-100);
    outline-offset: 2px;
}

.lncu-quiz-block.is-builder .lncu-quiz-questions > .is-slide:not(.lncu-quiz-question)::before {
    content: "Kein Frage-Element – wird im Frontend ausgeblendet";
    display: block;
    font-weight: 700;
    color: var(--bricks-color-red-100);
}

.lncu-quiz-block.is-builder .lncu-quiz-result,
.lncu-quiz-block.is-builder .lncu-quiz-retry,
.lncu-quiz-block.is-builder .lncu-quiz-recorded,
.lncu-quiz-block.is-builder .lncu-quiz-confidence {
    display: none;
}

/*Schieberegler für Skala und Schätzen: Balken und Rand des weißen Knopfs in der -100-Farbe des Schemas; Füllung über --lncu-quiz-range-fill (0 bis 1, setzt JS)*/
.lncu-quiz-range {
    --lncu-quiz-range-fill: 0;
    --lncu-quiz-range-fill-stop: calc(var(--lncu-quiz-range-thumb-size) / 2 + (100% - var(--lncu-quiz-range-thumb-size)) * var(--lncu-quiz-range-fill));

    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: var(--lncu-quiz-range-thumb-size);
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

.lncu-quiz-range:focus {
    outline: none;
}

.lncu-quiz-range:focus-visible {
    outline: 3px solid var(--lncu-quiz-hover);
    outline-offset: 2px;
}

.lncu-quiz-range:disabled {
    cursor: default;
}

.lncu-quiz-range::-webkit-slider-runnable-track {
    height: var(--lncu-quiz-range-track-height);
    border-radius: var(--lncu-quiz-radius);
    background: linear-gradient(to right, var(--lncu-quiz-accent) var(--lncu-quiz-range-fill-stop), var(--lncu-quiz-line) var(--lncu-quiz-range-fill-stop));
}

.lncu-quiz-range::-moz-range-track {
    height: var(--lncu-quiz-range-track-height);
    border-radius: var(--lncu-quiz-radius);
    background: linear-gradient(to right, var(--lncu-quiz-accent) var(--lncu-quiz-range-fill-stop), var(--lncu-quiz-line) var(--lncu-quiz-range-fill-stop));
}

.lncu-quiz-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--lncu-quiz-range-thumb-size);
    height: var(--lncu-quiz-range-thumb-size);
    margin-top: calc((var(--lncu-quiz-range-track-height) - var(--lncu-quiz-range-thumb-size)) / 2);
    border: 3px solid var(--lncu-quiz-accent);
    border-radius: 50%;
    background-color: var(--bricks-color-white);
}

.lncu-quiz-range::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--lncu-quiz-range-thumb-size);
    height: var(--lncu-quiz-range-thumb-size);
    border: 3px solid var(--lncu-quiz-accent);
    border-radius: 50%;
    background-color: var(--bricks-color-white);
}

/*Media Queries*/
@media (prefers-reduced-motion: reduce) {
    .lncu-quiz-block *,
    .lncu-quiz-question.animate,
    .lncu-quiz-result.animate {
        transition: none;
        animation: none;
    }
}

@media print {
    /*Bedienelemente*/
    .lncu-quiz-footer,
    .lncu-quiz-retry,
    .lncu-quiz-recorded,
    .lncu-quiz-confidence,
    .lncu-quiz-fullscreen,
    .lncu-quiz-restart,
    .lncu-quiz-progress-bar,
    .lncu-quiz-result .lncu-quiz-button {
        display: none !important;
    }

    .lncu-quiz-question {
        break-inside: avoid;
    }

    /*„Alle Fragen im PDF-Druck“: alle Fragen untereinander statt nur der aktuellen, ohne Ergebnisseite*/
    .lncu-quiz-block.is-print-all .lncu-quiz-question {
        display: flex !important;
    }

    .lncu-quiz-block.is-print-all .lncu-quiz-result {
        display: none !important;
    }
}