/* ==========================================================================
   QualiMundi — Aanvraag: conversational intake
   Voelt als het begin van een gesprek, niet als administratie.
   ========================================================================== */

body.intake { background: var(--paper); --intake-voet: 3rem; }

.intake-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* --- Kop met voortgang --------------------------------------------------- */

.intake-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251,249,245,.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.intake-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.intake-bar .logo { --logo-h: 2.1rem; }
.intake-bar .logo__kleur { opacity: 1; }
.intake-bar__meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* De uitgang zegt waar ze heen gaat in plaats van "sluiten", en dat is
   een langere zin. Ze mag nooit midden in dat zinnetje afbreken: dan
   duwt ze de rest van de balk uit elkaar. Past ze niet, dan is de
   kortere teller hiernaast het antwoord, niet een afgebroken woord. */
.intake-exit { transition: color .35s var(--ease); white-space: nowrap; }
.intake-bar__meta [data-teller] { white-space: nowrap; }
.intake-exit:hover { color: var(--accent); }

@media (max-width: 620px) {
  /*
   * Drie dingen delen op een telefoon dezelfde regel: het merk, de
   * vraagteller en de uitgang. Samen vroegen ze meer dan er is, en het
   * logo verloor: het is het enige element dat mag krimpen, dus werd het
   * tot nul breedte platgedrukt. Hieronder krijgt elk van de drie precies
   * genoeg, en houdt het logo zijn verhouding.
   */
  .intake-bar__row { position: relative; gap: .9rem; }
  .intake-bar .logo-link { flex: 0 0 auto; }
  .intake-bar .logo { --logo-h: 1.6rem; }
  .intake-bar__meta { gap: .75rem; }
  .intake-exit { letter-spacing: .07em; }

  /* De bewaarbevestiging is een berichtje dat twee seconden opflakkert.
     In de rij zelf hield ze permanent zeventig pixels bezet - precies de
     ruimte die het logo nodig heeft. Ze zweeft daarom net onder de balk,
     op een eigen vlakje zodat ze leesbaar blijft boven de vraag. */
  .saved-hint {
    position: absolute;
    right: 0;
    top: 100%;
    padding: .35rem .6rem;
    background: rgba(251, 249, 245, .94);
    border-radius: 999px;
    pointer-events: none;
  }
}

.progress {
  height: 2px;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .7s var(--ease-out);
}

.chapter-track {
  display: flex;
  gap: 1.5rem;
  padding-block: .85rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line-soft);
}
.chapter-track::-webkit-scrollbar { display: none; }
.chapter-track span {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  opacity: .5;
  transition: opacity .5s var(--ease), color .5s var(--ease);
}
.chapter-track span.is-active { opacity: 1; color: var(--ink); }
.chapter-track span.is-done { opacity: .8; color: var(--accent); }
@media (max-width: 760px) { .chapter-track { display: none; } }

/* --- Stap ---------------------------------------------------------------- */

.intake-main {
  flex: 1;
  display: flex;
  align-items: center;
  /* safe: een vraag die hoger is dan het venster wordt niet meer gecentreerd
     maar bovenaan gezet. Gecentreerd loopt zo een vraag langs twee kanten
     over de rand, en de bovenkant is dan niet weg te scrollen - dat is de
     klassieke valkuil van align-items: center op een flexcontainer. */
  align-items: safe center;
  padding-block: clamp(3rem, 8vh, 6rem);
  /* De voetbalk is sticky: ze blijft onderaan het venster hangen terwijl
     de vraag erboven doorloopt. Ze staat wel in de flow, maar op haar
     natuurlijke plaats onderaan het document - zodra ze omhoog geplakt
     wordt, ligt ze over de laatste regels heen. Op scherm 1 viel ze
     precies op de uitweg "weinig tijd?", die daardoor half wegviel
     achter het verloop. Deze ruimte houdt de balk vrij van de tekst. */
  padding-bottom: calc(clamp(3rem, 8vh, 6rem) + var(--intake-voet));
}
/* Zonder JavaScript staan alle vragen onder elkaar en werkt het formulier
   gewoon. Met JavaScript wordt het één vraag per scherm. */
