/* ============================================================
   DIENSTENKIEZER — alles onder .grc-kiezer
   Versie 6.0

   Nieuw ten opzichte van 5.x:
   - .grc-kiezer__melding    onzichtbare statusregel voor schermlezers
   - .grc-kiezer__leeg       lege stand en foutstand met doorverwijzingen
   - .grc-kiezer__check      zelftestpaneel (?grccheck=1)
   - focusstand op de conclusie, omdat de focus daar nu naartoe gaat
   ============================================================ */

.grc-kiezer {
  --k-navy:      var(--grc-navy, #292571);
  --k-navy-diep: var(--grc-navy-diep, #201c5e);
  --k-groen:     var(--grc-groen, #92C83E);
  --k-groen-tk:  var(--grc-groen-tekst, #557a1f);
  --k-ink:       #0d1724;
  --k-tekst:     #545454;
  --k-zacht:     #8a8a96;
  --k-lijn:      #e8e8e4;
  --k-wit:       #ffffff;
  --k-vlak:      #f5f4f1;

  --k-uit:       cubic-bezier(.16, 1, .3, 1);
  --k-kort:      .18s;
  --k-mid:       .26s;

  font-family: Nunito, "Helvetica Neue", Arial, sans-serif;
  color: var(--k-tekst);
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px 56px;
  box-sizing: border-box;
}
.grc-kiezer *,
.grc-kiezer *::before,
.grc-kiezer *::after { box-sizing: border-box; }

/* Onzichtbaar, maar wel voorgelezen. Hier komt te staan wat er
   net gebeurd is: hoeveel voorbeelden gevonden zijn, of dat het
   laden niet lukte. */
.grc-kiezer__melding {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Compositie: kaart ligt over de foto heen ---------- */

.grc-kiezer__paneel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

.grc-kiezer__beeld {
  grid-column: 1 / 8;
  grid-row: 1;
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--k-navy-diep);
}
.grc-kiezer__beeld img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  filter: saturate(.85) contrast(1.02);
  opacity: .92;
}
.grc-kiezer__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(32,28,94,.42) 0%,
    rgba(32,28,94,.20) 48%,
    rgba(32,28,94,.06) 100%);
  pointer-events: none;
}

.grc-kiezer__kaart {
  grid-column: 6 / 13;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: 46px 46px 44px;
  background: var(--k-wit);
  box-shadow: 0 30px 60px -28px rgba(41,37,113,.30);
}
.grc-kiezer__kaart::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--k-groen);
}

/* ---------- Kop ---------- */

.grc-kiezer__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-groen-tk);
}
.grc-kiezer__heading {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--k-navy);
  letter-spacing: -.02em;
}
.grc-kiezer__lead {
  margin: 0 0 28px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--k-tekst);
  max-width: 46ch;
}

/* ---------- Voortgang ---------- */

.grc-kiezer__voortgang {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
}
.grc-kiezer__balk {
  height: 3px;
  width: 34px;
  background: var(--k-lijn);
  transition: background-color var(--k-mid) var(--k-uit);
}
.grc-kiezer__balk.is-actief { background: var(--k-groen); }

/* ---------- Vragen ---------- */

.grc-kiezer__vraagkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 16px;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--k-navy);
}
.grc-kiezer__teller {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--k-zacht);
}

.grc-kiezer__gekozen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--k-lijn);
  font-size: 13px;
}
.grc-kiezer__gekozen > span {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--k-zacht);
}
.grc-kiezer__gekozen strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--k-navy);
}
.grc-kiezer__wijzig {
  margin-left: auto;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--k-groen-tk);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  transition: color var(--k-kort) var(--k-uit);
}
.grc-kiezer__wijzig:hover { color: var(--k-navy); }
.grc-kiezer__wijzig:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 3px; }

.grc-kiezer__pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.grc-kiezer__pil {
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--k-navy);
  background: var(--k-wit);
  border: 1px solid var(--k-lijn);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--k-kort) var(--k-uit),
              color var(--k-kort) var(--k-uit),
              background-color var(--k-kort) var(--k-uit),
              transform var(--k-kort) var(--k-uit);
}
.grc-kiezer__pil:hover {
  border-color: var(--k-groen);
  color: var(--k-groen-tk);
}
.grc-kiezer__pil:active { transform: scale(.97); }
.grc-kiezer__pil:focus-visible {
  outline: 2px solid var(--k-navy);
  outline-offset: 3px;
}
.grc-kiezer__pil[aria-pressed="true"] {
  color: var(--k-wit);
  background: var(--k-navy);
  border-color: var(--k-navy);
}

