/* ═══════════════════════════════════════════════════════════════════════════
   Woonroute: de instap, de dialoog met de vragen, en de woonroutepagina.

   Ombouwinstructie hoofdstuk 4, 5, 7 en 15. Alle regels beginnen met .wr-, net
   zoals blog.css met .bl- begint, zodat dit bestand naast landing.css en
   blog.css kan hangen zonder iets anders te raken.

   De kleuren komen uit de bestaande tokens van landing.css: --terra en
   --terra-soft voor het accent, --surface en --border-hi voor de vlakken, --txt,
   --txt-dim en --txt-faint voor de tekst. Niets wordt hier opnieuw gedefinieerd,
   want een tweede palet naast het eerste loopt binnen een maand uit de pas.

   Eén uitzondering: de dialoog krijgt --bg en niet --surface. Alle kaarten op
   de site zijn doorschijnend met een blur erachter, en dat staat mooi op een
   pagina. Een modale dialoog die doorschijnend is laat je de pagina eronder
   meelezen terwijl je een antwoord probeert te kiezen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Foutrood in twee sterktes. Hetzelfde donkere rood is op een donkere
   achtergrond nauwelijks te lezen, en een foutmelding die je moet zoeken is
   geen foutmelding. */
/* De knopkleur van het eindscherm.

   `--terra` (#C26B45) haalt met witte tekst 3,8 op 1 en zakt daarmee door de
   ondergrens voor gewone tekst. Deze twee halen 5,2. Een eigen token en niet
   `--terra` zelf: dat staat ruim driehonderd keer in deze drie stylesheets en
   een kleurwijziging daar is een aparte beslissing. */
:root {
  --wr-knop: #A9552F;
  --wr-knop-hover: #9A4B28;
}

:root { --wr-fout: #B4462F; }
[data-theme='dark'] { --wr-fout: #F0917A; }

/* ── De instap op een pagina ──────────────────────────────────────────────── */

.wr-instap {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 48px 24px;
}

.wr-instap-kaart {
  display: grid;
  gap: 18px;
  padding: 28px 30px 30px;
  border: 1px solid var(--border-hi);
  border-radius: 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--terra) 9%, transparent), transparent 60%),
    var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.16);
}

.wr-instap-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.wr-instap-kop h2,
.wr-verder h2 {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--txt);
  text-wrap: balance;
}

.wr-instap-kop p,
.wr-verder p {
  margin: 8px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt-dim);
}

.wr-instap-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-faint);
}

.wr-instap-meta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--terra);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wr-instap-klein {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--txt-faint);
}

/* ── De zes fasekaarten ───────────────────────────────────────────────────── */

/* Drie kolommen en twee rijen. Zes naast elkaar breekt "Mijn bod is
   geaccepteerd" middenin af, en dan leest de instap als een foutmelding.
   `minmax(0, 1fr)` en `align-items: stretch`: zonder dat worden de kaarten zo
   breed en hoog als hun eigen tekst, en dan staat er een rommelig trapje in
   plaats van een raster. */
.wr-fases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* `1fr` op de rijen, niet `auto`: anders is de rij met de langste tekst hoger
     dan de andere, en dan staan er zes kaarten in twee verschillende maten. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
}

.wr-fases > * { width: 100%; height: 100%; }

/* In de dialoog twee kolommen. Die is 560 breed, net als de modals in de tool,
   en drie kaarten passen daar alleen als elke titel over twee regels breekt.
   Op de homepage en op een lege woonroute is het blok ruim twee keer zo breed
   en blijven het er drie. */
.wr-dialoog .wr-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wr-fase {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 13px;
  align-items: center;
  text-align: left;
  padding: 15px 16px;
  border: 1px solid var(--border-hi);
  border-radius: 18px;
  background: color-mix(in srgb, var(--txt) 3%, transparent);
  color: var(--txt);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.25s var(--easing);
}

.wr-fase:hover {
  border-color: var(--terra);
  background: var(--terra-soft);
  transform: translateY(-2px);
}

.wr-fase:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

.wr-fase[aria-pressed='true'] {
  border-color: var(--terra);
  background: var(--terra-soft);
}

.wr-fase-ico {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--terra-soft);
  color: var(--terra);
}

.wr-fase-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wr-fase b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.wr-fase small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--txt-dim);
}

/* ── Terugkerende bezoeker ────────────────────────────────────────────────── */

.wr-verder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.wr-verder-acties {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Knoppen ──────────────────────────────────────────────────────────────── */

.wr-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
  font: 600 15px/1.25 inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.18s, opacity 0.18s;
}

.wr-knop:hover { filter: brightness(1.07); }
.wr-knop:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.wr-knop[disabled] { opacity: 0.45; cursor: not-allowed; }

/* De hoofdknop draagt een lange zin. Hij mag over twee regels lopen; hem
   kleiner zetten tot hij past maakt de belangrijkste tekst het slechtst
   leesbaar. */
.wr-knop.is-groot {
  width: 100%;
  padding: 15px 22px;
  font-size: 16px;
  line-height: 1.3;
  text-wrap: balance;
}

.wr-tekstknop {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--terra);
  font: 600 14px/1.4 inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.wr-tekstknop:hover { text-decoration: underline; text-underline-offset: 3px; }
.wr-tekstknop:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 6px; }
.wr-tekstknop.is-stil { color: var(--txt-faint); font-weight: 500; }
.wr-tekstknop small { font-size: 12px; font-weight: 400; color: var(--txt-faint); }

.wr-icoonknop {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--txt-dim);
  cursor: pointer;
}

.wr-icoonknop:hover { background: var(--terra-soft); color: var(--terra); border-color: var(--terra); }
.wr-icoonknop:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.wr-icoonknop svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── De dialoog ───────────────────────────────────────────────────────────── */

.wr-dialoog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  padding: 0;
  /* De browser centreert een modale dialoog met `inset: 0; margin: auto`. De
     Tailwind-reset in globals.css zet die marge terug op nul, en dan plakt de
     dialoog linksboven. Hier staat hij er weer in, zodat de reset elders kan
     blijven zoals hij is. */
  margin: auto;
  /* Hetzelfde recept als `.modal` in de tool (src/app/globals.css): drie lagen
     glas met een terracotta gloed linksboven, een blur erachter en de dubbele
     schaduw. De waarden staan hier uitgeschreven en niet als token, want de
     tokens van de tool bestaan op de marketinghost niet; wat hier staat is
     letterlijk wat --radius-modal, --blur-tile, --shadow-inset en
     --shadow-modal daar oplossen. */
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(181, 106, 84, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.045) 100%),
    rgba(15, 22, 18, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--txt);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: wr-modaal-in 0.3s ease-out;
}

/* Zoals `modalIn` in de tool: even opkomen en meeschalen, zodat hij niet uit
   het niets op het scherm staat. */
@keyframes wr-modaal-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.wr-dialoog::backdrop {
  background: rgba(5, 12, 9, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: wr-vervaag 0.25s ease-out;
}

@keyframes wr-vervaag { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .wr-dialoog,
  .wr-dialoog::backdrop { animation: none; }
}

/* ── Dezelfde flow, maar in het instapblok ────────────────────────────────── */

/* De vraag verschijnt waar de zes kaarten stonden. Het kader eromheen blijft
   het kader van het blok; alleen de binnenruimte gaat eruit, want die brengt
   `.wr-top` en `.wr-lijf` zelf mee. */
.wr-instap-kaart.is-flow {
  gap: 0;
  padding: 0;
  overflow: hidden;
  /* Geen eigen breedte. De kaart is even breed als het blok waarin hij staat,
     en blijft dat ook als de flow erin schuift.

     Hier stond op 13 oktober 2026 een grens van 620 px, bedoeld om de
     leesregel kort te houden. Het gevolg was een sprong: de zes fasekaarten
     stonden op 1084 px en zodra je er één aanklikte kromp de kaart naar 620,
     midden onder je vinger. Dat is erger dan een lange regel. Wie de regel wil
     inkorten, doet dat op de tekst binnenin en niet op de kaart. */
}

.wr-inline {
  animation: wr-inline-in 0.22s ease-out;
}

/* In de dialoog is de hoogte begrensd en scrollt het lijf; hier bepaalt de
   inhoud de hoogte en scrollt de pagina. Een eigen scrollgebied middenin een
   pagina geeft twee balken die om dezelfde vingerbeweging vechten. */
.wr-inline .wr-blad { max-height: none; }
.wr-inline .wr-lijf { overflow: visible; }

@keyframes wr-inline-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wr-inline { animation: none; }
}

/* Eén scrollgebied. Twee tegelijk, achtergrond en dialoog, laat de pagina
   onder je vingers wegglijden terwijl je een antwoord probeert te kiezen. */
.wr-blad {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.wr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-hi);
}

.wr-naam {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--txt-dim);
}

.wr-stand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px 0;
}

.wr-chip {
  /* inline-block en niet inline-flex: ::first-letter hieronder werkt alleen op
     een blokcontainer. */
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--terra-soft);
  color: var(--terra);
  font-size: 12px;
  font-weight: 600;
}

/* De korte fasenamen staan in kleine letters, want ze zijn geschreven om
   middenin een zin te passen ("als je doorgaat naar sleutel verwacht"). Als
   chip staan ze alleen, en dan hoort er een hoofdletter voor. */
.wr-chip::first-letter { text-transform: uppercase; }

.wr-tel {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-faint);
}

.wr-lijf {
  display: grid;
  gap: 16px;
  padding: 16px 24px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wr-kop {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--txt);
  text-wrap: balance;
}

.wr-kop:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; border-radius: 6px; }

.wr-uitleg {
  margin: -6px 0 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-dim);
}

/* ── Antwoorden ───────────────────────────────────────────────────────────── */

.wr-veld { margin: 0; padding: 0; border: 0; }

.wr-opties { display: grid; gap: 8px; }

.wr-optie {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  background: color-mix(in srgb, var(--txt) 3%, transparent);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}

