/* ============================================================
   POLL — belastingles
   Basis (blueprint) + styling overgenomen van de live site.

   Live bron: belastingles.nl/polls/polls-belasting-en-belastingdienst
   (oude cms6 pogotools-widget). Alle live poll-CSS staat in
   assets/css/site.css in vier gelabelde blokken:
     COMBINED_POLL_DIV.CSS    ~L2592-2680
     COMBINED_POLL_OWNER.CSS  ~L2698-2762
     POLL_DIV.CSS             ~L2765-2978
     POLL_OWNER.CSS           ~L2982-3120  <- visueel doel
     TOEVOEGINGEN/WCGA        ~L3140-3320
   Die regels zijn inmiddels DOOD: de nieuwe markup gebruikt geen
   enkele pogotools_*-selector meer. Ze staan hieronder alleen als
   herkomstverwijzing.

   Alles is gescoped op div.poll (root uit de blueprint-blade,
   <div class="poll {block_type}" id="poll_{id}">). Zonder die prefix
   lekken fieldset/legend/dt/.answer/.controls over de hele pagina.

   LET OP het element: page/poll.blade.php zet ook
   <body class="page poll">, dus een kale .poll raakt de HELE pagina
   (menu, kruimelpad, footer). Daarom overal div.poll.

   LET OP: poll.js toont/verbergt schermen met inline display
   (jQuery("#poll_{id} .screen").hide()). Zet hier nooit `display`
   op .screen.
   ============================================================ */


/* ------------------------------------------------------------
   1. Wortel en schermen
   Live: #pogotools_poll__wrapper (site.css L3000-3004)
   ------------------------------------------------------------ */

div.poll {
    --poll-gutter: 2.75rem;         /* live gebruikte 2.75rem overal als binnenmarge */

    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #eef7fb;
    color: #154273;

    /* Lopende tekst = "RO Sans" (regular), net als body in bd.css/site.css.
       LET OP: de @font-face 'RO' in site.css L17-22 laadt ALLEEN
       ROsanswebtextbold.ttf, dus "RO" maakt alles vet. Die familie is
       hier bewust beperkt tot de koppen (.title h1 / .question.text),
       precies zoals live via .site-container-poll h1 {font-family:"RO"}. */
    font-family: "RO Sans", Verdana, Arial, sans-serif;
}

/* bd.css zet alleen op ::before/::after border-box, niet op * zelf.
   Live rekende overal met content-box + calc(100% - 5.5rem); met
   border-box wordt dat gewoon width:100% + padding. */
div.poll *,
div.poll *::before,
div.poll *::after { box-sizing: border-box; }

div.poll .screen {
    position: relative;
    padding-bottom: 0.5rem;
}

div.poll img {
    max-width: 100%;
    height: auto;
}


/* ------------------------------------------------------------
   2. Start- en introductiescherm
   Live: .pogotools_poll__wrapper_left (55%) + image_wrapper (45%)
   Bron: site.css L2750, L2754, L3006, L3040, L3049
   ------------------------------------------------------------ */

div.poll .start-body::after {
    content: "";
    display: table;
    clear: both;
}

/* .pogotools_poll__wrapper_left {width:55% !important} */
div.poll .start-body.hasimage .start-introduction {
    float: left;
    width: 55%;
}

/* div#pogotools_combined_poll__start_screen__image_wrapper
   {background-position:center right; width:45% !important}
   Live gebruikte een background-image div, nieuw is het een <img>. */
div.poll .start-image {
    float: right;
    width: 45%;
    padding-left: var(--poll-gutter);
}

div.poll .start-image img {
    display: block;
    width: 100%;
    max-height: 24rem;
    object-fit: contain;
    object-position: center right;
}

/* div#pogotools_combined_poll_start_screen__title
   {background-color:#b6ddef; padding-left:2.75rem; padding-top:2.75rem;
    padding-bottom:1rem; margin-bottom:2rem}  (site.css L2726) */