.step-pane { display: block; width: 100%; padding-bottom: clamp(3rem, 6vw, 5rem); }
html.js .step-pane { display: none; padding-bottom: 0; }
html.js .step-pane.is-active { display: block; animation: paneIn .7s var(--ease-out) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.q-index {
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: block;
}
.q-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  max-width: 20ch;
}
.q-help {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 1.05rem;
  max-width: 56ch;
  line-height: 1.62;
}
.q-body { margin-top: clamp(2rem, 4vw, 3rem); max-width: 900px; }
.q-optional {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin-top: 1rem;
}

/* Een link in deze kleine grijze regel stond in exact dezelfde kleur als
   de zin eromheen, zonder onderlijning. Dat raakt precies de twee
   uitwegen die er het meest toe doen: inloggen voor iemand die hier al
   een account heeft, en "wachtwoord vergeten" voor wie er niet meer in
   raakt. Wie ze niet ziet, typt alles opnieuw of haakt af. */
.q-optional a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness .25s var(--ease);
}
.q-optional a:hover { text-decoration-thickness: 2px; }

/* De droomvraag mag visueel groter zijn */
.step-pane[data-weight="hero"] .q-title { font-size: clamp(2.1rem, 5vw, 4.25rem); max-width: 17ch; }

/* --- Keuzes: chips ------------------------------------------------------- */

.choices { display: flex; flex-wrap: wrap; gap: .7rem; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: .95rem;
  color: var(--ink-2);
  background: transparent;
  transition: border-color .35s var(--ease), color .35s var(--ease),
              background .35s var(--ease), transform .35s var(--ease);
  user-select: none;
}
.choice:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-1px); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Grotere keuzeblokken met toelichting */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.option {
  position: relative;
  display: block;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.option:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option b { display: block; font-weight: 500; font-size: 1rem; margin-bottom: .3rem; }
.option span { display: block; font-size: .875rem; color: var(--ink-3); line-height: 1.5; }
.option:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.option:has(input:checked) b { color: var(--accent); }
.option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Tekstvelden --------------------------------------------------------- */

.field { display: block; margin-bottom: 1.6rem; }
.field:last-child { margin-bottom: 0; }
.lbl {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .6rem;
}
.lbl--legend { margin-bottom: .95rem; padding: 0; }

/*
 * "verplicht" naast het label.
 *
 * Erft de micro-hoofdletters van .lbl en verschilt alleen in kleur, zodat
 * het woord bij het label hoort en niet erboven uit schreeuwt. Bewust een
 * woord en geen sterretje: een sterretje heeft een legende nodig, en die
 * legende staat onderaan het scherm bij niemand.
 */
.lbl-nodig { color: var(--accent); }

/* Keuzegroepen zitten in een fieldset zodat een schermlezer de vraag hoort. */
.veldgroep { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Alleen voor schermlezers. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea,
.ta {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: .85rem 0;
  font-size: 1.05rem;
  color: var(--ink);
  transition: border-color .35s var(--ease);
  border-radius: 0;
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.ta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-bottom-color: var(--accent); }
.field input::placeholder, .ta::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .65; }

.ta {
  border: 1px solid var(--line);
  padding: 1.15rem 1.25rem;
  min-height: 9rem;
  resize: vertical;
  line-height: 1.65;
  font-family: var(--sans);
}
.ta--big { min-height: 14rem; font-size: 1.15rem; }
.ta:focus { border-color: var(--accent); }

/* De suggesties onder "welk reiskantoor?". Het veld eronder is een gewoon
   invulveld; deze lijst neemt alleen het typwerk weg. Ze staat op position:
   absolute binnen .field, zodat de vraag eronder niet opspringt zodra er
   suggesties komen. */
.field { position: relative; }

.q-suggesties {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 .6rem 1.6rem rgba(26, 24, 20, .09);
}

.q-suggestie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem .9rem;
  cursor: pointer;
}

.q-suggestie--aan { background: var(--paper-2); }