.wr-optie:hover { border-color: var(--terra); background: var(--terra-soft); }
.wr-optie:has(input:checked) { border-color: var(--terra); background: var(--terra-soft); }
.wr-optie:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }
.wr-optie.is-zwak b { color: var(--txt-dim); font-weight: 500; }

/* De radio blijft een echte radio: pijltjestoetsen, schermlezer en
   formuliersemantiek komen er gratis bij. Hij wordt alleen opnieuw getekend. */
.wr-optie input {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--terra);
}

.wr-optie-tekst { display: grid; gap: 2px; }
.wr-optie-tekst b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--txt); }
.wr-optie-tekst small { font-size: 12px; line-height: 1.4; color: var(--txt-dim); }

.wr-acties {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ── Voorproefje ──────────────────────────────────────────────────────────── */

.wr-proef {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  background: color-mix(in srgb, var(--txt) 3%, transparent);
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}

.wr-proef:hover { border-color: var(--terra); background: var(--terra-soft); }
.wr-proef:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.wr-proef-titel { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--txt); }
.wr-proef-reden { font-size: 13px; line-height: 1.5; color: var(--txt-dim); }
.wr-proef-lees { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--terra); }

/* ── Het e-mailformulier ──────────────────────────────────────────────────── */

.wr-form {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* Op het eindscherm staat de visual erboven en niet een stuk lopende tekst.
   Een streep daartussen zou de visual van zijn eigen kop losknippen. */
.wr-form.is-eind { border-top: 0; padding-top: 0; }

.wr-form-uitleg {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-dim);
}

.wr-label { font-size: 13px; font-weight: 600; color: var(--txt); }

.wr-input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  background: color-mix(in srgb, var(--txt) 4%, transparent);
  color: var(--txt);
  font: 400 16px/1.3 inherit;
}

.wr-input:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; border-color: var(--terra); }
.wr-input[aria-invalid='true'] { border-color: var(--wr-fout); }

/* De regel staat er altijd, ook leeg. Zonder die ruimte springt de hoofdknop
   omlaag op het moment dat de fout verschijnt, en dan mist de volgende klik. */
.wr-fout {
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--wr-fout);
}

.wr-onder {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--txt-faint);
}

.wr-stil {
  justify-self: start;
  font-size: 12px;
  color: var(--txt-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wr-stil:hover { color: var(--txt-dim); }

.wr-na {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.wr-na > :first-child { margin-top: 12px; }

/* ── Het eindscherm van de intake ─────────────────────────────────────────
   Herzien op 13 oktober 2026. Eerst de route, dan pas de vraag om een adres.
   Eén scheidingslijn in het hele scherm, boven het formulier: die markeert de
   overgang van "kijken" naar "iets geven". Meer lijnen maakten er drie losse
   blokjes van die niets met elkaar leken te hebben. */

/* ── Het eindscherm ───────────────────────────────────────────────────────

   Het breekpunt kijkt naar de container en niet naar het venster. Dit scherm
   staat op drie plekken met drie breedtes: de dialoog is 560 px en kan op een
   scherm van 1280 staan, het blok op de homepage is ruim 1000 px. Een
   `@media (min-width: 640px)` ziet alleen het venster, en dan kreeg de dialoog
   zes genaamde kolommen in 560 px.

   Mobiel-eerst opgeschreven: punten zonder namen is de standaard, de volle
   tijdlijn is de uitzondering. Kent een browser `@container` niet, dan valt
   hij terug op die vorm, en die past overal. */

.wr-eind {
  /* Eén breedte voor alle onderdelen: de volle kolom. De tijdlijn, het
     fase-blok, het formulier en de uitweg eronder lopen tot dezelfde
     rechterkant, en de marge links en rechts is daarmee gelijk; die komt van
     de 24 px padding van `.wr-lijf` en staat dus op één plek.

     Hier stond 620 px, links uitgelijnd. Dat hield de leesregel kort, maar
     liet op een brede kaart een gat van driehonderd pixels aan de rechterkant
     staan, en dan oogt het scherm scheef in plaats van rustig. */
  --wr-eind-breedte: 100%;

  container-type: inline-size;
  position: relative;
  display: grid;
  gap: 0;
}

/* De knop zweeft rechtsboven; de kop houdt ruimte vrij zodat hij er niet
   onderdoor loopt. */
.wr-eind-sluit {
  position: absolute;
  top: -4px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  background: transparent;
  color: var(--txt-dim);
  cursor: pointer;
}

.wr-eind-sluit:hover { color: var(--txt); border-color: var(--txt-faint); }
.wr-eind-sluit:focus-visible { outline: 2px solid var(--wr-knop); outline-offset: 2px; }

.wr-eind-kop {
  padding-right: 48px;
  font-size: clamp(22px, 2.4vw, 27px);
}

.wr-eind-sub {
  max-width: var(--wr-eind-breedte);
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt-dim);
}

/* ── De tijdlijn ──────────────────────────────────────────────────────── */

.wr-tijdlijn { max-width: var(--wr-eind-breedte); margin-top: 22px; }

.wr-tl {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wr-tl-stap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* De lijn hangt aan elke fase behalve de laatste en overbrugt precies de
   afstand tot de volgende punt, zodat hij nooit voorbij het einde doorloopt. */
.wr-tl-stap:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--border-hi);
}

.wr-tl-stap.is-gehad:not(:last-child)::before { background: var(--wr-knop); opacity: 0.5; }

.wr-tl-punt {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: var(--bg);
}

.wr-tl-stap.is-gehad .wr-tl-punt {
  border-color: var(--wr-knop);
  background: var(--wr-knop);
  opacity: 0.5;
}

.wr-tl-stap.is-nu .wr-tl-punt {
  border-color: var(--wr-knop);
  background: var(--wr-knop);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wr-knop) 18%, transparent);
}

/* Smal: alleen de punten. De namen passen niet onder een kolom van 55 px en
   staan in de uitklaplijst eronder. */
.wr-tl-naam { display: none; }

.wr-tl-knop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--txt-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.wr-tl-knop:hover { color: var(--txt); }
.wr-tl-knop:focus-visible { outline: 2px solid var(--wr-knop); outline-offset: 2px; border-radius: 6px; }

.wr-chevron { transition: transform 0.2s var(--easing); }
.wr-tl.is-open ~ .wr-tl-knop .wr-chevron { transform: rotate(180deg); }

/* Uitgeklapt: de fases onder elkaar, punt links en naam rechts. */
.wr-tl.is-open {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.wr-tl.is-open .wr-tl-stap {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}

.wr-tl.is-open .wr-tl-stap:not(:last-child)::before {
  top: 50%;
  left: 6px;
  width: 1px;
  height: 100%;
}

.wr-tl.is-open .wr-tl-naam {
  display: block;
  font-size: 13px;
  color: var(--txt-faint);
}

.wr-tl.is-open .wr-tl-stap.is-nu .wr-tl-naam { color: var(--txt); font-weight: 600; }

/* ── Het blok van de huidige fase ─────────────────────────────────────── */

.wr-fasekaart {
  display: grid;
  gap: 5px;
  max-width: var(--wr-eind-breedte);
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--wr-knop) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--wr-knop) 10%, transparent);
}

.wr-fasekaart-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wr-knop);
}

.wr-fasekaart-uitleg {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--txt);
}

.wr-fasekaart-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 3px;
  font-size: 13px;
  color: var(--txt-faint);
}

.wr-tekstlink {
  padding: 0;
  border: 0;
  background: none;
  color: var(--txt-dim);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wr-tekstlink:hover { color: var(--txt); }
.wr-tekstlink:focus-visible { outline: 2px solid var(--wr-knop); outline-offset: 2px; border-radius: 4px; }

/* Gecentreerd onder het formulier en niet onder het hele scherm: de kolom is
   links uitgelijnd, dus midden van het venster zou ernaast staan. */
.wr-tekstlink.is-zonder {
  justify-self: start;
  width: var(--wr-eind-breedte);
  max-width: 100%;
  margin-top: 14px;
  text-align: center;
  color: var(--txt-faint);
}

/* ── Het formulier ────────────────────────────────────────────────────── */

.wr-form.is-eind {
  max-width: var(--wr-eind-breedte);
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
  gap: 0;
}

.wr-eind-label {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
}

.wr-input.is-eind { min-height: 52px; }

.wr-eind-hulp {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt-faint);
}

.wr-knop.is-eind {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  font-weight: 600;
  background: var(--wr-knop);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.wr-knop.is-eind:hover { background: var(--wr-knop-hover); filter: none; }
.wr-knop.is-eind:focus-visible { outline: 2px solid var(--wr-knop); outline-offset: 3px; }

.wr-eind-bewaard {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-faint);
}

/* ── Breder dan 640 px: de tijdlijn met namen ─────────────────────────── */

@container (min-width: 640px) {
  /* De kolommen staan tegen elkaar aan, want de lijn tussen de punten moet
     doorlopen. De ruimte tussen twee namen komt daarom van padding op de naam
     zelf. Zonder dat raakt "Bod geaccepteerd" zijn buurman, want die naam vult
     een kolom van 103 px precies. Met deze ruimte breekt hij netjes over twee
     regels. */
  .wr-tl-naam {
    display: block;
    margin-top: 9px;
    padding-inline: 6px;
    font-size: 12.5px;
    line-height: 1.3;
    text-align: center;
    color: var(--txt-faint);
  }

  /* `stretch` en niet `center`: met `center` krimpt de kolom naar de breedte
     van de tekst, breekt "Bod geaccepteerd" niet af en loopt hij tegen zijn
     buurman aan. Zo breekt de naam binnen zijn eigen kolom, zoals het hoort. */
  /* De punten op één hoogte. De rij centreert zijn kolommen verticaal, en dan
     duwt een naam van twee regels zijn eigen punt omhoog. */
  .wr-tl { align-items: flex-start; }

  .wr-tl-stap {
    flex-direction: column;
    align-items: stretch;
  }

  .wr-tl-punt { margin-inline: auto; }

  .wr-tl-stap.is-nu .wr-tl-naam { color: var(--txt); font-weight: 600; }

  /* De uitklapknop hoort bij het smalle scherm; hier staan de namen er al. */
  .wr-tl-knop { display: none; }

  .wr-fasekaart { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-chevron { transition: none; }
}

/* Het veld met de herkenning erin. De melding ligt over het veld heen en duwt
   de tekst niet opzij; wie lang typt schuift er netjes onderdoor. */
.wr-veld { position: relative; display: grid; }

.wr-herkend {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  font-weight: 600;
  /* Groen is hier status: "dit veld is herkend". Het token heet --green en
     staat in landing.css; geen eigen kleur. */
  color: var(--green);
  background: var(--bg);
  padding-left: 8px;
}

.wr-voet {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--txt-faint);
}