/* ---------- Uitkomst ---------- */

.grc-kiezer__uitkomst { padding-top: 4px; }

.grc-kiezer__uitkomstkop {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.grc-kiezer__conclusie {
  flex: 1 1 400px;
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--k-ink);
  letter-spacing: -.005em;
}
.grc-kiezer__conclusie strong {
  font-weight: 800;
  color: var(--k-navy);
}
/* De focus verhuist na een keuze hiernaartoe, puur zodat
   schermlezers de nieuwe uitkomst meteen voorlezen — er gebeurt
   verder niets interactiefs op deze alinea, dus een zichtbare
   focusring heeft hier geen functie. Op iOS Safari toonde
   :focus-visible bij deze programmatische .focus()-aanroep
   alsnog een navy kader, wat als een onbedoeld ontwerpelement
   oogde; vandaar dat de ring hier bewust nooit zichtbaar wordt. */
.grc-kiezer__conclusie:focus,
.grc-kiezer__conclusie:focus-visible {
  outline: none;
}

.grc-kiezer__opnieuw {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--k-navy);
  background: none;
  border: 1px solid var(--k-lijn);
  cursor: pointer;
  transition: border-color var(--k-kort) var(--k-uit),
              color var(--k-kort) var(--k-uit),
              transform var(--k-kort) var(--k-uit);
}
.grc-kiezer__opnieuw:hover { border-color: var(--k-navy); color: var(--k-groen-tk); }
.grc-kiezer__opnieuw:active { transform: scale(.97); }
.grc-kiezer__opnieuw:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 3px; }

.grc-kiezer__context {
  max-width: 68ch;
  margin: 0 0 40px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--k-tekst);
}

.grc-kiezer__blokkop {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--k-lijn);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--k-navy);
}

/* Advies: één kaart, want één vraag geeft één dienst. Witte
   kaart met zachte schaduw en 16px radius — dezelfde
   kaarttaal als de rest van de site — in plaats van het platte
   grijze vlak met groene streep van de vorige opzet. */
.grc-kiezer__advies {
  position: relative;
  display: block;
  padding: 36px 38px;
  margin-bottom: 14px;
  background: var(--k-wit);
  border: 1px solid var(--k-lijn);
  border-radius: 16px;
  box-shadow: 0 16px 40px -22px rgba(41, 37, 113, .22);
  text-decoration: none;
  color: inherit;
  transition: transform var(--k-mid) var(--k-uit),
              box-shadow var(--k-mid) var(--k-uit);
}
.grc-kiezer__advies:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -20px rgba(41, 37, 113, .28);
}
.grc-kiezer__advies:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 4px; }

.grc-kiezer__adviestitel {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--k-navy);
  transition: color var(--k-kort) var(--k-uit);
}

.grc-kiezer__adviestekst {
  display: block;
  max-width: 62ch;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--k-tekst);
}

/* Echte knop i.p.v. een tekstlink met pijltje — 8px radius,
   navy gevuld, conform de rest van de knoppen op de site. */
.grc-kiezer__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--k-navy);
  color: var(--k-wit) !important;
  font-size: 14px;
  font-weight: 800;
  transition: background-color var(--k-kort) var(--k-uit);
}
.grc-kiezer__advies:hover .grc-kiezer__link {
  background: var(--k-groen);
  color: var(--k-navy) !important;
}
.grc-kiezer__link svg {
  width: 16px; height: 10px;
  transition: transform var(--k-mid) var(--k-uit);
}
.grc-kiezer__advies:hover .grc-kiezer__link svg { transform: translateX(4px); }

/* Onze aanpak, alleen als TOON_AANPAK aanstaat */
.grc-kiezer__extra {
  display: inline-block;
  margin-bottom: 48px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--k-groen-tk);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--k-kort) var(--k-uit);
}
.grc-kiezer__extra:hover { color: var(--k-navy); }
.grc-kiezer__extra:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 3px; }