.q-suggestie__naam   { color: var(--ink); }
.q-suggestie__plaats { color: var(--ink-3); font-size: var(--t-small); white-space: nowrap; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
@media (max-width: 700px) { .fields-2 { grid-template-columns: 1fr; } }

/* Een veld dat de hele breedte neemt. Het e-mailadres en het land zijn de
   twee die zelden in een halve kolom passen, en het adres is bovendien het
   enige antwoord dat werkelijk exact moet zijn. */
.fields-2 > .field--breed { grid-column: 1 / -1; }

/*
 * Het optionele blok op het contactscherm.
 *
 * Dezelfde vorm als de vragenlijst op de merksite: een haarlijn boven en
 * onder, een plusteken dat een minteken wordt, en de kop die naar het
 * accent kleurt zodra je er met de muis of het toetsenbord bij komt. Een
 * echte <details>, dus hij werkt zonder JavaScript en vertelt een
 * schermlezer zelf of hij open of dicht staat.
 */
.extra { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.extra__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.extra__kop::-webkit-details-marker { display: none; }
.extra__kop:hover { color: var(--accent); }
.extra__kop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.extra__titel { display: block; }
.extra__hulp {
  display: block;
  margin-top: .3rem;
  font-size: var(--t-small);
  color: var(--ink-3);
}

.extra__teken { position: relative; flex: none; width: 14px; height: 14px; margin-top: .55rem; }
.extra__teken::before,
.extra__teken::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.extra__teken::after { transform: rotate(90deg); }
.extra[open] .extra__teken::after { transform: rotate(0deg); opacity: 0; }

.extra__body { padding-bottom: 1.75rem; }

.counter { font-size: var(--t-small); color: var(--ink-3); margin-top: .6rem; }

/* Stepper voor aantallen */
.stepper { display: inline-flex; align-items: center; gap: 1.25rem; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .6rem; }
.stepper button {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 0;
  background: var(--paper-2);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.stepper button:hover { background: var(--ink); color: var(--paper); }
.stepper output { min-width: 2.5rem; text-align: center; font-size: 1.25rem; font-family: var(--serif); }

/* --- Navigatie onderaan -------------------------------------------------- */

.intake-foot {
  /* Wijzigt de hoogte van deze balk, wijzig dan --intake-voet mee: de
     vraag erboven houdt precies zoveel ruimte vrij. */
  position: sticky;
  bottom: 0;
  /* Het verloop begon te vroeg: de laatste regels van een lange vraag
     stonden half opgelost in de achtergrond, met de knop er nog eens
     bovenop. Half leesbare tekst leest als uitgezet, niet als "er komt
     nog iets onder". De doorschijnende rand blijft, maar kort, zodat
     tekst netjes achter de balk verdwijnt in plaats van erin op te gaan. */
  background: linear-gradient(to top, var(--paper) 82%, rgba(251,249,245,0));
  padding-block: 1.5rem 1.75rem;
  z-index: 50;
}
.intake-foot__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
  row-gap: .9rem;
}
/* Terug staat links, de twee andere rechts. Deze marge doet dat werk; een
   tussenlaag om ze samen te houden is er niet meer, want die belette de
   uitweg om op een smal scherm naar een eigen regel te zakken. */
.btn-back--springen { text-transform: none; letter-spacing: .02em; font-size: .85rem; margin-left: auto; }

/* De Terug-knop houdt zijn ruimte wanneer hij verborgen is, zodat de balk niet
   verspringt. Deze knop moet juist wél verdwijnen — vandaar de hogere
   specificiteit dan de algemene .btn-back[hidden]-regel hieronder. */
.intake-foot__row .btn-back--springen[hidden] { display: none; }

@media (max-width: 620px) {
  /*
   * Hier stond display:none. Dat kon zolang dezelfde uitweg ook op het
   * introscherm herhaald werd; nu die weg is, zou een telefoon helemaal
   * geen korte weg meer hebben — net het toestel waarop iemand er het
   * vaakst behoefte aan heeft. Ze zakt daarom naar een eigen regel onder
   * Terug en Verder, rechts uitgelijnd zodat ze bij Verder hoort en niet
   * bij Terug.
   */
  .btn-back--springen { order: 3; flex-basis: 100%; margin-left: 0; text-align: right; }
  .intake-foot__row .btn { margin-left: auto; }
}

/* Akkoordvinkje: een blok in plaats van een pil, zodat de tekst kan lopen. */
.choice--akkoord {
  border-radius: 4px;
  padding: 1.1rem 1.4rem;
  align-items: flex-start;
  max-width: 62ch;
}
.choice--akkoord span { line-height: 1.55; }
.choice--akkoord a { text-decoration: underline; text-underline-offset: 3px; }

/* Terugkeren naar een half ingevulde aanvraag. */
.hervat {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.hervat p { margin: 0 0 1.25rem; color: var(--ink-2); }
.hervat strong { color: var(--ink); font-weight: 500; }
.hervat[hidden] { display: none; }
.btn-back {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .75rem 0;
  transition: color .35s var(--ease);
}
.btn-back:hover { color: var(--ink); }
.btn-back[hidden] { visibility: hidden; display: block; }

.saved-hint {
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.saved-hint.is-on { opacity: .8; }

.err {
  color: var(--accent);
  font-size: var(--t-small);
  margin-top: 1rem;
  min-height: 1.2em;
}

/* --- Intro & bevestiging ------------------------------------------------- */

.intake-intro { text-align: left; max-width: 780px; }
.intake-intro h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); max-width: 16ch; }
.intake-intro .lead { margin-top: 1.75rem; max-width: 56ch; }
.intake-intro .meta-note {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-3);
  max-width: 52ch;
}

/* De zes stappen op het introscherm. Alleen de namen, drie per rij; op een
   telefoon onder elkaar met het nummer ernaast. Stap 1 is waar de bezoeker
   nu staat. */
.intake-ladder {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  max-width: 720px;
}
.intake-ladder__stap { display: grid; gap: .2rem; align-content: start; padding-left: .85rem; border-left: 2px solid transparent; }
.intake-ladder__stap.is-hier { border-left-color: var(--accent); }
.intake-ladder__n { font-size: var(--t-micro); letter-spacing: .18em; color: var(--ink-3); }
.intake-ladder__stap.is-hier .intake-ladder__n { color: var(--accent); }
.intake-ladder__titel { font-size: .98rem; line-height: 1.35; color: var(--ink); }
.intake-ladder__belofte { font-size: var(--t-small); line-height: 1.45; color: var(--ink-3); }
@media (max-width: 640px) {
  .intake-ladder { grid-template-columns: 1fr; gap: .55rem; }
  .intake-ladder__stap { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .5rem; row-gap: .1rem; }
  .intake-ladder__n { padding-top: .2rem; }
  .intake-ladder__belofte { grid-column: 2; }
}

.review-list { border-top: 1px solid var(--line); margin-top: 2rem; }
.review-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.review-list dt { color: var(--ink-3); font-size: var(--t-small); }
.review-list dd { margin: 0; color: var(--ink); white-space: pre-wrap; }
@media (max-width: 640px) { .review-list div { grid-template-columns: 1fr; gap: .3rem; } }

/* --- Bedankpagina -------------------------------------------------------- */

.thanks {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: var(--paper);
}
.thanks > .ph { position: absolute; inset: 0; }
.thanks::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(100deg, rgba(9,15,11,.9), rgba(9,15,11,.55));
}
/* De merkbalk zweeft boven de foto en boven het waas van ::after uit. Ze
   staat absoluut zodat ze in de stroom geen hoogte kost: alles wat ze daar
   wel zou innemen, duwt de knoppenrij onder de vouw. */