div.poll .title {
    margin-bottom: 2rem;
    padding: var(--poll-gutter) var(--poll-gutter) 1rem;
    background-color: #b6ddef;
}

/* h1#pogotools_combined_poll__start_screen__title_text +
   #…__start_screen__title_text {font-size:2.25rem; font-weight:bold;
   line-height:1.25; color:#154273}  (site.css L2705, L3020, L3140-3155) */
div.poll .title h1 {
    margin: 0 0 1rem;               /* live: h1 margin-bottom 1rem + wrapper padding-bottom 1rem */
    color: #154273;
    font-family: "RO", "RO Sans", Verdana, Arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
}

/* p#pogotools_combined_poll__start_screen__introduction_text
   {background:transparent; padding-left/right:2.75rem; color:#154273;
    font-size:1.25rem; padding-bottom:2rem}  (site.css L2727, L3025) */
div.poll .start-introduction > .text {
    width: 100%;
    padding: 0 var(--poll-gutter) 2rem;
    background-color: transparent;
    color: #154273;
    font-size: 1.25rem;
    line-height: 1.375;
}

div.poll .start-introduction > .text p { margin: 0 0 1rem; font-size: inherit; color: inherit; }
div.poll .start-introduction > .text p:last-child { margin-bottom: 0; }

/* De .start-button-maten staan verderop, NA de basis .button-regel —
   anders wint `.button {width:auto}` op volgorde (zelfde gewicht). */


/* ------------------------------------------------------------
   3. Groepsgrootte (niet op live aanwezig — nieuwe CMS-functie)
   Alleen zichtbaar als poll.groupsize.force aanstaat.
   ------------------------------------------------------------ */

div.poll .register-groupsize {
    margin-top: 1rem;
    padding: 0 var(--poll-gutter) 2rem;
    font-size: 1.25rem;
}

div.poll .register-groupsize legend {
    float: none;
    width: auto;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}


/* ------------------------------------------------------------
   4. Vraagbanner
   Live: div#pogotools_poll_question_screen__question +
         p#…__question_screen__question_text
   {background-color:#8FCAE7 !important; color:#154273;
    padding: 2.75rem; font-size:2.25rem; font-weight:bold}
   Bron: site.css L2741-2742, L3008-3010, L3141-3151
   ------------------------------------------------------------ */

div.poll .question.text {
    width: 100%;
    margin: 0 0 1rem;
    padding: var(--poll-gutter);
    background-color: #8FCAE7;
    color: #154273;
    font-family: "RO", "RO Sans", Verdana, Arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
}

/* {{{question}}} is tiptap-rich-text en komt in een <p>; op live was
   het platte tekst in de h1 zelf. */

div.poll .question.text h1 {margin-top: 0px; margin-bottom: 0px;}

div.poll .question.text p { margin: 0; font: inherit; color: inherit; }
div.poll .question.text p + p { margin-top: 0.5rem; }

/* De afbeelding staat NIET op het vraag-/resultaat-/vergelijkscherm:
   live had div#pogotools_poll__question_screen__image_wrapper altijd
   op display:none (de regel in site.css L2751 was dood). De poll-
   afbeelding komt alleen op het introscherm — zie .start-image. */


/* ------------------------------------------------------------
   5. Antwoordrijen met teller (- / waarde / +)
   Live: .pogotools_poll__answer_row {color:#154273; font-size:1.5rem;
         line-height:2rem; padding-left/right:2.75rem}
         + div.pogotools_poll__answer_row fieldset legend {width:50%}
         + …__answer_row_group_plusmin button {background:#154273;
           color:#fff; 3vw; border:none; border-radius:0}
   Bron: site.css L2630, L2745-2746, L3123, L3211-3253, L3279, L3093-3098
   vw -> rem omgerekend op 1440px viewport (3vw = 43px ~ 2.75rem).
   ------------------------------------------------------------ */