.wr-voet-knop {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--txt-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wr-voet-knop:hover { color: var(--txt-dim); }
.wr-voet-knop:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 4px; }

.wr-tekstknop.is-klein { font-size: 13px; }

/* Visueel verborgen, maar wel voorgelezen. Niet `display:none`: dan slaat een
   schermlezer het label over en is het veld naamloos. */
.wr-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Het honeypotveld.

   Deze regel ontbrak tot 13 oktober 2026. De klasse stond wel in de JSX maar
   nergens in een stylesheet, dus het label "Bedrijfsnaam" en zijn invoerveld
   stonden gewoon zichtbaar in het formulier: een val die iedereen ziet behalve
   de bot waarvoor hij bedoeld is.

   Buiten beeld schuiven en niet `display:none` of `hidden`: een bot die de val
   kent slaat precies die twee over, en dan vult hij het veld niet in en gaat
   hij er alsnog doorheen. De servercontrole in /api/woonroute/start blijft
   ongewijzigd; dit verandert alleen wat een mens ziet. */
.wr-val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ── Het codescherm ───────────────────────────────────────────────────────── */

.wr-cijfers {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.wr-cijfer {
  width: 100%;
  min-width: 0;
  padding: 14px 0;
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  background: color-mix(in srgb, var(--txt) 4%, transparent);
  color: var(--txt);
  font: 600 20px/1 inherit;
  text-align: center;
}

.wr-cijfer:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; border-color: var(--terra); }
.wr-cijfer[aria-invalid='true'] { border-color: var(--wr-fout); }

.wr-code-na {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
}

/* ── Mobiel ───────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .wr-instap { padding: 36px 16px 12px; }
  /* Zes vakjes naast elkaar op 360 px: smaller en dichter op elkaar, zodat de
     rij binnen de schermbreedte blijft in plaats van horizontaal te scrollen. */
  .wr-cijfers { gap: 6px; }
  .wr-cijfer { padding: 12px 0; font-size: 18px; }
  .wr-instap-kaart { padding: 22px 18px; border-radius: 22px; }
  .wr-fases { grid-template-columns: minmax(0, 1fr); }

  /* Volledig scherm, zonder smalle stroken homepage ernaast. De knoppen staan
     in de gewone documentstroom en niet op een vaste onderbalk: die zou op een
     klein scherm met open toetsenbord het e-mailveld afdekken. */
  .wr-dialoog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .wr-blad { height: 100%; }
  .wr-top { padding: 12px 14px; }
  .wr-stand { padding: 12px 18px 0; }
  .wr-lijf { padding: 14px 18px calc(28px + env(safe-area-inset-bottom)); }
  /* De marge voor de thuisbalk hoort bij een schermvullende dialoog. In het
     blok staat er gewoon pagina onder. */
  .wr-inline .wr-lijf { padding-bottom: 22px; }
  .wr-acties { gap: 14px; }
  .wr-acties .wr-knop { flex: 1 1 auto; }
}

@media (max-width: 380px) {
  .wr-lijf { padding-left: 14px; padding-right: 14px; }
  .wr-optie { padding: 13px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-fase, .wr-optie, .wr-proef, .wr-knop { transition: none; }
  .wr-fase:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   De woonroutepagina
   ═══════════════════════════════════════════════════════════════════════════ */

.wr-pagina {
  min-height: 100dvh;
  padding: 0 0 80px;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--body, inherit);
}

/* 116px: de vaste kopbalk van landing.css staat er overheen. Zelfde maat als
   .bl-art-wrap in blog.css, zodat de blog en deze pagina op dezelfde hoogte
   beginnen. */
.wr-pagina-binnen {
  max-width: 1080px;
  margin: 0 auto;
  padding: 116px 28px 0;
  display: grid;
  /* `minmax(0, 1fr)` en niet de impliciete `auto`-kolom. Een auto-kolom wordt zo
     breed als het breedste kind wil zijn, en één blok met een leesbreedte in
     `ch` duwt daarmee de hele pagina buiten het scherm. Dat viel niet op omdat
     de body `overflow-x: hidden` heeft: de tekst werd afgeknipt in plaats van
     schuifbaar, en er verscheen nergens een schuifbalk. */
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.wr-pagina-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.wr-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-faint);
}

.wr-titel {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--txt);
  text-wrap: balance;
}

.wr-intro {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--txt-dim);
}

.wr-knop.is-sec {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--txt);
}

.wr-knop.is-sec:hover { border-color: var(--terra); background: var(--terra-soft); filter: none; }

/* Het kaartvlak met de situatie, de balk en het resultaat. Dezelfde
   doorschijnende kaart als elders op de site. */
.wr-blok {
  display: grid;
  gap: 24px;
  padding: 26px 28px 30px;
  border: 1px solid var(--border-hi);
  border-radius: 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--terra) 7%, transparent), transparent 55%),
    var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Dezelfde ruil als in het instapblok: staat de flow erin, dan brengt die zijn
   eigen binnenruimte mee. */
.wr-blok.is-flow {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.wr-situatie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.wr-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.wr-chip.is-stil {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--txt-dim);
}

/* ── Verfijnen ────────────────────────────────────────────────────────────── */

.wr-verfijn {
  display: grid;
  gap: 18px;
  padding: 20px 0 4px;
  border-top: 1px solid var(--border);
}

.wr-verfijn-vraag { margin: 0; padding: 0; border: 0; }
.wr-verfijn-vraag legend { padding: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--txt); }
.wr-verfijn-opties { display: flex; flex-wrap: wrap; gap: 7px; }

.wr-pil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  font-size: 13px;
  color: var(--txt-dim);
  cursor: pointer;
}

.wr-pil:hover { border-color: var(--terra); color: var(--txt); }
.wr-pil:has(input:checked) { border-color: var(--terra); background: var(--terra-soft); color: var(--txt); font-weight: 600; }
.wr-pil:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }
.wr-pil input { width: 15px; height: 15px; margin: 0; accent-color: var(--terra); }

/* ── De fasebalk ──────────────────────────────────────────────────────────── */

.wr-balk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
}

/* De lijn loopt van het midden van de eerste bol tot het midden van de laatste,
   en niet van rand tot rand: anders steekt hij er aan beide kanten uit. */
.wr-balk::before {
  content: '';
  position: absolute;
  left: calc(100% / 12);
  right: calc(100% / 12);
  top: 31px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--terra) 0 var(--wr-af, 0%), var(--border-hi) var(--wr-af, 0%) 100%);
}

.wr-balk li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.wr-bol {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Doorzichtig, en geen ring. Allebei stonden ze op `--bg`, bedoeld om de
     doorlopende voortgangslijn van de volle balk achter de bol weg te werken.
     Maar deze balk staat ook in een kaart op de homepage, en daar is `--bg`
     niet de achtergrond maar zwart: dan zie je een donkere schijf met een
     donkere ring eromheen. De twee regelvarianten hebben het niet nodig, want
     die tekenen losse streepjes met ruimte ernaast; alleen de volle balk krijgt
     de maskering terug, hieronder. */
  background: transparent;
  border: 2px solid var(--border-hi);
  font: 700 12.5px var(--display, inherit);
  color: var(--txt-faint);
}

/* De volle balk heeft één lijn die van links naar rechts doorloopt. Daar moet
   de bol wél een gat in maken, anders loopt de lijn er dwars doorheen. */
.wr-balk:not(.is-compact):not(.is-route) .wr-bol {
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg);
}

.wr-balk li.is-af .wr-bol { background: var(--terra); border-color: var(--terra); color: #fff; }
.wr-balk li.is-af .wr-bol svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.wr-balk li.is-nu .wr-bol {
  width: 36px;
  height: 36px;
  margin-top: -3px;
  border: 3px solid var(--terra);
  color: var(--terra);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px var(--terra-soft);
}

.wr-halte {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--txt-faint);
  text-wrap: balance;
}

.wr-balk li.is-nu .wr-halte { color: var(--txt); }

/* ── Het resultaat ────────────────────────────────────────────────────────── */

.wr-groep { display: grid; gap: 12px; }

.wr-groep-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.wr-groep-kop h2 {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--txt);
}

.wr-groep-kop p { margin: 0; font-size: 13px; color: var(--txt-dim); }

/* "Om alvast te weten wat volgt" is uitleg en geen telling, dus die staat
   onder de kop en niet rechts ernaast. */
.wr-groep-kop.is-onder { display: block; }
.wr-groep-kop.is-onder p { margin-top: 6px; }

/* De rail. Schuift met de pijlen, de scrollbalk, swipen en de pijltjestoetsen.
   Scroll-snap zodat een kaart niet halverwege blijft hangen; de negatieve
   marges laten hem tot de rand van het blok lopen, zodat de volgende kaart er
   half uit komt en zichtbaar is dat er meer staat. */
.wr-kaarten {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-left: 2px;
  padding: 2px 2px 6px;
  margin: 0 -2px;
}

.wr-kaarten::-webkit-scrollbar { display: none; }

.wr-kaarten:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 4px;
  border-radius: 20px;
}

.wr-kaarten > .wr-kaart {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
}