.thanks__merk {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  padding-block: 1.75rem;
}
.thanks__merk .logo { --logo-h: 2rem; display: inline-block; }
/* Alleen de witte variant staat hier, dus die mag niet absoluut liggen:
   dan houdt haar omhulsel geen hoogte over. Zelfde uitzondering als in de
   voetbalk. */
.thanks__merk .logo__wit { position: static; }

/* De bovenmarge was 8rem en droeg niets, want de balk hierboven neemt in
   de stroom geen plaats in. Wat ze wel deed, was de knoppen wegduwen. */
.thanks__inner { position: relative; z-index: 5; padding-block: 6rem 4rem; }
.thanks h1 { color: var(--paper); font-size: clamp(2.75rem, 7vw, 6rem); }
.thanks .lead { color: rgba(251,249,245,.85); margin-top: 1.75rem; max-width: 54ch; }
/* Staat nu onder de knoppen in plaats van erboven: als slotwoord in plaats
   van als drempel. */
.thanks .sig {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(251,249,245,.2);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  color: var(--accent-2);
  font-style: italic;
}

/* --- Print / geen JS ----------------------------------------------------- */

.nojs-note {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: .95rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}
.nojs-note--kritiek {
  border-width: 2px;
  background: var(--qm-accent-licht, #FBF1E8);
  color: var(--ink);
}
.nojs-note--kritiek strong { color: var(--accent); font-weight: 500; }

/* --- De korte weg ---------------------------------------------------------- */

/* --- Aanraakvlakken in de intake ------------------------------------------
   Zie sectie 10 van qualimundi.css. Een invoerveld van drieëndertig pixels
   hoog is met een duim lastig te raken, en juist hier mag niets in de weg
   zitten: dit is het enige formulier van de site. */
@media (max-width: 700px), (pointer: coarse) {
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="number"],
  .field select {
    min-height: 44px;
  }

  .intake-exit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .option,
  .choice { min-height: 44px; }
}