/* site.css L2628-2629 zet hier column-count:2, maar live RENDERT
   één kolom (de legend van 50% + de teller passen samen niet in een
   halve kolom). We volgen het live-beeld: één kolom. */
div.poll .question.screen .answers {
    margin-top: 2rem;
    margin-bottom: 1rem;
    column-count: 1;
}

div.poll .answer {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.2rem;          /* live: .pogotools_poll__answer_row */
    padding: 0 var(--poll-gutter);
    color: #154273;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: left;
    break-inside: avoid;
}

div.poll fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/* div.pogotools_poll__answer_row fieldset legend {width:50%; float:left;
   vertical-align:middle}  (site.css L3211-3216) */
div.poll .answer legend {
    display: inline-block;
    float: left;
    width: 50%;
    padding: 0;
    font-size: inherit;
}

/* div.pogotools_poll__answer_row_group_plusmin {float:none !important} */
div.poll .insert-answers {
    display: inline-block;
    float: none;
    white-space: nowrap;
}

div.poll .insert-answers button {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: #154273;
    color: #ffffff;
    font-family: inherit;
    font-size: 2rem;
    line-height: 2.75rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

div.poll .insert-answers button:hover,
div.poll .insert-answers button:focus,
div.poll .insert-answers button:focus-visible {
    outline: solid 4px #0127FF;
    outline-offset: -4px;
    background-color: #ffffff;
    color: #154273;
}

/* input.pogotools_poll__answer {color:#004495; font-size:2.4vw;
   width:6vw; text-align:center; float:none; vertical-align:middle}
   (site.css L3246-3254) */
div.poll .answer-input,
div.poll .groupsize-value {
    display: inline-block;
    width: 5rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #004495;
    font-family: inherit;
    font-size: 2rem;
    text-align: center;
    vertical-align: middle;
}


/* ------------------------------------------------------------
   6. Knoppen
   Live: .pogotools_poll__button {background:transparent;
         border:solid 2px #22426f; border-radius:0; color:#22426f;
         font-weight:bold; font-size:1.1rem; line-height:100%;
         padding:1.5rem 1rem; margin-right:1rem}
   Bron: site.css L3013-3015, L3090, L2668-2673
   Zelfde vorm als .calltoaction-new (site.css L582-628) en als
   a.startbutton.button in quiz.css.
   ------------------------------------------------------------ */

div.poll .button {
    display: inline-block;
    width: auto;
    height: auto;
    margin-right: 1rem;
    padding: 1.5rem 1rem;
    border: solid 2px #22426f;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    color: #22426f;
    font-family: inherit;           /* live: .pogotools_poll__button erft "RO Sans" */
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* a#…__button:hover/:focus {text-decoration: underline}  (site.css L3090) */
div.poll .button:hover {
    background-color: transparent;
    box-shadow: none;
    text-decoration: underline;
}

div.poll .button:focus,
div.poll .button:focus-visible {
    border: dashed 2px #0115ff;
    background-color: #ffffff;
    text-decoration: underline;
}

/* a#pogotools_combined_poll__start_screen__button
   {width:calc(50% - 4px); padding-left/right:0; text-align:center;
    margin-left:2.75rem}  (site.css L2757, L3111)
   Moet NA de basis .button-regel staan: gelijke specificiteit. */
div.poll .start-button {
    width: calc(50% - 4px);
    margin-left: var(--poll-gutter);
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}


/* ------------------------------------------------------------
   7. Controls: totaalregel + knoppen
   Live had die gesplitst: .pogotools_poll__answer_tot_row /
   __result_tot_row (border-top 1px #00c6e0) en daarnaast
   div#pogotools_poll__resultbuttons_container (float:right,
   margin-top:-3rem). In de nieuwe markup zit alles in één .controls.
   Bron: site.css L2636, L2654-2657, L3106-3109, L3113-3115
   AFWIJKING: de -3rem optrekking van de knoppen vervalt, omdat de
   totaalregel nu in hetzelfde blok staat.
   ------------------------------------------------------------ */

/* Op live loopt de scheidslijn van de totaalregel en de rechterrand
   van de knoppen door tot de containerrand — dus GEEN goot hier;
   alleen de tekst van de totaalregel springt in. */
div.poll .controls {
    width: 100%;
    padding: 0;
    text-align: right;
}

div.poll .controls::after {
    content: "";
    display: table;
    clear: both;
}

div.poll .controls .total-ct {
    display: block;
    margin: 0.5rem 0 2rem;
    padding-top: 0.5rem;
    padding-left: var(--poll-gutter);
    border-top: 1px solid #00c6e0;
    color: #000000;
    text-align: left;
}

div.poll .controls .total-answers,
div.poll .controls .total-answers-label,
div.poll .controls .groupsize,
div.poll .controls .compare-total {
    display: inline-block;
}

div.poll .controls .total-answers-label { margin-right: 0.5rem; }

/* vergelijkscherm: "Totaal <eigen> / <alle resultaten>" */
div.poll .controls .compare-total::before { content: " / "; }

div.poll .controls .button {
    margin-right: 0;
    margin-left: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* min-width:20% gold op live ALLEEN binnen
   div#pogotools_poll__resultbuttons_container (site.css L3108) — dus op
   het resultaat-/vergelijkscherm, niet bij de knop op het vraagscherm
   (#pogotools_poll__results__button stond daarbuiten). */
div.poll .results.screen .controls .button,
div.poll .compare.screen .controls .button {
    min-width: 20%;
    padding-left: 0;
    padding-right: 0;
}
body.page.ondernemen_poll div.poll .results.screen .controls .button, body.page.ondernemen_poll div.poll .compare.screen .controls .button{padding-left:0.5rem; padding-right:0.5rem;}

/* #pogotools_poll__error {background:#f7d5d2; border:1px solid #f3c4c0;
   color:#6f1610; font-weight:bold}  (site.css L3256-3266)
   Nieuw: .groupsize_message, gevuld door poll.js met
   poll.groupsize.warning. Blijft leeg -> niets tonen. */
div.poll .groupsize_message:not(:empty) {
    display: block;
    width: 100%;
    margin: 0 var(--poll-gutter) 1rem;
    max-width: calc(100% - 2 * var(--poll-gutter));
    padding: 0.5rem;
    border: 1px solid #f3c4c0;
    background-color: #f7d5d2;
    color: #6f1610;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}


/* ------------------------------------------------------------
   8. Resultaatscherm
   Live: #pogotools_poll_results_screen__results {display:flex;
         flex-direction:column} + .pogotools_poll__result_row
         + __result_answertext (50%) + __resultcolumn (40%)
         + __resultbar (margin-left:4.5rem; 2rem hoog, #00619F)
   Bron: site.css L3052, L3069-3070, L3157-3186
   ------------------------------------------------------------ */

div.poll .results.screen .answers {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 1rem 0;
    column-count: 1;
}

div.poll .results.screen .answer {
    width: 100%;
    /* live: .pogotools_poll__result_row_underten padding-top/bottom 0.2vw
       bovenop de rijhoogte — resultaatrijen staan ruimer dan vraagrijen */
    padding: 0.375rem var(--poll-gutter);
    color: #154273;
    font-size: 1.5rem;
    line-height: 2rem;
}

div.poll .results.screen .answer::after {
    content: "";
    display: table;
    clear: both;
}

/* .pogotools_poll__result_answertext {width:50%; float:left} */
div.poll dt.text {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: 2rem;
}

/* .pogotools_poll__resultcolumn {width:40%; float:left;
   position:relative; margin-left:3.5%} */
div.poll dd.resultcolumn {
    float: left;
    position: relative;
    width: 40%;
    margin: 0 0 0 3.5%;
    padding: 0;
}

/* .pogotools_poll__resultbar {margin-left:4.5rem;
   border-top: 2rem solid #00619F !important}  (site.css L3174-3177)
   Hier als background i.p.v. border-top — zelfde beeld, minder gedoe. */
div.poll .results.screen .resultbar {
    height: 2rem;
    margin: 0 0 0 4.5rem;
    background-color: #00619F;
}

/* .pogotools_poll__result_text {padding-left:0.5vw; position:absolute;
   z-index:20; line-height:2rem} — staat links NAAST de balk. */
div.poll .resultcolumn .percentage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 4.5rem;
    padding-left: 0.5rem;
    font-size: 1.25rem;
    line-height: 2rem;
}


/* ------------------------------------------------------------
   9. Feedback
   Live: p#pogotools_poll__results_screen__feedback_text
   {background-color:#8FCAE7 !important; color:#154273;
    font-size:1.25rem; line-height:125%; padding:0 2.75rem 2rem;
    margin-top:-1rem}  (site.css L2738)
   AFWIJKING: hier padding-top 2rem i.p.v. de -1rem optrekking,
   zodat het blok op zichzelf leesbaar is.
   ------------------------------------------------------------ */

div.poll .feedback.text {
    width: 100%;
    margin: 1rem 0 2rem;
    padding: 2rem var(--poll-gutter);
    background-color: #8FCAE7;
    color: #154273;
    font-size: 1.25rem;
    line-height: 1.25;
}

div.poll .feedback.text p { margin: 0 0 1rem; font-size: inherit; color: inherit; }
div.poll .feedback.text p:last-child { margin-bottom: 0; }

/* Op het resultaat-/vergelijkscherm staat de feedback direct ONDER de
   vraag en vormen ze samen één blauwe balk (live deed dat met
   margin-top:-1rem op de feedback, site.css L2738). */
div.poll .results.screen .question.text,
div.poll .compare.screen .question.text {
    margin-bottom: 0;
    padding-bottom: 1rem;
}

div.poll .results.screen .question.text + .feedback.text,
div.poll .compare.screen .question.text + .feedback.text {
    margin-top: 0;
    padding-top: 0;
}


/* ------------------------------------------------------------
   10. Vergelijkscherm + legenda
   Niet bereikbaar zolang show_overallresults false is, maar wel
   meegenomen zodat het klaarstaat.
   Live: .pogotools_poll__compare_bar1 {background-color:#00619F}
         .pogotools_poll__compare_bar2 {background-image:
           url(../images/arcering-blauw-wit.svg); repeat-x}
         span#pogotools_compare_legend__legend1_color / legend2_color
   Bron: site.css L3033-3067, L3069
   ------------------------------------------------------------ */

div.poll .compare-results {width: 100%; margin: 1rem 0; display: flex; flex-direction: column;}

div.poll .compare-row {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.25rem var(--poll-gutter);
    color: #154273;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: left;
}

div.poll .compare-row::after {
    content: "";
    display: table;
    clear: both;
}

div.poll .compare-row > .text {
    float: left;
    width: 50%;
    font-size: inherit;
}

div.poll .compare-row > .text p { margin: 0; font: inherit; color: inherit; }

div.poll .compare-row .resultcolumn {
    float: left;
    position: relative;
    width: 40%;
    margin-left: 3.5%;
}

/* De twee .resultbar's dragen hier alleen het percentage-LABEL; de
   gekleurde balken zijn .resultbar-self / .resultbar-total.
   Net als op het resultaatscherm staat het label in een vaste goot van
   4.5rem LINKS van de balk — niet eroverheen (onleesbaar). */
div.poll .compare-row .resultbar {
    position: relative;
    z-index: 2;
    width: 4.5rem;
    height: 1rem;
    margin: 0 0 0.5rem;
    padding-left: 0.5rem;
    background-color: transparent;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #154273;
}

div.poll .resultbar-self,
div.poll .resultbar-total {
    position: absolute;
    z-index: 1;
    height: 1rem;
    margin-top: -1.5rem;        /* 1rem hoogte + 0.5rem marge van het label erboven */
    margin-left: 4.5rem;
    border-top: none;
}

div.poll .resultbar-self { background-color: #00619F; }

div.poll .resultbar-total {
    background-color: transparent;
    background-image: url(../images/arcering-blauw-wit.svg);
    background-repeat: repeat-x;
    background-size: contain;
}

div.poll .legenda {
    padding: 0 var(--poll-gutter);
    margin-bottom: 1rem;
}

div.poll .legenda .text {
    display: inline-block;
    margin-right: 1rem; margin-left: 0.5rem;
    padding: 0;
    background-color: transparent;
    font-size: 0.8rem;
    vertical-align: middle;
}

div.poll .legendbar-self,
div.poll .legendbar-total {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

div.poll .legendbar-self { background-color: #00619F; }

div.poll .legendbar-total {
    background-image: url(../images/arcering-blauw-wit.svg);
    background-repeat: no-repeat;
    background-size: contain;
}


/* ------------------------------------------------------------
   11. Voortgang "Vraag X van Y"
   NIET op live aanwezig — nieuwe markup (<p class="progress">).
   MOET gereset worden: bd.css definieert .progress als de
   Bootstrap-voortgangsbalk (display:flex; height:1rem;
   overflow:hidden; background-color:#e6e6e6), waardoor de tekst
   nu wordt afgekapt.
   ------------------------------------------------------------ */

div.poll .progress {
    display: block;
    height: auto;
    overflow: visible;
    margin: 0 0 0.5rem;
    padding: 0 var(--poll-gutter);
    background-color: transparent;
    color: #154273;
    font-size: 0.75rem;
    text-align: right;
}


/* ------------------------------------------------------------
   12. Overrides tegen de dode legacy-poll-CSS in site.css
   Die regels zijn ongescoped en raken de nieuwe markup alsnog.
   ------------------------------------------------------------ */

/* site.css L2651 + L2867: input {width: 6vw !important} */
div.poll input.answer-input,
div.poll input.groupsize-value { width: 5rem !important; }

/* site.css L2664/L2961 + L2704/L3011:
   a.button {background:#00c6e0; height:2.4vw; width:2.4vw;
   border-radius:1.2vw} — maakte "Naar lesmenu" een klein blokje.
   div.poll a.button (1,2,1) wint van a.button (0,1,1), ook binnen de
   media queries op 1200/980/800px. */
div.poll a.button {width: auto; height: auto; border-radius: 0; background-color: transparent; line-height: 100%;}
div.poll a.start-button {width: calc(50% - 4px);}

/* site.css L2654 + L2870: input:focus-visible {outline:none} */
div.poll input:focus-visible {
    outline: 2px dashed #0115ff;
    outline-offset: 2px;
}

/* bd.css: .text {font-size:1rem} — elk .text-element krijgt hierboven
   een expliciete font-size; dit vangt de rest af. */
div.poll .text { font-size: 1rem; }
div.poll .question.text { font-size: 2.25rem; }
div.poll .start-introduction > .text,
div.poll .feedback.text { font-size: 1.25rem; }
div.poll dt.text,
div.poll .compare-row > .text { font-size: 1.5rem; }

/* Zichtbare focus op de aanklikbare rijen — site.css L3308-3318 doet
   dit al via div[tabindex]:focus, hier expliciet voor de zekerheid. */
div.poll .answer[tabindex]:focus,
div.poll .answer[tabindex]:focus-visible,
div.poll .compare-row[tabindex]:focus,
div.poll .compare-row[tabindex]:focus-visible {
    outline: 2px dashed #0115ff !important;
    outline-offset: 2px !important;
}


/* ------------------------------------------------------------
   13. Media queries
   Live gebruikte 1200 / 980 / 800 / 667 / 400px; hier teruggebracht
   tot 800 / 667 / 400 (zelfde dichtheid als quiz.css).
   ------------------------------------------------------------ */

/* site.css L2679-2684, L3105-3117 */
@media screen and (max-width: 800px) {
    div.poll .question.screen .answers { column-count: 1; }

    div.poll .question.text { font-size: 1.75rem; }

    div.poll .controls { text-align: left; }
    div.poll .controls .button {
        min-width: unset;
        margin-left: 0;
        margin-right: 1rem;
        margin-bottom: 0.5rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* site.css L3122-3127 */
@media screen and (max-width: 667px) {
    div.poll { --poll-gutter: 1rem; }

    div.poll .start-body.hasimage .start-introduction { float: none; width: 100%; }
    div.poll .start-image {
        float: none;
        width: 100%;
        margin-top: 1rem;
        padding-left: 0;
    }

    div.poll .start-button { width: calc(100% - 2rem); }

    div.poll .answer,
    div.poll .compare-row,
    div.poll .results.screen .answer { font-size: 1rem; line-height: 1.5rem; }

    /* moeten expliciet mee: sectie 12 zet ze op 1.5rem met hogere
       specificiteit dan .results.screen .answer hierboven */
    div.poll dt.text,
    div.poll .compare-row > .text,
    div.poll .controls .total-ct { font-size: 1rem; }
    div.poll .resultcolumn .percentage { font-size: 1rem; }

    div.poll .answer legend { width: 100%; float: none; line-height: 1.5rem; }

    div.poll dt.text { float: none; width: 100%; }
    div.poll dd.resultcolumn { float: none; width: 100%; margin-left: 0; }
    div.poll .compare-row > .text { float: none; width: 100%; }
    div.poll .compare-row .resultcolumn { float: none; width: 100%; margin-left: 0; }
}

/* site.css L3278-3280 */
@media screen and (max-width: 400px) {
    div.poll .insert-answers button {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
        line-height: 2rem;
    }

    div.poll .answer-input,
    div.poll .groupsize-value { width: 3.5rem !important; font-size: 1.25rem; }

    div.poll .question.text { font-size: 1.5rem; }
}


/* ------------------------------------------------------------
   14. Print — site.css L2686-2689
   ------------------------------------------------------------ */

@media print {
    div.poll .controls .button,
    div.poll .start-button { display: none; }

    div.poll .question.screen .answers,
    div.poll .results.screen .answers { column-count: 1; }
}


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

   Zelfde cancel-patroon als onderaan site.css en quiz.css. Dit bestand wordt
   NA site.css geladen en de selectors hier zijn specifieker, dus het cancel-
   blok in site.css haalt deze regels niet weg -- vandaar deze eigen versie.

   DRO: als ik toetsenbord gebruik en tab, zie ik de focus-outline. Als ik muis gebruik en klik, zie ik geen outline.
   Dat is precies wat WCAG 2.4.7 / 2.4.11 wil: focus alleen zichtbaar voor toetsenbordgebruikers.

   --------------------------------------------------------------------------- */
@supports selector(:focus-visible) {

    /* aanklikbare rijen (L732-736, !important) -> basis: geen outline */
    div.poll .answer[tabindex]:focus:not(:focus-visible),
    div.poll .compare-row[tabindex]:focus:not(:focus-visible) {
        outline: none !important;
    }

    /* knoppen (L335-339) -> basis L308-327.
       :not(:hover) houdt de onderstreping van div.poll .button:hover heel. */
    div.poll .button:focus:not(:focus-visible):not(:hover) {
        border: solid 2px #22426f;
        background-color: transparent;
        text-decoration: none;
    }

    /* plus/min-knoppen (L270-274, :hover meegebundeld) -> basis L253-268 */
    div.poll .insert-answers button:focus:not(:focus-visible):not(:hover) {
        outline: none;
        background-color: #154273;
        color: #ffffff;
    }

    /* div.poll input:focus-visible (L716-719) gebruikt al alleen
       :focus-visible en hoeft dus niets. */
}