@media (max-width: 920px) {
  .wr-kaarten > .wr-kaart { flex-basis: calc((100% - 16px) / 2); }
}

@media (max-width: 620px) {
  .wr-kaarten > .wr-kaart { flex-basis: 86%; }
}

/* De kaart zelf. Zelfde glasrecept als de rest van de site: `--surface` met een
   blur erachter en een rand van `--border`, zoals .phase-card in landing.css. */
.wr-kaart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--txt);
  text-decoration: none;
  transition: border-color 0.4s var(--easing), background 0.4s var(--easing), transform 0.4s var(--easing);
}

/* De eerste kaart is "Begin hiermee" en krijgt de terracotta rand. Dat is
   hetzelfde signaal als het label erboven, niet een extra: wie de kleur niet
   ziet leest nog steeds "Begin hiermee". */
.wr-kaarten > .wr-kaart:first-child { border-color: var(--terra); }

.wr-kaart:hover { border-color: var(--terra); background: var(--terra-soft); transform: translateY(-2px); }
.wr-kaart:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.wr-kaart-beeld {
  display: block;
  height: 150px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 70%, black);
}

.wr-kaart-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 0.55s ease;
}

.wr-kaart:hover .wr-kaart-beeld img { transform: scale(1.11); }

.wr-kaart-tekst { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px 16px; }
.wr-kaart-meta { font-size: 12px; color: var(--txt-faint); }
.wr-kaart-titel { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--txt); }

.wr-kaart-reden {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt-dim);
}

.wr-vink {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  fill: none;
  stroke: var(--terra);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Wat hierna komt, en wat later ────────────────────────────────────────── */

/* Twee kolommen met kaartjes in plaats van regels onder elkaar. Zonder foto:
   dit is een vooruitblik en geen leesaanbod van vandaag, en met evenveel beeld
   als "Nu relevant" zou het evenveel aandacht vragen. */
.wr-vooruit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wr-vooruit-kaart {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 17px 18px;
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  background: color-mix(in srgb, var(--txt) 2%, transparent);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.wr-vooruit-kaart:hover { border-color: var(--terra); background: var(--terra-soft); }
.wr-vooruit-kaart:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.wr-vooruit-n {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
}

.wr-vooruit-tekst { flex: 1 1 auto; min-width: 0; }
.wr-vooruit-tekst b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--txt); }
.wr-vooruit-tekst small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--txt-dim); }

.wr-vooruit-pijl {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--txt-faint);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.wr-vooruit-kaart:hover .wr-vooruit-pijl { stroke: var(--terra); transform: translateX(2px); }

.wr-vouw { border-top: 1px solid var(--border); }

.wr-vouw summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-dim);
  list-style: none;
}

.wr-vouw summary::-webkit-details-marker { display: none; }
.wr-vouw[open] summary { color: var(--txt); }
.wr-vouw:focus-within summary { color: var(--txt); }
.wr-vouw summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 8px; }

.wr-chev {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-90deg);
  transition: transform 0.18s ease;
}

.wr-vouw[open] .wr-chev { transform: rotate(0deg); }

/* "4 artikelen" leest meteen; een bolletje met een 4 erin moet je eerst
   uitleggen aan jezelf. */
.wr-vouw summary .wr-tel {
  font-size: 13px;
  font-weight: 400;
  color: var(--txt-faint);
}

.wr-vouw-uitleg { margin: 0 0 14px; font-size: 13px; color: var(--txt-faint); }
.wr-leeg { margin: 0; font-size: 15px; line-height: 1.6; color: var(--txt-dim); }

/* ── Planning en beheer ───────────────────────────────────────────────────── */

.wr-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 32px;
  padding: 24px 28px;
  border: 1px solid var(--border-hi);
  border-radius: 24px;
  background: color-mix(in srgb, var(--terra) 7%, transparent);
}

.wr-plan h2 {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--txt);
}

.wr-plan p { margin: 7px 0 0; max-width: 52ch; font-size: 14px; line-height: 1.55; color: var(--txt-dim); }
.wr-plan-actie { display: grid; gap: 7px; justify-items: start; }
.wr-plan-actie small { font-size: 12px; color: var(--txt-faint); }

.wr-beheer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.wr-beheer p { margin: 0; max-width: 60ch; font-size: 12px; line-height: 1.6; color: var(--txt-faint); }

/* ── Mobiel ───────────────────────────────────────────────────────────────── */

/* Zelfde breekpunt en zelfde maat als .bl-art-wrap in blog.css: vanaf hier is
   de kopbalk lager, en dan hoort de pagina mee omhoog. */
@media (max-width: 920px) {
  .wr-pagina-binnen { padding-top: 96px; }
}

@media (max-width: 760px) {
  .wr-pagina-binnen { padding-left: 16px; padding-right: 16px; gap: 18px; }
  .wr-blok { padding: 20px 16px 24px; border-radius: 22px; gap: 20px; }
  .wr-kaarten { grid-template-columns: minmax(0, 1fr); }
  .wr-vooruit { grid-template-columns: minmax(0, 1fr); }
  .wr-plan { padding: 20px 18px; border-radius: 20px; }
  .wr-plan-actie { width: 100%; }
  .wr-plan-actie .wr-knop { width: 100%; }
  .wr-pagina-kop .wr-knop { width: 100%; }
}

/* Zes haltenamen naast elkaar passen niet op een telefoon. Ze verdwijnen uit
   beeld maar niet uit de toegankelijkheidsboom: het blijven de namen van de
   haltes, zodat een schermlezer ze nog steeds voorleest. Alleen de huidige
   halte houdt zijn naam zichtbaar, want die vertelt waar je staat. */
@media (max-width: 620px) {
  .wr-balk li:not(.is-nu) .wr-halte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .wr-balk li.is-nu .wr-halte { font-size: 11px; white-space: nowrap; }
}

/* De korte fasenamen zijn geschreven om in een zin te passen en staan daarom
   in kleine letters. Als los label onder een bolletje horen ze met een
   hoofdletter te beginnen. */
.wr-halte::first-letter { text-transform: uppercase; }

/* Op een heel smal scherm liggen zes bollen van 30 pixels in kolommen van
   nog geen 53. De huidige bol met zijn ring past er dan niet meer naast de
   volgende, dus wordt alles een maat kleiner en mag de naam eronder afbreken. */
@media (max-width: 420px) {
  .wr-balk::before { top: 28.5px; height: 3px; }
  .wr-bol { width: 24px; height: 24px; font: 700 11px var(--display, inherit); }
  .wr-balk:not(.is-compact):not(.is-route) .wr-bol { box-shadow: 0 0 0 3px var(--bg); }
  .wr-balk li.is-af .wr-bol svg { width: 11px; height: 11px; }
  .wr-balk li.is-nu .wr-bol {
    width: 29px;
    height: 29px;
    margin-top: -2.5px;
  }
  .wr-balk:not(.is-compact):not(.is-route) li.is-nu .wr-bol {
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--terra-soft);
  }
  .wr-balk li.is-nu .wr-halte { white-space: normal; min-width: 64px; max-width: 80px; }
}

/* Op de blog zit de zoekbalk erboven. Iets minder ruimte dan op de homepage,
   maar niet nul: strak tegen de zoekbalk aan leest het als één blok. */
.wr-instap.is-blog { padding-top: 32px; padding-bottom: 44px; }
@media (max-width: 760px) { .wr-instap.is-blog { padding: 20px 16px 32px; } }

/* ── De samenvatting: waar je staat, in het kort ──────────────────────────── */

.wr-samenvatting-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.wr-samenvatting-kop h2 {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--txt);
  text-wrap: balance;
}

.wr-samenvatting-kop p {
  margin: 8px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt-dim);
}

.wr-knop.is-klein {
  flex: none;
  padding: 9px 16px;
  font-size: 13px;
  gap: 8px;
}

.wr-knop-ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De chips en de link naar de antwoorden staan op één regel. De link is geen
   knop: hij brengt je naar de woonroute, waar je het ook echt kunt wijzigen. */
.wr-samenvatting-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.wr-samenvatting-chips .wr-stil { font-size: 13px; }

/* ── De compacte fasebalk ─────────────────────────────────────────────────── */

/* Geen raster van zes kolommen met namen eronder, maar één regel met het
   nummer en de naam ernaast. Past hij niet, dan schuift hij; een fasebalk die
   afbreekt vertelt niet meer waar je staat. */