/* --- "Dit adres kennen we al" -------------------------------------------
   Verschijnt zodra het e-mailadres ingetypt is, dus nog voor het verzenden.
   Bewust een eigen vlak en geen gewone .err: dit is geen fout van de
   bezoeker maar nieuws over zijn account, en het moet ook opvallen wanneer
   het nog nergens rood is. */
.account-bekend {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: var(--t-small);
}
.account-bekend[hidden] { display: none; }
.account-bekend p { margin: 0; }
.account-bekend p + p { margin-top: .5rem; }
.account-bekend strong { color: var(--accent); }
.account-bekend a { text-decoration: underline; text-underline-offset: .2em; }

/* Een keuze die er wel staat maar niet kan. Vandaag alleen "ik ben hier
   voor het eerst" op een adres dat al een account heeft. Ze blijft leesbaar
   staan in plaats van te verdwijnen: wie ze zoekt, hoort te zien dat ze
   bestaat en waarom ze nu niet kan. */
.option.is-uit,
.choice.is-uit {
  cursor: not-allowed;
  opacity: .5;
  background: var(--paper-2);
}
.option.is-uit:hover,
.choice.is-uit:hover { border-color: var(--line); transform: none; }
.option.is-uit b { text-decoration: line-through; }
.option.is-uit span { color: var(--accent); text-decoration: none; }

/* Op het laatste scherm zet het script de verderknop op hidden, want daar is
   niets meer om naartoe te gaan. .btn zet zelf een display, en dat wint van
   de ingebouwde regel voor [hidden]; zonder deze regel blijft er dus een knop
   staan die niets doet. */
.intake-foot .btn[hidden] { display: none; }

/* Het akkoordvinkje zichtbaar maken.

   De gewone keuzepillen verbergen hun invoerveld en laten de pil zelf de
   stand tonen: die is klein genoeg om in één oogopslag als knop te lezen.
   Dit blok is een alinea van vier regels, en daar werkt dat niet. Zonder
   zichtbaar vakje leest het als kleine lettertjes en niet als iets dat je
   moet aanklikken. Vandaar een echt vakje voor de tekst, en geen omgekeerd
   blok bij het aanvinken: dat maakte van een aangevinkte tekst een donker
   vlak dat om aandacht schreeuwt terwijl het net in orde is. */
.choice--akkoord::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .1rem;
  border: 1px solid var(--ink-3);
  border-radius: 3px;
  background: var(--paper) no-repeat center / .85rem .85rem;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.choice--akkoord:hover::before { border-color: var(--ink); }
.choice--akkoord:has(input:checked) {
  background: transparent;
  border-color: var(--ink-3);
  color: var(--ink-2);
}
.choice--akkoord:has(input:checked)::before {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.4 3.4L13 4.8' fill='none' stroke='%23FCFAF6' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}