.grc-kiezer__adviesruimte { margin-bottom: 48px; }

/* ---------- Resultaatblokken (opdrachten, kennis) ---------- */

.grc-kiezer__blok { margin-bottom: 48px; }

.grc-kiezer__rijen { border-top: 1px solid var(--k-lijn); }

.grc-kiezer__rij {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--k-lijn);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--k-mid) var(--k-uit);
}
.grc-kiezer__rij:hover { padding-left: 10px; }
.grc-kiezer__rij:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; }

.grc-kiezer__rijtitel {
  font-size: 16.5px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--k-navy);
  transition: color var(--k-kort) var(--k-uit);
}
/* let op: nooit het heldere groen op wit, dat haalt 4.5:1 niet */
.grc-kiezer__rij:hover .grc-kiezer__rijtitel { color: var(--k-groen-tk); }

.grc-kiezer__rijtekst {
  grid-column: 1 / 2;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--k-tekst);
  max-width: 62ch;
}

.grc-kiezer__labels {
  grid-column: 2 / 3;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.grc-kiezer__label {
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--k-navy);
  background: var(--k-vlak);
  white-space: nowrap;
}

/* ---------- Lege stand en foutstand ----------
   Een lege uitkomst is geen fout van de bezoeker en hoort dus
   geen waarschuwing te zijn. Het is een moment om door te
   verwijzen: hetzelfde vlak als het advies, zonder de groene
   rand, zodat het duidelijk een niveau lager staat. */

.grc-kiezer__leeg {
  padding: 30px 34px 28px;
  background: var(--k-vlak);
}
.grc-kiezer__leegtekst {
  max-width: 62ch;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--k-tekst);
}

.grc-kiezer__verwijzingen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.grc-kiezer__verwijzing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--k-navy);
  text-decoration: none;
  transition: color var(--k-kort) var(--k-uit);
}
.grc-kiezer__verwijzing svg {
  width: 16px; height: 10px;
  transition: transform var(--k-mid) var(--k-uit);
}
.grc-kiezer__verwijzing:hover { color: var(--k-groen-tk); }
.grc-kiezer__verwijzing:hover svg { transform: translateX(5px); }
.grc-kiezer__verwijzing:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 4px; }

/* ---------- Collega's ----------
   Elke kaart is een <div> met een kopregel-knop (foto, naam,
   meta, chevron) en een klapbare detailsectie eronder. De
   animatie loopt via grid-template-rows (0fr -> 1fr) op de
   wrapper — dat beweegt vanzelf mee met de hoogte van de inhoud,
   zonder dat JS iets hoeft te meten. */

.grc-kiezer__mensen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
.grc-kiezer__mens {
  border-top: 3px solid var(--k-lijn);
  transition: border-color var(--k-mid) var(--k-uit);
}
.grc-kiezer__mens.is-open,
.grc-kiezer__mens:has(.grc-kiezer__mens-kop:hover),
.grc-kiezer__mens:has(.grc-kiezer__mens-kop:focus-visible) {
  border-top-color: var(--k-groen);
}

.grc-kiezer__mens-kop {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 4px 4px;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.grc-kiezer__mens-kop:focus-visible {
  outline: 2px solid var(--k-navy);
  outline-offset: 4px;
}

.grc-kiezer__portret {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--k-vlak);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--k-navy);
}
.grc-kiezer__portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grc-kiezer__menstekst { display: block; flex: 1 1 auto; min-width: 0; }

.grc-kiezer__mensnaam {
  display: block;
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--k-navy);
  transition: color var(--k-kort) var(--k-uit);
}
.grc-kiezer__mens-kop:hover .grc-kiezer__mensnaam,
.grc-kiezer__mens.is-open .grc-kiezer__mensnaam {
  color: var(--k-groen-tk);
}
.grc-kiezer__mensmeta {
  display: block;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--k-tekst);
}

.grc-kiezer__mens-chevron {
  flex: 0 0 auto;
  align-self: center;
  color: var(--k-zacht);
  transition: transform var(--k-mid) var(--k-uit), color var(--k-kort) var(--k-uit);
}
.grc-kiezer__mens-chevron svg { display: block; width: 13px; height: 8px; }
.grc-kiezer__mens.is-open .grc-kiezer__mens-chevron {
  transform: rotate(180deg);
  color: var(--k-navy);
}