.wr-balk.is-compact {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 0 2px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.wr-balk.is-compact::-webkit-scrollbar { display: none; }
.wr-balk.is-compact::before { display: none; }

.wr-balk.is-compact li {
  display: flex;
  align-items: center;
  gap: 9px;
  /* De haltes verdelen zich over de breedte in plaats van links te klonteren.
     De eerste heeft geen streepje voor zich en groeit dus niet mee. */
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.wr-balk.is-compact li:first-child { flex: none; }

/* Het streepje tussen twee haltes. Een echte lijn en geen border, zodat hij
   meegroeit met de ruimte die overblijft. */
.wr-balk.is-compact li + li::before {
  content: '';
  flex: 1 1 auto;
  min-width: 14px;
  height: 1px;
  background: var(--border-hi);
  margin: 0 12px 0 0;
  order: -1;
}

.wr-balk.is-compact .wr-bol {
  flex: none;
  width: 26px;
  height: 26px;
  font: 600 12px var(--body, inherit);
  background: transparent;
  border: 1px solid var(--border-hi);
  box-shadow: none;
  margin: 0;
}

.wr-balk.is-compact li.is-af .wr-bol {
  background: transparent;
  border-color: var(--border-hi);
  color: var(--txt-faint);
}

/* Terracotta, net als de balk op /woonroute. Wit was de enige plek op de hele
   woonroute waar de huidige halte een andere kleur had dan de rest van de
   route, en dan lijkt het een ander soort markering. Het verschil met de
   haltes die je al gehad hebt zit in het nummer tegenover een vinkje en in de
   vette naam ernaast, niet in de kleur. */
.wr-balk.is-compact li.is-nu .wr-bol {
  width: 26px;
  height: 26px;
  margin: 0;
  border: 0;
  background: var(--terra);
  color: #fff;
  /* Geen ring eromheen. Die bestond uit een laag `--bg` met daarbuiten
     `--terra-soft`, bedoeld om de bol van de verbindingslijn los te tillen. Op
     een kaart is `--bg` niet de achtergrond maar gewoon zwart, en dan zie je
     een donkere rand met een oranje gloed eromheen. De bol is dekkend, dus de
     lijn verdwijnt er toch al achter. */
  box-shadow: none;
}

.wr-balk.is-compact .wr-halte {
  flex: none;
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-faint);
}

.wr-balk.is-compact li.is-nu .wr-halte { font-weight: 600; color: var(--txt); }

@media (max-width: 760px) {
  /* Op een telefoon past de hele rij niet; hij schuift, met een randje ruimte
     zodat zichtbaar is dat er meer staat. Meerekken kan dan niet: een streepje
     dat mag krimpen trekt de hele rij ineen en dan liggen de namen over
     elkaar heen. */
  .wr-balk.is-compact { margin: 0 -18px; padding: 4px 18px 6px; }
  .wr-balk.is-compact li { flex: none; }
  .wr-balk.is-compact li + li::before { flex: none; width: 22px; min-width: 22px; }
}

/* De regel hierboven verbergt de haltenamen op een smal scherm, en dat klopt
   voor de volle balk: die moet in één beeld passen. De compacte schuift, en
   een schuifbare rij met alleen nummers erin vertelt niets. Daar blijven de
   namen dus staan. Deze regel komt na de mediaquery, anders wint die. */
@media (max-width: 620px) {
  .wr-balk.is-compact li:not(.is-nu) .wr-halte {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  .wr-balk.is-compact li.is-nu .wr-halte { font-size: 13px; }
}

/* De twee acties van de samenvatting. Ze staan naast de kop en niet onderaan:
   daar eindigt het blok met de fasebalk, en die is context en geen actie. */
.wr-samenvatting-acties {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: none;
}

.wr-samenvatting-acties .wr-knop.is-klein .wr-knop-ico { margin-left: -2px; }

@media (max-width: 760px) {
  .wr-samenvatting-acties { width: 100%; }
  .wr-samenvatting-acties .wr-knop { flex: 1 1 100%; }
}

/* De compacte balk staat in de tabvolgorde omdat hij schuift; dan hoort er ook
   te zien te zijn dat hij focus heeft. */
.wr-balk.is-compact:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   De nieuwe blokken op /woonroute: de kop met beeld, Noa, de volgende fase,
   het voorproefje van de app en het ontgrendelen op een ander apparaat.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── De kop met beeld ─────────────────────────────────────────────────────── */

/* Hetzelfde beeld als op de homepage. De verhouding staat vast in CSS en niet
   alleen in de breedte en hoogte van het element: zonder dat springt de hele
   pagina omlaag zodra de foto binnen is, en dat gebeurt precies terwijl iemand
   begint te lezen. */
.wr-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-hi);
  border-radius: 26px;
  background: color-mix(in srgb, var(--txt) 4%, transparent);
  aspect-ratio: 16 / 9;
}

.wr-hero-beeld {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Een zachte rand over het beeld heen, zodat de foto niet als een losse
   rechthoek op de pagina ligt maar bij de kaarten eronder hoort. */
.wr-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -60px 80px -40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ── Noa op de route ──────────────────────────────────────────────────────── */

/* Het blok zelf komt uit blog.css (.bl-noa), zodat Noa er hier precies zo
   uitziet als halverwege een artikel. Alleen de plaatsing is anders: op een
   artikel staat ze tussen de alinea's, hier tussen de fasebalk en de
   artikelen, en daar hoort geen buitenmarge omheen. */
.wr-noa {
  margin: 4px 0 2px;
}

/* Op een artikel is .bl-noa-actie een knop; hier is het een link naar het
   artikel dat Noa noemt. Een link erft geen knopvorm, dus die staat hier. */
a.bl-noa-actie {
  text-decoration: none;
}

/* ── Wat hierna komt ──────────────────────────────────────────────────────── */

/* ── Terugkomen op een ander apparaat ─────────────────────────────────────── */

.wr-herken {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.wr-herken.is-open {
  display: grid;
  justify-items: start;
}

.wr-herken h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt);
}

.wr-herken p {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-dim);
}

.wr-herken .wr-form {
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
}

/* ── Het codeveld ─────────────────────────────────────────────────────────── */

/* Zes cijfers, uit elkaar getrokken. Dat is geen opsmuk: een code van zes
   cijfers achter elkaar lees je verkeerd over, en met ruimte ertussen zie je
   in één blik of je er een mist. */
.wr-input.is-code {
  max-width: 280px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Een artikel dat je al las ────────────────────────────────────────────── */

/* Gelezen artikelen blijven staan en blijven klikbaar; ze zakken alleen naar
   achteren. Lichter zetten zegt dat zonder er een label bij te hangen, en wie
   geen kleurverschil ziet mist niets: de volgorde doet het werk. */
.wr-kaart.is-gelezen .wr-kaart-beeld,
.wr-vooruit-kaart.is-gelezen .wr-vooruit-n {
  opacity: 0.6;
}

.wr-kaart.is-gelezen:hover .wr-kaart-beeld,
.wr-vooruit-kaart.is-gelezen:hover .wr-vooruit-n {
  opacity: 1;
}

/* ── Smal ─────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .wr-hero { border-radius: 20px; }
  .wr-app { padding: 20px 18px 22px; border-radius: 20px; }
  .wr-app-paneel { padding: 18px 16px 20px; }
  .wr-herken { padding: 18px 16px; border-radius: 18px; }
  .wr-herken .wr-knop { width: 100%; }
}

@media (max-width: 380px) {
  .wr-app-tab { padding: 12px 12px; font-size: 12px; }
  .wr-input.is-code { font-size: 21px; letter-spacing: 0.24em; }
}

/* Het beeld heeft geen beweging, maar de tabs wisselen met een overgang. Wie
   beweging uit heeft staan krijgt de wissel zonder. */
/* Bewegen uit: dan geen overvloeier. Het doorbladeren zelf staat dan ook al
   stil, zie AppVoorproef.tsx; dit is het sluitstuk voor de overgang. */
@media (prefers-reduced-motion: reduce) {
  .wr-app-tab,
  .wr-app-pauze,
  .wr-app-beeld { transition: none; }
}

/* Het beeld in het instapblok op de homepage.
   Smaller dan op /woonroute, maar niet bijgesneden. Een bijgesneden strook van
   dit beeld laat halve kaartjes zien aan de boven- en onderkant, en dan lijkt
   het alsof de pagina te smal is in plaats van dat het een bewuste uitsnede is.
   Op /woonroute is dit de kop van de pagina en mag hij de volle breedte hebben;
   hier staat hij tussen een kop en zes keuzes, en die keuzes moeten in beeld
   blijven. */
.wr-instap-hero {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   De kop van /woonroute: tekst links, beeld rechts, daaronder de route.
   ═══════════════════════════════════════════════════════════════════════════ */

.wr-routekop {
  display: grid;
  /* Het beeld mag breder en mag dichter op de tekst staan. Het stond op 40% met
     tot 80 pixels ertussen, en dan zweeft het los naast de kop in plaats van
     erbij te horen. */
  grid-template-columns: minmax(0, 1fr) clamp(340px, 50%, 640px);
  align-items: center;
  gap: 22px clamp(18px, 2.4vw, 36px);
  /* `.wr-pagina-binnen` is zelf een grid met een auto-kolom, en een griditem is
     standaard `min-width: auto`. Zonder deze regel groeit deze kop dus buiten de
     pagina zodra er een kind in zit dat breder wil zijn, en op een telefoon wil
     elke leesbreedte in `ch` dat. */
  min-width: 0;
}

.wr-routekop-tekst {
  display: grid;
  /* Geen vaste marges per element maar één afstand voor de hele kolom; de
     uitzonderingen staan hieronder en zijn er maar twee. */
  gap: 14px;
  justify-items: start;
  /* `minmax(0, 1fr)` en niet `1fr`, en `min-width: 0` erbij.
     Een gridkolom is standaard `min-width: auto` en groeit dus mee met zijn
     breedste kind. Een leesbreedte in `ch` is op een telefoon breder dan het
     scherm, en `max-width: 100%` lost dat niet op: tijdens het bepalen van de
     breedte heeft dat percentage nog niets om tegen te rekenen en valt het weg.
     De grens hoort dus op de kolom en niet op het kind.
     Dat het misging was bovendien niet te zien: de body heeft
     `overflow-x: hidden`, dus de overloop werd geknipt in plaats van
     schuifbaar, en `scrollWidth` bleef netjes gelijk aan het venster. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

/* Nu de kolom een vaste breedte heeft, lost dit percentage wél op en houdt het
   de leesbreedtes hierboven binnen het vak. */
.wr-routekop-tekst > * { max-width: 100%; }

.wr-routekop-boven {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
}

.wr-routekop-boven .wr-label { margin: 0; }

/* De link rechtsboven. Onderstreept en niet als knop: hij staat naast een kop
   die het grootste op de pagina is, en een gevuld vlak ernaast wint dat gevecht
   terwijl aanpassen niet is waarvoor je kwam. */
.wr-routekop-link {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--txt-dim);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.wr-routekop-link:hover { color: var(--terra); }
.wr-routekop-link:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }

.wr-routekop .wr-titel {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.wr-routekop .wr-intro {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}

/* Wat we van je weten. Eén regel met een vinkje, geen rij pillen: pillen lezen
   als een filterbalk, en dit is iets dat wij over jou zeggen. */
.wr-situatiezin {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin: 4px 0 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-dim);
}

.wr-situatiezin svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  fill: none;
  stroke: var(--terra);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Het beeld in de boog ─────────────────────────────────────────────────── */

/* Dezelfde boog als de foto in de hero op de homepage (.hero-foto): rond
   bovenaan, licht afgerond onderaan. Eén vorm voor het beeld op beide pagina's,
   zodat ze als één site lezen.

   Wel een bredere boog dan daar. De foto op de homepage is een gevel in
   staand formaat en verdraagt een hoge uitsnede; dit beeld is een compositie
   waarin links het verbouwbudget staat en rechts de tijdlijn, over de volle
   breedte. In een staande boog valt van allebei de helft weg en blijft er een
   stuk baksteen over. 3:2 snijdt er aan elke kant acht procent af en laat de
   compositie heel. */
.wr-routekop-beeld .wr-hero {
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: clamp(70px, 9vw, 130px) clamp(70px, 9vw, 130px) 24px 24px;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.55);
}

/* De schaduw over de onderkant hoort bij het volle beeld bovenaan de lege
   pagina, niet bij deze uitsnede: in een hoge boog valt hij over het huis. */
.wr-routekop-beeld .wr-hero::after { display: none; }

/* ── De route onder de kop ────────────────────────────────────────────────── */

/* Twee hairlines, zoals in het ontwerp. Ze maken van de balk een eigen strook
   en niet nog een regel onder de kop.

   De link staat op zijn eigen regel en niet naast de balk. Hij stond er eerst
   wel naast, toen hij nog "Alle fases" heette; met "Mijn situatie aanpassen"
   erin werd hij zo'n tweehonderd pixels breder en viel de laatste halte bij
   elke schermbreedte buiten beeld. De balk krijgt nu de volle regel en past
   daarmee vanaf ongeveer 900 pixels in één keer. */
.wr-fasestrook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
  padding: 14px 0 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.wr-fasestrook .wr-balk { flex: 1 1 100%; min-width: 0; }
.wr-fasestrook-link { margin-left: auto; }

.wr-fasestrook-link {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--txt-dim);
  cursor: pointer;
  transition: color 0.2s ease;
}

