.quiz img{width:45%; display:inline-block;}
.quiz .start img{animation: bounceInRight 2s forwards;}
.quiz .question img{opacity:0; animation: doorCloseLeft 2s 1s forwards;}
.quiz .screen .text{width: 100%;}
.quiz .start .text{width:50%; display:inline-block; margin-right:5%;}
.quiz .hasimage {width: 50%; display: inline-block; margin-right: 5%; vertical-align: top;}
.quiz .question .text, .feedback .text {margin-bottom: 1rem;}
.quiz .question .text{animation: appearOpacityY 2s forwards;}
.quiz ol.answers {padding-left: 0px;}
.quiz li.answer {list-style-type: none;}
.quiz .answers{animation: pushReleaseFromLeft 1s forwards;}
.quiz .answer {cursor:pointer; background: var(--pogo-greenblue); background: linear-gradient(90deg, var(--pogo-greenblue) 0%, var(--pogo-darkestblue) 100%); color: #ffffff; padding: 0.25rem 0.5rem; border-radius: 0.4rem; margin-bottom: 0.25rem;}
.quiz .answer:hover {transform: scale(1.01);}
.quiz .answer .text{width: 100%; display: inline-block; margin-right: 0px; box-shadow: unset; background-color: unset; padding: 1rem; animation: unset; margin-bottom:0px;}
.quiz .answer .text p {margin: 0px;} 
.text.wrong p:first-of-type {animation: electricity 1s forwards;}
.text.correct p:first-of-type {animation: heartbeatFast 2s forwards;}

@media screen and (max-width: 667px){

	.quiz img{width:100%; margin: 0.5rem 0px;}
	.quiz .start .text{width:100%; margin-right:0px;}
	.quiz .hasimage {width: 100%; margin-right: 0px;}
	.quiz .question img{opacity:0; animation: doorCloseLeft 1s  forwards;}
}

/* OUD
.progressbar {width: 50%; margin-left: auto; margin-right: auto; margin-top:1rem; margin-bottom:1rem; padding-left:0px;}
.progress-item{display: inline-block; margin-right: 0px; width: 2rem; height: 2rem; text-align: center; padding-top: 0.5rem; border: solid 1px #000000; line-height: 100%; border-radius: 1rem; } 
.progress-line{border-bottom: solid 1px #000000; display: inline-block; line-height: 100%; height: 1rem; vertical-align: top;}
.progress-item-correct{color:#ffffff; background-color:green;}
.progress-item-wrong{color:#ffffff; background-color:red;}
*/


.progress {font-size: 0.7rem; text-align: right;}
.quiz .feedback .introduction {display: none;}

.text.wrong p:first-of-type {background-color: red; padding: 1rem; color: #ffffff;}
.text.correct p:first-of-type {background-color: green; padding: 1rem; color: #ffffff;}

/* OUD
@media screen and (max-width: 667px){
.progressbar {width: 100%;}
}
*/

/* Styling uit live site */


a.startbutton.button {
	background-color: transparent;
    border-radius: 0px;
    color: #154273;
    text-decoration: none;
    margin-right: 1rem;
    font-family: "RO";
    font-weight: bold;
    line-height: 100%;
    display: inline-block;
    cursor: pointer;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: auto;
    font-size: 1.1rem;
    border: solid 2px #22426f;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;


	width: calc(100% - 4px);
    margin-bottom: 0.5rem;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
}

a.startbutton.button:hover {
	box-shadow: none;
    text-decoration: underline;
	background-color: #ffffff;
}

a.startbutton.button:focus,
a.startbutton.button:focus-visible {
    border: dashed 2px #0115ff;
    background-color: #ffffff;
}


/* Progress bar styling */

.quiz ol.progressbar {
    list-style: none;
    display: none;              /* JS doet .show() bij de eerste vraag */
    width: 100%;
    margin: 2rem 0;
    padding-left: 0;
}

.quiz .progress-item {
    list-style: none;
    display: inline-block;
    background-color: #ffffff;
    margin-right: 0;
    width: 2rem;
    height: 1.5rem;
    border-radius: 1rem;
    color: #01689b;
    text-align: center;
    padding-top: 0.5rem;
    border: solid 1px #01689b;
    line-height: 100%;
}

.quiz .progress-line {
    border-bottom: solid 1px #01689b;
    display: inline-block;
    line-height: 100%;
    height: 1rem;
    vertical-align: top;
    margin-left: -1.6px;
}

.quiz .progress-item-active {
    background-color: #01689b;
    color: #ffffff;
}

.quiz .progress-item-correct {
    vertical-align: top;
    background-color: #39870c;
    border: 1px #39870c solid;
    color: transparent;         /* nieuw: JS leegt het cijfer niet meer */
    background-image: url(../images/icon_check_wit.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%;
}

.quiz .progress-item-wrong {
    vertical-align: top;
    background-color: #d52b1e;
    border: 1px #d52b1e solid;
    color: transparent;
    background-image: url(../images/icon_sluiten_wit.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%;
}

/* focus/hover, gelijk aan live */
.quiz .progress-item:hover,
.quiz .progress-item:focus,
.quiz .progress-item:focus-visible {
    outline-offset: 2px !important;
    outline: 2px dashed #0115ff !important;
}
.quiz ol.progressbar:focus {
    background-color: rgba(255, 255, 255, 0.9);
    outline-offset: 2px !important;
    outline: 2px dashed #0115ff !important;
    border-color: inherit !important;
}

@media (max-width: 1240px) {
    .quiz .progress-line { margin-left: -3px; }
}

/* Vraagtekst — zelfde look als h1.pogotools_quiz__question_question op live */
.quiz .question-content > .question.text {
    box-sizing: content-box;
    width: 90%;
    padding: 1rem 5%;
    margin: 2.9rem 0 1rem;
    background-color: #8FCAE7;
    color: #154273;
    font-family: "RO", "RO Sans", Verdana, Arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: normal;
    text-align: left;
}
.quiz .question-content > .question.text p { margin: 0; }

/* :hover bewust weggelaten: dit is geen interactief element, een streepjesrand
   onder de muis leest als een focusrand. Zie het @supports-blok onderaan. */
.quiz .question-content > .question.text:focus,
.quiz .question-content > .question.text:focus-visible {
    outline: 2px dashed #0115ff;
    outline-offset: 2px;
}

/* ============================================================
   Answer rows — overgenomen van live (pogotools_quiz__answer_rows)
   Bron: site.css L1853-1902, L1990-2019, L2082-2103, L2147, L3287
   Waarden hieronder zijn de UITGEREKENDE cascade van live.
   ============================================================ */

/* ol.pogotools_quiz__answer_rows  ->  .quiz .answers
   (let op: true/false-template gebruikt een <div class="answers">,
   dus geen `ol.` in de selector) */
.quiz .answers {
    list-style: none;
    float: left;
    width: 80%;
    margin-top: 0;
    padding: 2rem 0;
}

/* li.pogotools_quiz__answer_row  ->  .quiz li.answer
   Overschrijft de gradient/padding/border-radius uit het blok hierboven. */
.quiz li.answer {list-style: none; float: left; box-sizing: border-box;
    width: 100%; margin-left: 0; margin-bottom: 1rem; padding: 0; padding-right:0.5rem;
    border: solid transparent 2px;
    border-radius: 0; background: none;
    background-color: #b6ddef;
    background-image: none;
    color: #000000; font-size: 1rem;
    cursor: pointer;
}

/* live kent geen scale-hover; alleen een randkleur */
.quiz li.answer:hover,
.quiz li.answer:focus,
.quiz li.answer:focus-visible {
    border: solid #154273 2px;
    transform: none;
}

/* .pogotools_quiz__answer_number  ->  .quiz .answer .answer-number
   Live verbergt het cijfer, maar reserveert de ruimte wel in .text. */
.quiz .answer .answer-number {
    display: none;
    width: 1px;
    height: 1px;
    font-size: 0.1rem;
    color: #9ec8d3;
    padding: 0;
    margin: 0;
}

/* .pogotools_quiz__answer_answer  ->  .quiz .answer .text */
.quiz .answer .text {
    float: left;
    display: block;
    width: calc(100% - 50px - 2rem);
    margin: 0;
    padding: 0.75rem 0;
    background: none;
    background-color: unset;
    box-shadow: unset;
    animation: unset;
}

/* .pogotools_quiz__answer_answer p */
.quiz .answer .text p {
    position: relative;
    padding-left: 2.75rem;
    padding-bottom: 0;
    margin: 0;
    font-size: 1.25rem;
    color: #154273;
}

/* blauw pijltje; --delta_rechts staat op :root in bd.css */
.quiz .answer .text p::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.2rem;
    width: 16px;
    height: 16px;
    padding-bottom: 0;
    background-color: #01689b;
    -webkit-mask-image: var(--delta_rechts);
    mask-image: var(--delta_rechts);
    transition: 0.5s;
}

/* antwoord-afbeeldingen niet door .quiz img {width:45%} laten pakken */
.quiz .answer img {
    width: auto;
    max-width: 100%;
}

@media (max-width: 400px) {
    .quiz .answer .text { width: 100%; }
}

/* ============================================================
   Feedbackscherm — overgenomen van live
   (pogotools_quiz__question_feedback + pogotools_quiz__button)
   Bron: site.css L1824, L1904-1916, L1942-1980, L2032, L2066-2076,
         L2150-2166, L2194-2199, L2416-2420, L3309-3318
   Waarden zijn de UITGEREKENDE cascade van live.
   ============================================================ */

/* div#pogotools_quiz__question_feedback_screen__wrapper
   -> position:relative is nodig voor de absoluut geplaatste
      feedback-afbeelding hieronder */
.quiz .feedback.screen {
    position: relative;
    margin-top: 0;
    padding-bottom: 2rem;
    background-color: #ffffff;
}

/* h1.pogotools_quiz__question_question — het feedbackscherm toont op
   live dezelfde blauwe vraagkop als het vraagscherm. De bestaande regel
   (.quiz .question-content > .question.text) pakt hier NIET, omdat de
   vraag in het feedbacksjabloon in .feedback staat i.p.v. .question-content. */
.quiz .feedback .question.text {
    box-sizing: content-box;
    width: 90%;
    padding: 1rem 5%;
    margin: 2.9rem 0 1rem;
    background-color: #8FCAE7;
    color: #154273;
    font-family: "RO", "RO Sans", Verdana, Arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: normal;
    text-align: left;
}
.quiz .feedback .question.text p { margin: 0; }

/* :hover bewust weggelaten, zie de gelijksoortige regel bij .question-content */
.quiz .feedback .question.text:focus,
.quiz .feedback .question.text:focus-visible {
    outline: 2px dashed #0115ff;
    outline-offset: 2px;
}

/* p.pogotools_quiz__question_feedback -> .text.correct / .text.wrong
   Overschrijft .quiz .screen .text{width:100%} en .feedback .text{margin-bottom:1rem} */
.quiz .feedback .text.correct,
.quiz .feedback .text.wrong {
    width: 60%;
    margin: 2rem 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #154273;
    font-size: 1.25rem;
    line-height: 1.375;
}

.quiz .feedback .text.correct p,
.quiz .feedback .text.wrong p {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: #154273;
}
.quiz .feedback .text.correct p:last-child,
.quiz .feedback .text.wrong p:last-child { margin-bottom: 0; }

/* p[tabindex]:focus-visible uit site.css L3309-3318 */
.quiz .feedback .text.correct:focus,
.quiz .feedback .text.correct:focus-visible,
.quiz .feedback .text.wrong:focus,
.quiz .feedback .text.wrong:focus-visible {
    outline: 2px dashed #0115ff;
    outline-offset: 2px;
}

/* Live maakt GEEN kleurverschil tussen goed/fout: de groene/rode
   achtergrond uit site.css L1909/L1913 wordt op L2032 gewist met
   `background-color: unset !important`. Onderstaande regels halen de
   rode/groene blokken + animaties uit dit bestand (L16-17, L39-40) weg. */
.quiz .feedback .text.correct p:first-of-type,
.quiz .feedback .text.wrong p:first-of-type {
    background-color: transparent;
    color: #154273;
    padding: 0;
    animation: none;
}

/* div#…__question_feedback_screen__wrapper img
   16% breed, absoluut rechtsonder */
.quiz .feedback.screen .text.correct img,
.quiz .feedback.screen .text.wrong img {
    width: 16%;
    position: absolute;
    right: 0;
    bottom: 2rem;
    display: block;
    margin: 0;
}

/* ---- a.pogotools_quiz__button -> "Volgende vraag" / resultatenknop ----
   Let op: padding-left/right komen op 0 uit (L1946 `0px !important` op
   a.pogotools_quiz__button verslaat L1979 `0.75rem !important` op
   .pogotools_quiz__button), en de kleur is #22426f, niet #154273. */
.quiz .feedback.screen a.button {
    display: inline-block;
    box-sizing: border-box;
    min-width: 20%;
    height: auto;
    margin-right: 1rem;
    padding: 1.4rem 0;
    background-color: transparent;
    border: solid 2px #22426f;
    border-radius: 0;
    color: #22426f;
    font-family: "RO", "RO Sans", Verdana, Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.quiz .feedback.screen a.button:hover,
.quiz .feedback.screen a.button:focus,
.quiz .feedback.screen a.button:focus-visible {
    text-decoration: underline;
}
.quiz a.button:hover,
.quiz a.button:focus,
.quiz a.button:focus-visible { 
    box-shadow: none;
}


/* NIET op live aanwezig — zie punt 3 hieronder. Zichtbare focus. */
.quiz .feedback.screen a.button:focus,
.quiz .feedback.screen a.button:focus-visible {
    border: dashed 2px #0115ff;
    background-color: #ffffff;
}

@media (max-width: 767px) {
    .quiz .feedback.screen a.button {
        min-width: unset; width:auto;
        padding-left: 1rem; padding-right: 1rem;
    }
}

/* Afwijking van live: live houdt 60% ook op mobiel vast. */
@media screen and (max-width: 667px) {
    .quiz .feedback .text.correct,
    .quiz .feedback .text.wrong { width: 100%; }
    .quiz .feedback.screen .text.correct img,
    .quiz .feedback.screen .text.wrong img {
        width: 100%;
        position: static;
        margin: 1rem 0;
    }
}

/* ============================================================
   Vraagtekst in het FEEDBACKSCHERM
   Live: h1.pogotools_quiz__question_question
   Bron: bd.css (h1,.h1) + site.css L1694-1699, L2021-2026,
         L2050-2062, L2165-2167, L3272-3276
   Nieuw: div.feedback.screen > div.feedback > div.question.text
   ============================================================ */

.quiz .feedback.screen > .feedback > .question.text {
    display: block;
    box-sizing: content-box;      /* bd.css zet GEEN universele border-box */
    width: 90%;
    padding: 1rem 5%;             /* 90% + 5% + 5% = 100% */
    margin: 2.9rem 0 1rem;        /* margin-top komt op live uit bd.css h1 */
    border: 0;
    background-color: #8FCAE7;
    color: #154273;
    font-family: "RO", "RO Sans", Verdana, Arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 700;             /* op live uit bd.css h1,.h1 */
    line-height: normal;
    text-align: left;
    animation: none;              /* geen appearOpacityY zoals op het vraagscherm */
}

/* {{{question_text}}} is rich text uit de editor en zit meestal in een <p>;
   op live is het platte tekst in de h1 zelf. */
.quiz .feedback.screen > .feedback > .question.text p {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}
.quiz .feedback.screen > .feedback > .question.text p + p {
    margin-top: 0.5rem;
}

/* site.css L1694-1699. :hover bewust weggelaten, zie .question-content hierboven. */
.quiz .feedback.screen > .feedback > .question.text:focus,
.quiz .feedback.screen > .feedback > .question.text:focus-visible {
    outline: 2px dashed #0115ff;
    outline-offset: 2px;
}

/* site.css L3272-3276 — op live geërfd van #pogotools_quiz__wrapper */
@media (max-width: 640px) {
    .quiz .feedback.screen > .feedback > .question.text {
        word-break: break-word;
        hyphens: auto;
    }
}


/* ------------------------------------------------------------
   Header-intro (start- en eindscherm)
   De mustaches hebben weer de live-wrapper
   #header-container.bg-lichtstblauw > .container (site.css L158);
   zonder die flex-wrapper is #header-intro-right 0px hoog.
   Live: geen animatie, geen marge, icoon op 100% van zijn kolom.
   Breedte/hoogte van de headerafbeelding komt uit site.css
   (#header-intro-image img: min-width/min-height 100% + ≤980px regels),
   dus hier géén width zetten.
   ------------------------------------------------------------ */
.quiz #header-intro-image img {
    animation: none;
}

.quiz #intro-image-new img {
    width: 100%;
    animation: none;
}

@media screen and (max-width: 667px) {
    .quiz #header-intro-image img {
        margin: 0;
    }
}


/* ------------------------------------------------------------
   Vraagscherm: afbeeldingen zichtbaar
   L3/L24 zetten opacity:0 + doorCloseLeft, maar animations.css
   (met de keyframes) wordt in dit theme niet geladen → bleef 0.
   Live: geen animatie.
   ------------------------------------------------------------ */
.quiz .question.screen img {
    opacity: 1;
    animation: none;
}

/* div#pogotools_quiz__question_screen__wrapper img (site.css L2065)
   16% breed, absoluut rechtsonder */
.quiz .question.screen {
    position: relative;
}

/* live: .pogotools_quiz_screen {float:left} omsluit de gefloate
   antwoordenlijst; hier ol.answers ook float, dus scherm clearen.
   Anders is .question.screen alleen zo hoog als de vraagtekst en
   schiet de absolute afbeelding (bottom:3rem) omhoog. */
.quiz .question.screen::after {
    content: "";
    display: table;
    clear: both;
}

.quiz .question.screen > img {
    width: 16%;
    position: absolute;
    right: 0;
    bottom: 3rem;
    display: block;
    margin: 0;
}


/* ---------------------------------------------------------------------------
   Focusindicatie alleen voor toetsenbordgebruikers (WCAG 2.4.7 / 2.4.11).

   De :focus-regels hierboven blijven staan: die gelden als terugval voor
   browsers zonder :focus-visible. Binnen @supports halen we de indicatie weer
   weg zodra de focus NIET van het toetsenbord komt. Zo verliest geen enkele
   browser ooit zijn focusindicatie -- kent hij :focus-visible niet, dan blijft
   simpelweg het oude gedrag gelden (indicatie altijd zichtbaar).

   Let op: de quiz verzet de focus programmatisch (setFocus() in quiz.js). De
   browser onthoudt daarbij of de laatste interactie van toetsenbord of muis
   kwam, dus :focus-visible blijft ook op die elementen correct werken.

   :not(:hover) staat erbij waar :hover dezelfde opmaak deelt; zonder dat
   verdwijnt de hover-styling zodra het element ook focus heeft.
   --------------------------------------------------------------------------- */
@supports selector(:focus-visible) {

    /* startknop -> terug naar basisrand/-achtergrond */
    a.startbutton.button:focus:not(:focus-visible):not(:hover) {
        border: solid 2px #22426f;
        background-color: transparent;
    }

    /* voortgangsbolletje (deelt :hover) */
    .quiz .progress-item:focus:not(:focus-visible):not(:hover) {
        outline: none !important;
    }

    /* voortgangsbalk zelf (had alleen :focus, dus ook op muisklik zichtbaar) */
    .quiz ol.progressbar:focus:not(:focus-visible) {
        outline: none !important;
        background-color: transparent;
    }

    /* de vraagtekstblokken. :hover is uit die regels gehaald, dus hier geen
       :not(:hover) nodig. Vangt ook div[tabindex]:focus uit site.css af. */
    .quiz .question-content > .question.text:focus:not(:focus-visible),
    .quiz .feedback .question.text:focus:not(:focus-visible),
    .quiz .feedback.screen > .feedback > .question.text:focus:not(:focus-visible) {
        outline: none !important;
    }

    /* antwoordrij (deelt :hover) -> terug naar de transparante basisrand */
    .quiz li.answer:focus:not(:focus-visible):not(:hover) {
        border: solid transparent 2px;
    }

    /* feedbacktekst goed/fout */
    .quiz .feedback .text.correct:focus:not(:focus-visible),
    .quiz .feedback .text.wrong:focus:not(:focus-visible) {
        outline: none !important;
    }

    /* knoppen in het feedbackscherm (de underline-regel deelt :hover) */
    .quiz .feedback.screen a.button:focus:not(:focus-visible):not(:hover) {
        border: solid 2px #22426f;
        background-color: transparent;
        text-decoration: none;
    }

    /* NIET teruggedraaid: .quiz a.button{box-shadow:none} bij focus/hover.
       Dat haalt een schaduw weg in plaats van een indicatie te tekenen;
       terugdraaien zou de schaduw onder de muis weer laten opduiken. */
}

@media (max-width: 840px) {
    .quiz .answers {width: 90%;}
    .quiz .question.screen, .quiz .answer .text p {hyphens: auto;}
}