/* De opklap-animatie: 0fr -> 1fr op de rij-template is breed
   ondersteund en animeert vanzelf mee met de werkelijke hoogte
   van de inhoud — geen JS-meting nodig, geen vaste max-height
   die bij lange quotes zou afknippen. */
.grc-kiezer__mens-uitklap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--k-mid) var(--k-uit);
}
.grc-kiezer__mens.is-open .grc-kiezer__mens-uitklap {
  grid-template-rows: 1fr;
}
.grc-kiezer__mens-detail {
  min-height: 0;
}

.grc-kiezer__mens-quote {
  margin: 18px 4px 0;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--k-groen);
  font-size: 15.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--k-ink);
}

.grc-kiezer__mens-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 4px 20px;
}

.grc-kiezer__aktie-profiel,
.grc-kiezer__aktie-boeken {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--k-kort) var(--k-uit),
              color var(--k-kort) var(--k-uit),
              border-color var(--k-kort) var(--k-uit);
}
.grc-kiezer__aktie-profiel {
  color: var(--k-navy);
  border: 1px solid var(--k-lijn);
}
.grc-kiezer__aktie-profiel svg {
  width: 14px; height: 9px;
  transition: transform var(--k-mid) var(--k-uit);
}
.grc-kiezer__aktie-profiel:hover {
  border-color: var(--k-navy);
  color: var(--k-groen-tk);
}
.grc-kiezer__aktie-profiel:hover svg { transform: translateX(4px); }
.grc-kiezer__aktie-profiel:focus-visible {
  outline: 2px solid var(--k-navy);
  outline-offset: 3px;
}

.grc-kiezer__aktie-boeken {
  background: var(--k-navy);
  color: var(--k-wit) !important;
  border: 1px solid var(--k-navy);
}
.grc-kiezer__aktie-boeken:hover {
  background: var(--k-groen);
  border-color: var(--k-groen);
  color: var(--k-navy) !important;
}
.grc-kiezer__aktie-boeken:focus-visible {
  outline: 2px solid var(--k-groen);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .grc-kiezer__mens,
  .grc-kiezer__mens-chevron,
  .grc-kiezer__mens-uitklap { transition: none; }
}

/* Kaart-breedte is smal (~1/3 van de resultatensectie); daarom
   op mobiel (waar de kaarten toch al onder elkaar staan, gap
   ongewijzigd) niets extra's nodig — de kolomstijl hierboven
   werkt vanzelf ook in de smalle enkele kolom. */

/* ---------- Laadstand ---------- */