.wr-fasestrook-link:hover { color: var(--terra); }
.wr-fasestrook-link:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }

/* De balk in de route-uitvoering: één regel, naam naast de bol, een vinkje voor
   wat achter je ligt.

   Hij schuift zodra hij niet past, en dan vervaagt de rechterkant. Zonder die
   vervaging houdt de laatste halte midden in een woord op en lijkt het een
   fout in plaats van iets dat verder gaat. De maskering staat alleen aan als er
   werkelijk iets buiten beeld valt, want `scroll` in de linear-gradient kan dat
   niet weten; daarom hangt hij aan de balk zelf en niet aan de strook. */
.wr-balk.is-route {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 2px 0 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}

.wr-balk.is-route::-webkit-scrollbar { display: none; }
.wr-balk.is-route::before { display: none; }

.wr-balk.is-route li {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-align: left;
}

/* Het streepje tussen twee haltes. Op het element zelf en niet als doorlopende
   lijn eronder: de haltes zijn niet even breed, en een doorlopende lijn zou
   dwars door de namen lopen. */
.wr-balk.is-route li + li::before {
  content: '';
  flex: none;
  width: clamp(10px, 1.6vw, 26px);
  height: 1px;
  margin: 0 9px;
  background: var(--border-hi);
  order: -1;
}

.wr-balk.is-route li.is-af .wr-bol,
.wr-balk.is-route li.is-af + li::before { background: var(--terra); }
.wr-balk.is-route li.is-af .wr-bol { border-color: var(--terra); color: #fff; }

.wr-balk.is-route li.is-af .wr-bol svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Waar je nu staat is gevuld en niet omlijnd: dat is het enige punt op de balk
   dat je in één oogopslag moet kunnen vinden.

   Terracotta, net als de haltes die je al gehad hebt. Het verschil met die
   haltes zit niet in de kleur maar in wat erin staat: een nummer in plaats van
   een vinkje, met de naam ernaast vet. Dat is met opzet geen kleurverschil,
   want wie kleur niet onderscheidt moet ook kunnen zien waar hij staat. Dat hij
   iets groter is dan de rest doet de rest. */
.wr-balk.is-route li.is-nu .wr-bol {
  width: 32px;
  height: 32px;
  margin: 0;
  border: 0;
  background: var(--terra);
  color: #fff;
  box-shadow: none;
  font-weight: 600;
}

.wr-balk.is-route .wr-halte {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.wr-balk.is-route li.is-nu .wr-halte { font-weight: 600; color: var(--txt); }
.wr-balk.is-route li.is-af .wr-halte { color: var(--txt-dim); }

.wr-balk.is-route:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; border-radius: 8px; }

/* ── Alle fases, uitgeklapt ───────────────────────────────────────────────── */

/* `hidden` is een attribuut en verliest het van een klasse met `display`. Zonder
   deze regel staat de lijst altijd open, en dan is de knop ernaast een knop die
   niets lijkt te doen. */
.wr-fasenlijst[hidden] { display: none; }

.wr-fasenlijst {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.wr-fasenlijst li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 12px;
}

.wr-fasenlijst li.is-nu { background: var(--terra-soft); }

.wr-fasenlijst-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-faint);
}

.wr-fasenlijst li.is-nu .wr-fasenlijst-n {
  border-color: var(--terra);
  background: var(--terra);
  color: #fff;
}

.wr-fasenlijst b { display: block; font-size: 14px; font-weight: 600; color: var(--txt); }
.wr-fasenlijst small { display: block; margin-top: 2px; font-size: 13px; color: var(--txt-faint); }

.wr-fasenlijst-nu {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--terra);
}

/* ── Smal ─────────────────────────────────────────────────────────────────── */

/* Het beeld naast de kop houdt geen stand onder de 900 pixels: dan blijft er
   voor de tekst zo weinig over dat de kop over vijf regels breekt. Eronder dus,
   en terug naar de volle breedte van het bestand in plaats van de hoge boog. */
@media (max-width: 900px) {
  .wr-routekop { grid-template-columns: minmax(0, 1fr); }
  .wr-routekop-beeld { order: -1; }
  .wr-routekop-beeld .wr-hero {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    box-shadow: none;
  }
  .wr-routekop-beeld .wr-hero-beeld { object-position: center; }
  .wr-routekop .wr-titel { max-width: none; }
}

@media (max-width: 620px) {
  .wr-routekop-boven { flex-wrap: wrap; }
  .wr-fasestrook { flex-wrap: wrap; gap: 10px 16px; }
  .wr-fasestrook .wr-balk { flex-basis: 100%; }
  .wr-fasenlijst li { grid-template-columns: 24px 1fr; padding: 10px 12px; }
  .wr-fasenlijst-nu { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Het voorproefje van de app: links wat je krijgt, rechts het echte scherm.
   ═══════════════════════════════════════════════════════════════════════════ */

.wr-app {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 28px clamp(28px, 5vw, 64px);
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--border-hi);
  border-radius: 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--terra) 6%, transparent), transparent 55%),
    var(--surface);
  min-width: 0;
}

.wr-app-tekst { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.wr-app-tekst > * { max-width: 100%; }

.wr-app-merk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--txt-faint);
}

.wr-app-merk b { color: var(--txt); font-weight: 600; }
.wr-app-merk > span:last-child { color: var(--terra); }

.wr-app-merk svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--terra);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wr-app h2 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--display, inherit);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--txt);
}

.wr-app-mee { margin: 0; font-size: 15px; color: var(--txt-dim); }

.wr-app-punten {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wr-app-punten li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--txt-dim);
}

.wr-app-punten b { color: var(--txt); font-weight: 600; }

.wr-app-punt-ico svg {
  display: block;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  fill: none;
  stroke: var(--terra);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Het venster ──────────────────────────────────────────────────────────── */

.wr-app-venster {
  min-width: 0;
  border: 1px solid var(--border-hi);
  border-radius: 18px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}

/* De adresbalk. Geen versiering: hij zegt waar je uitkomt als je straks op de
   knop drukt, en dat is mijn.vialivio.nl en niet deze pagina. */
.wr-app-chroom {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--txt) 4%, transparent);
}

.wr-app-stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--txt) 18%, transparent);
}

.wr-app-url {
  flex: 1;
  margin-left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--txt) 6%, transparent);
  font-size: 12px;
  color: var(--txt-faint);
  text-align: center;
}

.wr-app-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
  border-bottom: 1px solid var(--border);
}

.wr-app-tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  /* Vier labels passen niet op 320 pixels. Schuiven is hier beter dan afbreken:
     dit zijn de namen uit de app en die mogen niet korter. */
  overflow-x: auto;
  scrollbar-width: none;
}

.wr-app-tabs::-webkit-scrollbar { display: none; }

.wr-app-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 11px 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-faint);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wr-app-tab:hover { color: var(--txt-dim); }
.wr-app-tab.is-nu { color: var(--txt); border-bottom-color: var(--terra); font-weight: 600; }
.wr-app-tab:focus-visible { outline: 2px solid var(--terra); outline-offset: -3px; }

.wr-app-icoon svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De pauzeknop. Klein maar altijd zichtbaar, en groot genoeg om op een telefoon
   te raken: 44 bij 44 is het minimum waar een vinger niet naast mikt. */
.wr-app-pauze {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: none;
  color: var(--txt-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wr-app-pauze::after {
  /* Het raakvlak is groter dan de knop zelf, zonder dat hij meer ruimte kost. */
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
}

.wr-app-pauze { position: relative; }
.wr-app-pauze:hover { color: var(--terra); border-color: var(--terra); }
.wr-app-pauze:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.wr-app-pauze svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── De schermen ──────────────────────────────────────────────────────────── */

/* Alle vier de beelden liggen op elkaar en wisselen van dekking. Daardoor
   verandert het kader nooit van hoogte en is er geen laadmoment bij de wissel.
   De verhouding staat vast in CSS, zodat er bij het laden niets verspringt. */
.wr-app-beelden {
  position: relative;
  aspect-ratio: 1200 / 694;
  background: var(--bg);
}

.wr-app-beeld {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--easing, ease);
}

.wr-app-beeld.is-nu { opacity: 1; }

.wr-app-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.wr-app-voet {
  margin: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-faint);
}