.grc-kiezer__laden { margin-bottom: 48px; }
.grc-kiezer__laden span {
  display: block;
  height: 15px;
  margin-bottom: 18px;
  background: var(--k-vlak);
  animation: grcKiezerPuls 1.4s ease-in-out infinite;
}
.grc-kiezer__laden span:nth-child(1) { width: 72%; }
.grc-kiezer__laden span:nth-child(2) { width: 84%; }
.grc-kiezer__laden span:nth-child(3) { width: 63%; }
@keyframes grcKiezerPuls { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* Alleen zichtbaar in debugmodus */
.grc-kiezer__waarschuwing {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-left: 4px solid #b00;
  background: #fdf2f2;
  font-size: 14px;
  line-height: 1.5;
  color: #7a1414;
}

/* ---------- Zelftest (?grccheck=1) ----------
   Alleen zichtbaar met die parameter in de URL; een bezoeker
   krijgt dit nooit te zien. Bewust kaal: dit is gereedschap,
   geen pagina-onderdeel. */

.grc-kiezer__check {
  padding: 30px 34px 26px;
  background: var(--k-vlak);
}
.grc-kiezer__checkintro {
  max-width: 68ch;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--k-tekst);
}
.grc-kiezer__checkkop {
  margin: 30px 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-navy);
}
.grc-kiezer__checkrij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 0 9px 12px;
  border-bottom: 1px solid var(--k-lijn);
  border-left: 3px solid var(--k-lijn);
  font-size: 14px;
}
.grc-kiezer__checknaam {
  font-weight: 700;
  color: var(--k-ink);
}
.grc-kiezer__checkextra {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--k-zacht);
  word-break: break-all;
}
.grc-kiezer__checkwaarde {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: right;
}
.grc-kiezer__checkrij.is-goed { border-left-color: var(--k-groen); }
.grc-kiezer__checkrij.is-goed .grc-kiezer__checkwaarde { color: var(--k-groen-tk); }
.grc-kiezer__checkrij.is-leeg { border-left-color: #d08a00; background: #fffaf0; }
.grc-kiezer__checkrij.is-leeg .grc-kiezer__checkwaarde { color: #8a5a00; }
.grc-kiezer__checkrij.is-fout { border-left-color: #b00; background: #fdf2f2; }
.grc-kiezer__checkrij.is-fout .grc-kiezer__checkwaarde { color: #7a1414; }


/* ---------- Afsluiting ---------- */

.grc-kiezer__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--k-lijn);
}
.grc-kiezer__ctatekst {
  flex: 1 1 420px;
  max-width: 60ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--k-tekst);
}
.grc-kiezer__ctaknop {
  flex: 0 0 auto;
  display: inline-block;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--k-wit);
  background: var(--k-navy);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color var(--k-kort) var(--k-uit),
              transform var(--k-kort) var(--k-uit);
}
.grc-kiezer__ctaknop:hover { background: var(--k-groen); color: var(--k-navy) !important; transform: translateY(-1px); }
.grc-kiezer__ctaknop:active { transform: translateY(0); }
.grc-kiezer__ctaknop:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 3px; }

/* ---------- Beweging ---------- */

@keyframes grcKiezerIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .grc-kiezer__vraag[data-nieuw="true"] {
    animation: grcKiezerIn .28s var(--k-uit) both;
  }
  .grc-kiezer__uitkomst[data-nieuw="true"] {
    animation: grcKiezerIn .3s var(--k-uit) both;
  }
  .grc-kiezer__vraag[data-nieuw="true"] .grc-kiezer__pil {
    animation: grcKiezerIn .26s var(--k-uit) both;
    animation-delay: calc(var(--i, 0) * 35ms + 60ms);
  }
  .grc-kiezer__uitkomst[data-nieuw="true"] .grc-kiezer__advies {
    animation: grcKiezerIn .3s var(--k-uit) both;
    animation-delay: 100ms;
  }
  /* De resultaten komen later binnen omdat ze op de feeds
     wachten; zij krijgen hun eigen entree zonder vertraging. */
  .grc-kiezer__rij,
  .grc-kiezer__mens,
  .grc-kiezer__leeg {
    animation: grcKiezerIn .3s var(--k-uit) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grc-kiezer *,
  .grc-kiezer *::before,
  .grc-kiezer *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Kleinere schermen ---------- */

@media (max-width: 940px) {
  .grc-kiezer__paneel { display: block; }
  .grc-kiezer__beeld { height: 260px; }
  .grc-kiezer__beeld img { min-height: 0; height: 260px; }
  .grc-kiezer__kaart {
    margin: -34px 20px 0;
    padding: 32px 28px 30px;
  }
  .grc-kiezer__mensen   { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
  .grc-kiezer { padding: 8px 0 44px; }
  .grc-kiezer__beeld,
  .grc-kiezer__beeld img { height: 200px; }
  .grc-kiezer__kaart { margin: -28px 14px 0; padding: 26px 22px 26px; }
  .grc-kiezer__uitkomst { padding: 0 14px; }
  .grc-kiezer__advies { padding: 26px 24px 24px; }
  .grc-kiezer__leeg,
  .grc-kiezer__check { padding: 24px 22px 22px; }
  .grc-kiezer__mensen   { grid-template-columns: 1fr; gap: 20px; }
  .grc-kiezer__pil { padding: 10px 17px; font-size: 14px; }
  .grc-kiezer__cta { padding-top: 22px; }
  .grc-kiezer__rij {
    grid-template-columns: 1fr;
  }
  .grc-kiezer__rij:hover { padding-left: 0; }
  .grc-kiezer__labels {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 4px;
  }
  .grc-kiezer__verwijzingen { flex-direction: column; gap: 12px; }
}