.wr-app .wr-plan-actie { margin-top: 2px; }

@media (max-width: 920px) {
  .wr-app { grid-template-columns: minmax(0, 1fr); }
  .wr-app h2 { max-width: none; }
}

@media (max-width: 760px) {
  .wr-app { padding: 20px 16px; border-radius: 20px; }
  .wr-app-voet { padding: 11px 14px 13px; }
  .wr-app .wr-plan-actie { width: 100%; }
  .wr-app .wr-plan-actie .wr-knop { width: 100%; }
}

@media (max-width: 380px) {
  .wr-app-tab { padding: 11px 11px; font-size: 12px; }
  .wr-app-url { font-size: 11px; }
}

/* Bewegen uit: dan geen overvloeier. Het doorbladeren zelf staat dan ook al
   stil, zie AppVoorproef.tsx; dit is het sluitstuk voor de overgang. */
@media (prefers-reduced-motion: reduce) {
  .wr-app-tab,
  .wr-app-pauze,
  .wr-app-beeld { transition: none; }
}

/* ── Noa in het instapblok, op de homepage en de blog ─────────────────────── */

/* Eén regel en geen kaart. Het instapblok eromheen is zelf al een kaart, en een
   kaart in een kaart leest als twee losse dingen die toevallig naast elkaar
   staan. De lijn erboven doet hier het werk dat een kader daar zou doen. */
.wr-noakort {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.wr-noakort-foto {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
}

.wr-noakort-foto img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.wr-noakort-zin {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--txt-dim);
}

.wr-noakort-zin b {
  color: var(--txt);
  font-weight: 600;
}

/* Een punt tussen de naam en de zin, getekend in plaats van getypt: zo staat er
   geen los leesteken in de tekst dat een schermlezer voorleest. */
.wr-noakort-zin b::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 3px;
  border-radius: 50%;
  background: var(--txt-faint);
}

.wr-noakort-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--terra);
  text-decoration: none;
}

.wr-noakort-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.wr-noakort-link:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 620px) {
  .wr-noakort-zin { flex-basis: 100%; }
}

/* ── De rail: icoon in de kantlijn, met de routelijn eronder ──────────────── */

/* Het spoor: een kantlijn van 64 pixels waar de routelijn doorheen loopt, van
   onder het eerste icoon tot aan het laatste blok. Hij hangt aan de pagina en
   niet aan één sectie, want een lijn die halverwege ophoudt leest als een
   streepje dat iemand vergeten is. Puur visueel: de volgorde van de inhoud
   verandert er niet door.

   De iconen staan er absoluut op geplaatst en niet in een gridkolom. Een kolom
   zou elk blok ertussen dwingen mee te doen met hetzelfde raster, ook de
   blokken die helemaal geen icoon hebben. */
.wr-spoor {
  position: relative;
  display: grid;
  gap: 22px;
  padding-left: 64px;
  min-width: 0;
}

.wr-spoor > * { min-width: 0; }

.wr-spoor::before {
  content: '';
  position: absolute;
  /* 22 en niet 23: het icoon is 44 breed en hangt 64 naar links, dus het midden
     ervan ligt op 64 - 44/2 = 42 vanaf de inhoud, oftewel 22 vanaf hier. */
  left: 22px;
  /* Begint onder het boekje, niet erboven: het icoon is het begin van de lijn
     en niet iets dat er toevallig op ligt. */
  top: 52px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.wr-groep.is-rail { position: relative; }

.wr-rail-ico {
  position: absolute;
  left: -64px;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--terra);
}

.wr-rail-ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wr-rail-inhoud {
  display: grid;
  gap: 14px;
  min-width: 0;
  /* De kop staat op dezelfde hoogte als het icoon ernaast. */
  padding-top: 4px;
}

/* Op een telefoon vervalt de kantlijn: die 64 pixels zijn daar harder nodig
   voor de kaarten dan voor een streepje. Het icoon gaat terug in de rij, naast
   de kop, want los erboven zweeft het en lijkt het een knop. */
@media (max-width: 760px) {
  .wr-spoor { padding-left: 0; gap: 18px; }
  .wr-spoor::before { display: none; }

  .wr-groep.is-rail {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 0 12px;
  }

  .wr-rail-ico {
    position: static;
    width: 34px;
    height: 34px;
  }

  .wr-rail-ico svg { width: 17px; height: 17px; }
  .wr-rail-inhoud { padding-top: 0; }
}

/* De rail mag op een telefoon tot de rand van het scherm doorlopen, zodat de
   volgende kaart er half uit komt en het schuiven zichzelf uitlegt. */
@media (max-width: 620px) {
  .wr-groep.is-rail .wr-kaarten {
    margin-right: calc(-1 * var(--wr-rand, 16px));
    padding-right: var(--wr-rand, 16px);
  }
}

/* "Begin hiermee" op de eerste kaart. Terracotta, en met een punt erachter die
   getekend is in plaats van getypt: zo leest een schermlezer geen los
   leesteken voor tussen twee stukjes meta. */
.wr-kaart-meta b {
  color: var(--terra);
  font-weight: 600;
}

.wr-kaart-meta b::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px 2px;
  border-radius: 50%;
  background: var(--txt-faint);
}

/* De uitweg naar de hele bibliotheek. Onder de drie kaarten en niet ernaast:
   wie hier klikt is klaar met de selectie en wil verder kijken. */
.wr-alleblog {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--txt) 35%, transparent);
}

.wr-alleblog:hover { color: var(--terra); text-decoration-color: var(--terra); }
.wr-alleblog:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; border-radius: 6px; }

.wr-alleblog svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Wat hierna komt, en terugkomen op een lege pagina.
   ═══════════════════════════════════════════════════════════════════════════ */

/* De pijl links staat buiten de tekst, op de lijn waar de route verder loopt.
   Dat is het hele idee van dit blok: je route stopt niet bij vandaag. */
.wr-volgende {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px clamp(16px, 2.4vw, 28px);
  /* Geen kaart. Dit is geen blok dat je aanklikt maar het vervolg van de route,
     en een kader eromheen maakt er een los ding van dat toevallig onderaan
     staat. De hairline eronder scheidt het van wat erna komt; verder staat het
     gewoon op de pagina, net als de kop bovenaan. */
  padding: clamp(18px, 2.4vw, 26px) 0 clamp(22px, 2.8vw, 30px);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

/* Op dezelfde lijn als het boekje hierboven, zodat de route doorloopt. */
.wr-volgende-pijl {
  position: absolute;
  left: -64px;
  top: clamp(18px, 2.4vw, 26px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  background: var(--surface);
  color: var(--txt-faint);
}

.wr-volgende-pijl svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wr-volgende-tekst { min-width: 0; }

.wr-volgende .wr-label { margin: 0 0 8px; }

.wr-volgende h2 {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--txt);
}

.wr-volgende-uitleg {
  margin: 8px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-dim);
}

.wr-volgende-artikelen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.wr-volgende-artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--txt);
  text-decoration: none;
  transition: border-color 0.4s var(--easing), background 0.4s var(--easing);
}

.wr-volgende-artikel:hover {
  border-color: var(--border-hi);
  background: var(--surface-hi);
}

.wr-volgende-artikel:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.wr-volgende-artikel span { font-size: 15px; font-weight: 500; line-height: 1.35; }
.wr-volgende-artikel small { font-size: 13px; color: var(--txt-faint); white-space: nowrap; }

.wr-volgende-artikel svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--txt-faint);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De knop waarmee je je route verzet. Secundair van vorm: dit is een stap die
   je zelf zet als het waar is, geen actie die de pagina van je vraagt. */
.wr-volgende-knop { align-self: start; white-space: nowrap; }

@media (max-width: 860px) {
  .wr-volgende { grid-template-columns: minmax(0, 1fr); }
  .wr-volgende-knop { justify-self: start; }
}

/* Zonder kantlijn is er geen lijn om de pijl op te zetten. */
@media (max-width: 760px) {
  .wr-volgende-pijl { display: none; }
}

@media (max-width: 560px) {
  .wr-volgende-knop { width: 100%; }
}

/* ── Terugkomen, groot op een lege pagina ─────────────────────────────────── */

.wr-herken.is-groot {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px clamp(28px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 26px;
  border-color: var(--border-hi);
  /* Dezelfde opbouw als het instapblok op de homepage: een terracotta zweem
     over het glas, zodat dit herkenbaar hetzelfde soort blok is. */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--terra) 9%, transparent), transparent 60%),
    var(--surface);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.16);
  min-width: 0;
}

.wr-herken-tekst { display: grid; gap: 10px; min-width: 0; }
.wr-herken-tekst > * { max-width: 100%; }

.wr-herken.is-groot h2 {
  font-family: var(--display, inherit);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.wr-herken.is-groot .wr-herken-tekst p {
  max-width: 46ch;
  font-size: 15px;
}

/* Het formulier staat rechts naast de uitleg en niet eronder: zo is in één
   oogopslag te zien dat dit twee regels tekst zijn met één invoerveld, en geen
   lange vragenlijst. */
.wr-herken.is-groot .wr-form {
  width: 100%;
  max-width: 420px;
  margin-top: 0;
}

@media (max-width: 860px) {
  .wr-herken.is-groot { grid-template-columns: minmax(0, 1fr); }
  .wr-herken.is-groot .wr-form { margin-top: 6px; max-width: none; }
}

/* De kop boven de zes fasekaarten op een lege pagina. */
.wr-instapkop { display: grid; gap: 10px; min-width: 0; }
.wr-instapkop > * { margin: 0; max-width: 100%; }

/* Op een telefoon kost dit blok anders het hele eerste scherm, en dan staat
   "Waar sta je nu?" onder de vouw terwijl dat is waar de meeste bezoekers voor
   komen. Compacter, niet kleiner van betekenis: de kop blijft de kop. */
@media (max-width: 620px) {
  .wr-herken.is-groot { padding: 20px 18px; gap: 12px; }
  .wr-herken-tekst { gap: 8px; }
  .wr-herken.is-groot h2 { font-size: 21px; }
  .wr-herken.is-groot .wr-herken-tekst p { font-size: 14px; line-height: 1.5; }
  .wr-herken.is-groot .wr-form { margin-top: 2px; }
  .wr-herken.is-groot .wr-label { margin-top: 2px; padding-top: 0; border-top: 0; }
}

/* ── De pijlen bij de rail ────────────────────────────────────────────────── */

.wr-groep-rechts {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wr-groep-rechts p { margin: 0; }

.wr-pijlen { display: flex; gap: 8px; }

.wr-pijlen button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  background: var(--surface);
  color: var(--txt);
  cursor: pointer;
  transition: border-color 0.4s var(--easing), background 0.4s var(--easing), color 0.4s var(--easing);
}

.wr-pijlen button:hover:not([disabled]) {
  border-color: var(--terra);
  color: var(--terra);
}

.wr-pijlen button:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

/* Uitgeschakeld en niet verborgen: een pijl die verdwijnt laat de andere
   verspringen, en dan klik je net mis. */
.wr-pijlen button[disabled] {
  opacity: 0.35;
  cursor: default;
  color: var(--txt-faint);
}

.wr-pijlen svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .wr-pijlen button { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   De inklapbare woonroutebalk op de homepage en de blog.
   ═══════════════════════════════════════════════════════════════════════════ */

.wr-balkblok {
  position: relative;
  border: 1px solid var(--border-hi);
  border-radius: 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--terra) 9%, transparent), transparent 60%),
    var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: border-radius 0.25s var(--easing);
}

.wr-balkblok.is-dicht { border-radius: 20px; }

/* ── De kopregel, altijd zichtbaar ────────────────────────────────────────── */

.wr-balkkop {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 12px 14px 12px 18px;
}

.wr-balkfase {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.wr-balkbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.wr-balktekst { min-width: 0; }

.wr-balktekst h2 {
  margin: 0;
  font-family: var(--display, inherit);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--txt);
}

.wr-balksub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--txt-faint);
  white-space: nowrap;
}

.wr-balkmini { display: flex; gap: 2px; width: 48px; flex: none; }

.wr-balkmini i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border-hi);
}

.wr-balkmini i.is-aan { background: var(--terra); }

/* De eyebrow en de lange titel horen bij de open stand. */
.wr-balkeyebrow,
.wr-balklang { display: none; }

/* ── De tip van Noa op één regel ──────────────────────────────────────────── */

.wr-balknoa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 180px;
  max-width: 520px;
  margin-left: auto;
  padding: 6px 14px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--txt) 5%, transparent);
  font: inherit;
  font-size: 14px;
  color: var(--txt-dim);
  text-align: left;
  cursor: pointer;
  transition: background 0.4s var(--easing);
}

.wr-balknoa:hover { background: color-mix(in srgb, var(--txt) 9%, transparent); }
.wr-balknoa:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.wr-balknoa-foto {
  flex: none;
  width: 28px;
  height: 28px;
}

.wr-balknoa-foto img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.wr-balknoa-zin {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-balknoa-zin b { margin-right: 6px; color: var(--txt); font-weight: 600; }

/* ── De acties rechts ─────────────────────────────────────────────────────── */

.wr-balkacties {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.wr-balkklap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  background: none;
  color: var(--txt-dim);
  cursor: pointer;
  transition: color 0.4s var(--easing), border-color 0.4s var(--easing);
}

.wr-balkklap:hover { color: var(--terra); border-color: var(--terra); }
.wr-balkklap:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.wr-balkklap svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--easing);
}

.wr-balkblok:not(.is-dicht) .wr-balkklap svg { transform: rotate(180deg); }

/* ── Het uitklapgedeelte ──────────────────────────────────────────────────── */

/* Van `0fr` naar `1fr`: de enige manier om naar de werkelijke hoogte te
   animeren zonder die eerst op te meten, en een opgemeten hoogte klopt niet
   meer zodra de tekst anders breekt. */
.wr-balkbody {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s var(--easing);
}

.wr-balkblok.is-dicht .wr-balkbody { grid-template-rows: 0fr; }
.wr-balkbinnen { min-height: 0; overflow: hidden; }

/* Niet alleen hoogte nul: anders blijft alles hierbinnen bereikbaar met de
   tabtoets en leest een schermlezer een blok voor dat niemand ziet. */
.wr-balkblok.is-dicht .wr-balkinhoud { visibility: hidden; }

.wr-balkinhoud {
  display: grid;
  gap: 16px;
  padding: 4px 26px 24px;
}

.wr-balkintro {
  margin: 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-dim);
}

.wr-balkchips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wr-balkchips-lbl { font-size: 14px; color: var(--txt-faint); }

.wr-balkklopt {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--txt-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-hi);
  cursor: pointer;
}

.wr-balkklopt:hover { color: var(--terra); text-decoration-color: var(--terra); }
.wr-balkklopt:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }

/* "Jij bent hier" bij de huidige halte. */
.wr-hier {
  flex: none;
  margin-left: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--terra-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--terra);
}

/* ── De open stand ────────────────────────────────────────────────────────── */

/* Open wordt de kopregel de titel van het blok: het bolletje en de regel
   "stap 1 van 6" zeggen dan hetzelfde als de fasebalk eronder, en de tip van
   Noa staat voluit in het blok. */
.wr-balkblok:not(.is-dicht) .wr-balkbol,
.wr-balkblok:not(.is-dicht) .wr-balksub,
.wr-balkblok:not(.is-dicht) .wr-balknoa,
.wr-balkblok:not(.is-dicht) .wr-balkkort { display: none; }

.wr-balkblok:not(.is-dicht) .wr-balkeyebrow {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
}

.wr-balkblok:not(.is-dicht) .wr-balklang { display: inline; }

.wr-balkblok:not(.is-dicht) .wr-balktekst h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.wr-balkblok:not(.is-dicht) .wr-balkkop {
  display: block;
  padding: 20px 22px 6px 26px;
}

.wr-balkblok:not(.is-dicht) .wr-balkfase { display: block; }

/* De knoppen rechtsboven, op de regel van de eyebrow. */
.wr-balkblok:not(.is-dicht) .wr-balkacties {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
}

.wr-balkblok:not(.is-dicht) .wr-balkeyebrow { padding-right: 230px; }

/* ── Smal ─────────────────────────────────────────────────────────────────── */

/* De tip verdwijnt pas als er echt geen regel meer overblijft. Hij stond op
   1100, en dat was te vroeg: op een laptop van 1440 fysieke pixels is dat 865
   CSS-pixels, en daar was nog ruim plaats. Nu krimpt hij mee tot er 180 pixels
   over zijn en kapt hij af met een beletselteken; onder 720 is de regel zo kort
   dat er na "Noa" niets meer staat, en dan is hij weg. */
@media (max-width: 720px) {
  .wr-balknoa { display: none; }
}

@media (max-width: 640px) {
  .wr-balkkop { gap: 10px; padding: 10px 10px 10px 14px; }
  .wr-balkbol { width: 30px; height: 30px; font-size: 13px; }
  .wr-balkmini { display: none; }
  .wr-balkknoptekst { display: none; }
  .wr-balkacties .wr-knop.is-klein { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .wr-balkinhoud { padding: 4px 18px 20px; }
  .wr-balkblok:not(.is-dicht) .wr-balkkop { padding: 14px 14px 4px 18px; }
  .wr-balkblok:not(.is-dicht) .wr-balkacties { top: 12px; right: 12px; }
  .wr-balkblok:not(.is-dicht) .wr-balkeyebrow { padding-right: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-balkblok,
  .wr-balkbody,
  .wr-balkklap,
  .wr-balkklap svg,
  .wr-balknoa { transition: none; }
}

/* ───────────────────────── checklists als pdf ─────────────────────────────
   Wie zijn route opent komt iets halen. In een artikel staat de checklist bij
   de uitleg die erbij hoort; hier staan ze alle vier bij elkaar, zodat niemand
   het artikel hoeft terug te zoeken waar de kaart toevallig in staat.

   Dezelfde opbouw als de downloadkaart op de blog: kluisicoon, eyebrow, titel,
   uitleg en één knop rechts. De hele regel is het klikdoel; alleen de knop ziet
   eruit als een knop. */
.wr-checklists { margin: clamp(32px, 5vw, 52px) 0 0; }
.wr-checklists-kop {
  margin: 4px 0 6px;
  font-family: var(--display, inherit);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.wr-checklists-uitleg { margin: 0 0 18px; color: var(--txt-dim); font-size: 15px; line-height: 1.55; }

.wr-checklists-lijst { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.wr-checklist {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s var(--easing), background 0.2s var(--easing);
}
.wr-checklist:hover {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--txt) 5%, transparent);
}
.wr-checklist:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.wr-checklist-ikoon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.wr-checklist-ikoon svg { width: 20px; height: 20px; }

.wr-checklist-tekst { display: block; flex: 1 1 auto; min-width: 0; }
.wr-checklist-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wr-checklist-titel {
  display: block;
  font-family: var(--display, inherit);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.wr-checklist-sub { display: block; margin-top: 4px; color: var(--txt-dim); font-size: 14px; line-height: 1.5; }

.wr-checklist-knop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--green);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Op mobiel de knop onder de tekst en bijna schermbreed; het icoon blijft naast
   de titel staan, want een icoon op een eigen regel levert een lege rij op. */
@media (max-width: 560px) {
  .wr-checklist { flex-wrap: wrap; gap: 12px 14px; }
  .wr-checklist-tekst { flex: 1 1 60%; }
  .wr-checklist-knop { width: 100%; justify-content: center; }
}