/* =============================================================================
   Wood, de vloerzoeker

   Gebouwd naar het klikbare voorbeeld dat Tim op 25 sep 2026 goedkeurde
   (_output/vloerzoeker-voorbeeld.html). Kleuren, letters en maten komen uit de
   site: de knoppen (.wood-knop) uit wood-collectie.css, het lijntje van het
   contactformulier, de collectietegels en de aanhef van de homepage.

   Alles hangt onder .wood-vz-root, zodat het niets anders op de site raakt en
   wint van de Elementor-kit (die zet onder meer line-height 1.3px op h3).
   ============================================================================= */

.wood-vz-root,
.wood-vz-venster {
  --wood-groen: #004339;
  --wood-bosgroen: #004339;
  --wood-goud: #D9B976;
  --wood-goud-zacht: #C29E66;
  --wood-creme: #FAF7F1;
  --wood-zand: #EDE6DB;
  --wood-inkt: #35332E;
  --wood-tekst: #004339;
  --wood-streep: rgba(0, 67, 57, .12);
  --wood-schaduw-paneel: 0 14px 26px -22px rgba(0, 67, 57, .28);
  --wood-inhoud: 1140px;
  /* Het lijntje van de velden op de contactpagina (gemeten 25 sep 2026). */
  --wood-lijn: #D7CCB8;
  color: var(--wood-inkt);
  font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.wood-vz-root .visueel-verborgen,
.wood-vz-meldingen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Staat de vloerzoeker los in de WordPress-editor (niet in Elementor), dan zet
 * Hello de inhoud in een kolom van 1140px met 70px erboven. De vloerzoeker regelt
 * zijn eigen breedte en ruimte, dus die kolom mag weg.
 */
.site-main:has(> .page-content > .wood-vz-root) {
  width: 100%;
  max-width: none;
  /* Alleen opzij: de ruimte bovenaan is die voor de vaste menubalk (.wood-mm-ruimte). */
  padding-left: 0;
  padding-right: 0;
}

/*
 * De Elementor-kit zet h2 in hoofdletters en de focusstijl in style.css geeft
 * een gekleurd vlak. Voor de vraag en de koppen die de focus krijgen niet.
 */
.wood-vz-root .wood-vz__vraag { text-transform: none; }
.wood-vz-root [tabindex="-1"]:focus,
.wood-vz-root [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; background: transparent; }

/*
 * De gouden balk onderin met "Plan je afspraak", over de hele breedte. Staat
 * eerst onder de rand en schuift omhoog; is hij weg, dan ook niet meer te
 * bereiken met Tab (visibility).
 */
.wood-vz-root button.wood-vz-balkknop,
.wood-vz-root button.wood-vz-balkknop:hover,
.wood-vz-root button.wood-vz-balkknop:focus,
.wood-vz-root button.wood-vz-balkknop:active {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  background: var(--wood-goud);
  color: var(--wood-inkt);
  font: 400 15px/1 "Inter Tight", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  cursor: pointer;
}
.wood-vz-root button.wood-vz-balkknop {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .35s ease, visibility 0s linear .35s;
}
.wood-vz-root button.wood-vz-balkknop.is-zichtbaar {
  transform: none;
  visibility: visible;
  transition: transform .35s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .wood-vz-root button.wood-vz-balkknop { transition: none; }
}

/* Wat verborgen is, blijft verborgen, ook als een regel hieronder display zet. */
.wood-vz-root [hidden] { display: none !important; }

.wood-vz-root .wood-knop[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.wood-vz-root .wood-knop svg.wood-knop__chat { width: 18px; height: 18px; }

/* Koppen die de focus krijgen na een stap: voorgelezen, maar zonder ring. */
.wood-vz-root [tabindex="-1"]:focus { outline: none; box-shadow: none; }

.wood-vz-root .wood-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--wood-groen);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.wood-vz-root .wood-aanhef {/* 20px tot de titel, zoals de aanhef op de homepage (gemeten 25 sep 2026). */
  
  margin: 0 0 20px;
  color: var(--wood-bosgroen);
  font-size: 12px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.wood-vz-root .wood-titel {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--wood-inkt);
}
.wood-vz-root .wood-titel--groot { font-size: 28px; line-height: 1.25; letter-spacing: .08em; }
.wood-vz-root .wood-titel--sectie { font-size: 18px; line-height: 1.3; letter-spacing: .1em; }

@media (max-width: 600px) {
  .wood-vz-root .wood-titel--groot { font-size: 22px; }
}/* --- Het vragenpad --------------------------------------------------------- */



.wood-vz-root .wood-vz {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}/*
 * Rustiger bovenin (Tim, 25 sep 2026): de voortgang is alleen een dunne lijn
 * boven de vraag; "Stap 3 van 9" staat klein onderaan tussen Terug en Volgende.
 */


.wood-vz-root .wood-vz__balk {
  display: block;
  height: 6px;
  margin: 0 0 26px;
  background: var(--wood-lijn);
  overflow: hidden;
}
.wood-vz-root .wood-vz__balk span {
  display: block;
  height: 100%;
  background: var(--wood-goud-zacht);
  transition: width .3s ease;
}
.wood-vz-root .wood-vz__teller {/* iets groter dan eerst, maar subtiel grijs (Tim, 3 okt 2026) */
  font-size: 14px;
  font-weight: 400;
  color: rgba(53, 51, 46, .6);
}

.wood-vz-root .wood-vz__vraag {
  margin: 0 0 20px;
  font: 400 20px/1.35 "Libre Baskerville", Georgia, serif;
  letter-spacing: .01em;
  color: var(--wood-inkt);
}

.wood-vz-root .wood-vz__uitleg { margin: -12px 0 24px; color: rgba(53, 51, 46, .8); }

.wood-vz-root .wood-vz__groep { margin: 0 0 26px; }
.wood-vz-root .wood-vz__groepnaam {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wood-bosgroen);
}
.wood-vz-root .wood-vz__meer { font-size: 13px; text-transform: none; letter-spacing: 0; opacity: .75; }

.wood-vz-root .wood-vz__keuzes {/* alle vakjes van een vraag even hoog */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;   
  gap: 8px;
}/* Korte keuzes (Ja, Nee, Hal) staan op een telefoon naast elkaar. */

.wood-vz-root .wood-vz__keuzes--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) {
  .wood-vz-root .wood-vz__keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wood-vz-root .wood-vz__keuzes--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}/*
 * Een keuze is een echte knop met aria-pressed. Transparant met het gouden
 * lijntje van de velden op de contactpagina, zonder schaduw (Tim, 25 sep 2026).
 */


.wood-vz-root button.wood-vz__keuze {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: .8px solid var(--wood-lijn);
  border-radius: 0;
  background: transparent;
  color: var(--wood-inkt);
  font: 300 15px/1.35 "Inter Tight", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.wood-vz-root button.wood-vz__keuze:hover,
.wood-vz-root button.wood-vz__keuze:focus,
.wood-vz-root button.wood-vz__keuze:active { background: transparent; color: var(--wood-inkt); border-color: var(--wood-goud-zacht); }
.wood-vz-root button.wood-vz__keuze[aria-pressed="true"],
.wood-vz-root button.wood-vz__keuze[aria-pressed="true"]:hover {
  border-color: var(--wood-goud-zacht);
  background: rgba(217, 185, 118, .12);
}
.wood-vz-root .wood-vz__vink {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .8px var(--wood-goud-zacht);
  display: grid;
  place-items: center;
}
.wood-vz-root .wood-vz__keuze--meer .wood-vz__vink { border-radius: 4px; }
.wood-vz-root .wood-vz__vink svg { opacity: 0; }
.wood-vz-root button.wood-vz__keuze[aria-pressed="true"] .wood-vz__vink { background: var(--wood-goud); box-shadow: none; }
.wood-vz-root button.wood-vz__keuze[aria-pressed="true"] .wood-vz__vink svg { opacity: 1; }
.wood-vz-root .wood-vz__keuzetekst small { display: block; font-size: 13px; color: rgba(53, 51, 46, .55); }

.wood-vz-root .wood-vz__veld { display: block; }
.wood-vz-root .wood-vz__knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 32px;
}
.wood-vz-root .wood-vz__knoppen-rechts { display: flex; gap: 12px; margin-left: auto; }
.wood-vz-root .wood-vz__knoppen .wood-vz__teller { flex: 1 1 auto; text-align: center; }
.wood-vz-root .wood-vz__knoppen .wood-vz__teller:first-child { text-align: left; }/*
 * Op een telefoon: de teller bovenaan, dan Terug en Volgende op één regel, en
 * "Naar je uitkomst" (als alles al is ingevuld) over de volle breedte eronder.
 */
@media (max-width: 560px) {
  .wood-vz-root .wood-vz__knoppen .wood-vz__teller { order: -1; flex-basis: 100%; text-align: left; }
  .wood-vz-root .wood-vz__knoppen-rechts { display: contents; }
  .wood-vz-root .wood-vz__knoppen [data-vz-volgende],
  .wood-vz-root .wood-vz__knoppen [data-vz-klaar]:not([data-vz-volgende]):only-child { margin-left: auto; }
  .wood-vz-root .wood-vz__knoppen .wood-knop--zacht[data-vz-klaar] { order: 2; flex-basis: 100%; }
}/* Het pad als eigen pagina: crème vlak, zoals de vloerensectie van de collectie. */


.wood-vz-root .wood-vz-pagina { background: var(--wood-creme); padding: 64px 16px 96px; min-height: 70vh; }
.wood-vz-root .wood-vz-pagina__kop { max-width: 760px; margin: 0 auto 40px; }
.wood-vz-root .wood-vz-pagina__kop p:last-child { margin: 14px 0 0; }/* --- Het uitklapvenster ---------------------------------------------------- *//*
 * Midden in beeld, los van de balk (Tim, 3 okt 2026): zo breed als het pad
 * (760px) met 80px eromheen. Een echte <dialog>, dus Esc sluit en de focus
 * blijft erin.
 */




dialog.wood-vz-venster {
  width: min(920px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--wood-creme);
  color: var(--wood-inkt);
  box-shadow: var(--wood-schaduw-paneel);
  overflow: auto;
}
dialog.wood-vz-venster::backdrop { background: rgba(0, 67, 57, .28); }
dialog.wood-vz-venster[open] { animation: wood-uitklap .28s ease; }
@keyframes wood-uitklap { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.wood-vz-root .wood-vz-venster__binnen { position: relative; padding: 80px 80px 70px; }
.wood-vz-root .wood-vz-venster__sluit {
  position: absolute;
  top: 24px; right: 24px;
  display: inline-flex;
  align-items: center;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--wood-inkt);
  line-height: 0;
  cursor: pointer;
}
@media (max-width: 700px) {
  dialog.wood-vz-venster { width: 100vw; margin: 0; max-height: 100dvh; height: 100dvh; }
  /* Kruisje twee keer zo groot en meer lucht tot de voortgangsbalk (Tim, 5 okt 2026). */
  .wood-vz-root .wood-vz-venster__binnen { padding: 92px 16px 44px; }
  .wood-vz-root .wood-vz-venster__sluit { top: 16px; right: 10px; padding: 8px; }
  .wood-vz-root .wood-vz-venster__sluit svg { width: 36px; height: 36px; }
}/* --- Contactpagina: het blok dat het pad opent ----------------------------- */



.wood-vz-root .wood-vz-intro {
  padding: 96px 16px;
  background: var(--wood-creme);
}
.wood-vz-root .wood-vz-intro__binnen {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 440fr);
  gap: 40px;
  align-items: center;
}
.wood-vz-root .wood-vz-intro__kaart {
  padding: 40px 40px 36px;
  border: .8px solid var(--wood-lijn);
  background: #fff;
}
.wood-vz-root .wood-vz-intro__tekst { max-width: 58ch; margin: 16px 0 28px; }
.wood-vz-root .wood-vz-intro__kaart .wood-titel { margin-bottom: 14px; }
.wood-vz-root .wood-vz-intro__kaart ol { margin: 0; padding-left: 20px; }
.wood-vz-root .wood-vz-intro__kaart li { margin: 0 0 8px; }
@media (max-width: 820px) {
  .wood-vz-root .wood-vz-intro { padding: 56px 16px; }
  .wood-vz-root .wood-vz-intro__binnen { grid-template-columns: 1fr; }
  .wood-vz-root .wood-vz-intro__kaart { padding: 28px 24px; }
}/* --- De uitkomst ----------------------------------------------------------- *//*
 * Eén wit blok, in deze volgorde (Tim, 25 sep 2026): titel, de vloeren, de lijst
 * met antwoorden en dan de vier vervolgstappen. Alles in de lijntjesstijl van de
 * keuzes en het contactformulier: transparant, 0,8px #D7CCB8, geen schaduw.
 */




.wood-vz-root .wood-vz-uitkomst { padding: 64px 16px 72px; background: #fff; }
.wood-vz-root .wood-vz-uitkomst .wood-titel--groot { margin-bottom: 24px; }

.wood-vz-root .wood-vloeren__melding {
  max-width: 62ch;
  margin: -12px 0 28px;
  color: rgba(53, 51, 46, .8);
}/*
 * De vloeren als de collectietegels op de homepage (gemeten 25 sep 2026): vier
 * per rij, 20px ertussen, foto 270 bij 250, titel Libre Baskerville 14px in
 * hoofdletters met 1,4px spatiëring, 15px onder de foto. Daaronder een regel
 * Inter Tight 12px dun in hoofdletters, #7A7468, met een streepje ertussen.
 * De titel is zwart en niet groen: groen is voor de aanhef (Tim).
 */


.wood-vz-root .wood-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 20px;
}
@media (max-width: 820px) { .wood-vz-root .wood-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Op een telefoon ook twee naast elkaar (Tim, 25 sep 2026), met iets minder ruimte ertussen. */
@media (max-width: 520px) { .wood-vz-root .wood-raster { gap: 24px 12px; } }
.wood-vz-root .wood-kaart__link,
.wood-vz-root a.wood-kaart__link:hover,
.wood-vz-root a.wood-kaart__link:focus,
.wood-vz-root a.wood-kaart__link:active {
  display: block; text-decoration: none; color: inherit;
}
.wood-vz-root .wood-kaart__beeld { position: relative; overflow: hidden; aspect-ratio: 270 / 250; background: var(--wood-zand); }
.wood-vz-root .wood-kaart__foto { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wood-vz-root .wood-kaart__link:hover .wood-kaart__foto { transform: scale(1.04); }
.wood-vz-root .wood-kaart .wood-kaart__titel {
  margin: 15px 0 0;
  font: 500 14px/1.3 "Libre Baskerville", Georgia, serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wood-inkt);
}/* "Laat meer zien" zoals "Lees meer" op de collectie- en dienstpagina's: lichte knop in het midden. */

.wood-vz-root .wood-vloeren__meer { margin-top: 48px; text-align: center; }/* Kort pad: tekst over de dienst. */


.wood-vz-root .wood-vz-dienst__tekst { max-width: 62ch; }
.wood-vz-root .wood-vz-dienst__tekst p { margin: 0 0 18px; }/*
 * De antwoorden als lijst: per regel het onderwerp, het antwoord en rechts
 * "Aanpassen". Twee kolommen op een groot scherm, lijntje onder elke regel.
 *//* "Bekijk of wijzig je antwoorden" is een lichte knop, zoals Terugbellen, met een pijltje dat omklapt. */



.wood-vz-root .wood-vz-uitkomst__intro { max-width: 68ch; margin: -4px 0 16px; font-weight: 300; }
.wood-vz-root .wood-vz-antwoorden { margin: 0 0 36px; }
/* "Wijzig je antwoorden" als de filterknop van de collectie: dun omlijnd, groen, chevron (Tim, 3 okt 2026). */
.wood-vz-root button.wood-vz-antwoorden__knop,
.wood-vz-root button.wood-vz-antwoorden__knop:hover,
.wood-vz-root button.wood-vz-antwoorden__knop:focus,
.wood-vz-root button.wood-vz-antwoorden__knop:active {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wood-groen);
  box-shadow: inset 0 0 0 1px rgba(0, 67, 57, .25);
  font: 400 .85rem/1.4 "Inter Tight", sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.wood-vz-root button.wood-vz-antwoorden__knop:hover,
.wood-vz-root button.wood-vz-antwoorden__knop[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(0, 67, 57, .5); }
.wood-vz-root .wood-vz-antwoorden__knop svg { transition: transform .2s ease; }
.wood-vz-root .wood-vz-antwoorden__knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.wood-vz-root .wood-vz-lijst[hidden] { display: none; }
.wood-vz-root .wood-vz-lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  margin: 0;
  padding: 0;
  margin-top: 18px;
  list-style: none;
  border-top: .8px solid var(--wood-lijn);
}
@media (max-width: 820px) { .wood-vz-root .wood-vz-lijst { grid-template-columns: minmax(0, 1fr); } }
.wood-vz-root .wood-vz-lijst li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: .8px solid var(--wood-lijn);
}
@media (min-width: 821px) {/* Bovenste regel van de rechterkolom krijgt geen dubbel lijntje: de lijst heeft er al een. */
  
  .wood-vz-root .wood-vz-lijst li:nth-child(2) { border-top: 0; }
}
.wood-vz-root .wood-vz-lijst__label {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wood-bosgroen);
}
.wood-vz-root .wood-vz-lijst__waarde { font-size: 15px; font-weight: 300; }
.wood-vz-root button.wood-vz-lijst__aanpassen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wood-goud-zacht);
  font: 300 13px/1.2 "Inter Tight", sans-serif;
  cursor: pointer;
}
.wood-vz-root button.wood-vz-lijst__aanpassen:hover,
.wood-vz-root button.wood-vz-lijst__aanpassen:focus,
.wood-vz-root button.wood-vz-lijst__aanpassen:active { background: none; color: var(--wood-groen); }
@media (max-width: 520px) {
  .wood-vz-root .wood-vz-lijst li { grid-template-columns: minmax(0, 1fr) auto; }
  .wood-vz-root .wood-vz-lijst__label { grid-column: 1 / -1; }
}/* De vier vervolgstappen, op hetzelfde wit, in de lijntjesstijl. */


.wood-vz-root .wood-vz-routes {
  display: grid;
  /* Vier kaarten, of drie zolang Evi er niet is: ze vullen samen de breedte. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wood-vz-root .wood-vz-routes__kop { max-width: 720px; margin: 0 0 56px; }
.wood-vz-root .wood-vz-routes__kop p:last-child { margin: 12px 0 0; font-weight: 300; }
@media (max-width: 1100px) { .wood-vz-root .wood-vz-routes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .wood-vz-root .wood-vz-routes { grid-template-columns: minmax(0, 1fr); } }
.wood-vz-root .wood-vz-routes > li { display: flex; }
/*
 * Wit vlak met de vloeren, 80px onder "Laat meer zien"; daarna de volgende stap
 * in een eigen crème sectie. De kaarten zijn witte vlakken zonder lijntje, met
 * de lichte schaduw van de kaarten op de contactpagina (Tim, 3 okt 2026).
 */
.wood-vz-root .wood-vz-uitkomst { padding-bottom: 80px; }
.wood-vz-root .wood-vz-vervolg { padding: 80px 16px 0; background: var(--wood-creme); }
.wood-vz-root .wood-vz-route {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 30px 28px;
  border: 0;
  background: #fff;
  color: var(--wood-inkt);
  box-shadow: 0 -12px 28px -22px rgba(0, 67, 57, .16), 0 16px 36px -26px rgba(0, 0, 0, .2);
}/*
 * Labeltje op de bovenrand, zoals "Meest gekozen" bij Stichting Evi (13px boven
 * de kaart, rechts). Voor Wood recht en in het goud van de knop. Zo staan de
 * titels van de vier kaarten op dezelfde hoogte.
 */

.wood-vz-root .wood-vz-route__label {
  position: absolute;
  top: -11px;
  right: 22px;
  margin: 0;
  padding: 6px 10px;
  background: var(--wood-goud);
  color: var(--wood-inkt);
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wood-vz-root .wood-vz-route .wood-vz-route__naam {
  margin: 0;
  font: 400 16px/1.3 "Libre Baskerville", Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}
.wood-vz-root .wood-vz-route__zin { margin: 0 0 8px; flex: 1 1 auto; font-size: 15px; font-weight: 300; }
.wood-vz-root .wood-vz-route .wood-knop { margin-top: auto; }/* Beide nummers in de opmaak van de tekst, onderaan waar de andere kaarten hun knop hebben. */

.wood-vz-root .wood-vz-route__nummers { margin: auto 0 0; }/* opmaak: .wood-gegevens in wood-collectie.css */
.wood-vz-root .wood-knop svg.wood-knop__chat { width: 18px; height: 18px; }/* De quote op hetzelfde crème, onder de kaarten. */


.wood-vz-root .wood-vz-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 16px;
  background: var(--wood-creme);
}
.wood-vz-root .wood-vz-slot__quote { max-width: 760px; margin: 0; text-align: center; }
.wood-vz-root .wood-vz-slot__quote p {
  margin: 0;
  font: italic 400 26px/1.45 "Libre Baskerville", Georgia, serif;
  color: var(--wood-inkt);
}
.wood-vz-root .wood-vz-slot__quote footer {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wood-bosgroen);
}
@media (max-width: 600px) {
  .wood-vz-root .wood-vz-slot { padding: 80px 16px; }
  .wood-vz-root .wood-vz-slot__quote p { font-size: 20px; }
}/* De aanvraag opent in een venster, zodat de kaarten en de foto blijven staan. *//*
 * Het aanvraagvenster als het vloerzoeker-venster: crème, zelfde maten (Tim, 3 okt 2026). Dagen, tijden en velden zijn witte vakjes zonder lijntje; een gekozen
 * dag of tijd wordt bijna crème met een dun goudrandje (variant B2).
 */



.wood-vz-root.wood-vz-venster--aanvraag .wood-vz-venster__binnen { padding: 80px 80px 70px; }
@media (max-width: 700px) { .wood-vz-root.wood-vz-venster--aanvraag .wood-vz-venster__binnen { padding: 56px 16px 44px; } }
.wood-vz-root.wood-vz-venster--aanvraag .wood-vz-paneel { padding: 0; background: transparent; }

.wood-vz-root .wood-vz-paneel {
  padding: 32px;
  background: var(--wood-creme);
}
@media (max-width: 600px) { .wood-vz-root .wood-vz-paneel { padding: 24px 18px; } }
.wood-vz-root .wood-vz-paneel[hidden] { display: none; }
.wood-vz-root .wood-vz-paneel h3 { margin: 0 0 6px; }
.wood-vz-root .wood-vz-paneel__zin { margin: 0 0 22px; max-width: 62ch; }

.wood-vz-root .wood-vz-dagen {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  overflow-x: auto;
  padding: 4px 2px 10px;
}
.wood-vz-root button.wood-vz-dag {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 10px 10px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--wood-inkt);
  font: 400 14px/1.3 "Inter Tight", sans-serif;
  cursor: pointer;
}
.wood-vz-root button.wood-vz-dag b { display: block; font-weight: 500; font-size: 16px; }
.wood-vz-root button.wood-vz-dag:hover,
.wood-vz-root button.wood-vz-dag:focus { background: #fff; color: var(--wood-inkt); box-shadow: inset 0 0 0 1px var(--wood-lijn); }
.wood-vz-root button.wood-vz-dag[aria-pressed="true"],
.wood-vz-root button.wood-vz-dag[aria-pressed="true"]:hover,
.wood-vz-root button.wood-vz-dag[aria-pressed="true"]:focus { background: #F8F0DF; box-shadow: inset 0 0 0 1px var(--wood-goud-zacht); color: var(--wood-inkt); }
.wood-vz-root .wood-vz-tijden { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.wood-vz-root button.wood-vz-tijd {
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--wood-groen);
  font: 400 15px/1 "Inter Tight", sans-serif;
  cursor: pointer;
}
.wood-vz-root button.wood-vz-tijd:hover,
.wood-vz-root button.wood-vz-tijd:focus { background: #fff; color: var(--wood-groen); box-shadow: inset 0 0 0 1px var(--wood-lijn); }
.wood-vz-root button.wood-vz-tijd[aria-pressed="true"],
.wood-vz-root button.wood-vz-tijd[aria-pressed="true"]:hover,
.wood-vz-root button.wood-vz-tijd[aria-pressed="true"]:focus { background: #F8F0DF; box-shadow: inset 0 0 0 1px var(--wood-goud-zacht); color: var(--wood-inkt); }
.wood-vz-root button.wood-vz-tijd[disabled] { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.wood-vz-root .wood-vz-voorbeeldlabel { font-size: 13px; color: rgba(53, 51, 46, .7); margin: -8px 0 20px; }/*
 * De velden van het contactformulier op de site (gemeten 25 sep 2026): onder
 * elkaar, 40px hoog, 10px ertussen, 0,8px lijntje #D7CCB8, transparant, geen
 * afronding. De naam van het veld staat erin, in Inter Tight 12px hoofdletters
 * met 1,56px spatiëring; het echte label is er voor schermlezers.
 */


.wood-vz-root .wood-vz-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-width: 520px;
  margin: 0 0 20px;
}
.wood-vz-root .wood-vz-form input,
.wood-vz-root .wood-vz__veld textarea,
.wood-vz-root .wood-vz__veld input {
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border: .8px solid var(--wood-lijn);
  border-radius: 0;
  background: transparent;
  color: #1F2124;
  font: 400 12px/16.8px "Inter Tight", sans-serif;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  box-shadow: none;
}
.wood-vz-root .wood-vz__veld textarea { height: auto; min-height: 79px; padding: 8px 16px; resize: vertical; }
.wood-vz-root .wood-vz__veld input[type="number"] { max-width: 200px; }
.wood-vz-root .wood-vz-form input::placeholder,
.wood-vz-root .wood-vz__veld textarea::placeholder,
.wood-vz-root .wood-vz__veld input::placeholder { color: #1F2124; opacity: 1; }/* Onder 16px zoomt een iPhone in bij het typen; op een telefoon daarom 16px. */

@media (max-width: 600px) {
  .wood-vz-root .wood-vz-form input,
.wood-vz-root .wood-vz__veld textarea,
.wood-vz-root .wood-vz__veld input { font-size: 16px; letter-spacing: 1px; }
}
/* In het aanvraagvenster: witte velden zonder lijntje op het crème. */
.wood-vz-root .wood-vz-form input { border: 0; background: #fff; }
.wood-vz-root .wood-vz-form input[aria-invalid="true"] { border: 1.5px solid #9b3b2f; }
.wood-vz-root .wood-vz-fout { margin: 6px 0 0; font-size: 13px; color: #9b3b2f; }
.wood-vz-root .wood-vz-fout--tijd { margin: -14px 0 18px; }
.wood-vz-root .wood-vz-waarom { margin: 0 0 20px; font-size: 14px; color: rgba(53, 51, 46, .8); max-width: 70ch; }

.wood-vz-root .wood-vz-bellen { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.wood-vz-root .wood-vz-bellen a.wood-vz-nummer {
  font: 400 26px/1.2 "Libre Baskerville", Georgia, serif;
  color: var(--wood-groen);
  text-decoration: none;
}/* De bevestiging: wit vlak met het goudlijntje van de kaarten, ruim en in het midden. */


.wood-vz-root .wood-vz-bedankt {
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 0 20px;
  text-align: center;
}
.wood-vz-root .wood-vz-bedankt h3 { margin: 0 0 16px; }
.wood-vz-root .wood-vz-bedankt p { margin: 0 0 8px; font-weight: 300; }
.wood-vz-root .wood-vz-bedankt p:last-child { margin: 0; }

/* Na een open afspraak (Tim, 5 okt 2026): gecentreerd, een kort goudlijntje, dan de
   vraag in zwart en twee even brede knoppen. Geen wit vlak. */
.wood-vz-root .wood-vz-bevestigd {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 12px;
  text-align: center;
  outline: 0;
}
.wood-vz-root .wood-vz-bevestigd__aanhef {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wood-groen, #004339);
}
.wood-vz-root .wood-vz-bevestigd h3 { margin: 0 0 14px; text-wrap: balance; }
.wood-vz-root .wood-vz-bevestigd p { margin: 0; font-weight: 300; }
.wood-vz-root .wood-vz-bevestigd__vervolg {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 36px;
}
.wood-vz-root .wood-vz-bevestigd__vervolg::before {
  content: "";
  width: 64px;
  height: 1px;
  margin-bottom: 22px;
  background: var(--wood-goud-zacht, #C29E66);
}
.wood-vz-root .wood-vz-bevestigd__vervolg h4 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wood-inkt, #35332E);
}
.wood-vz-root .wood-vz-bevestigd__knoppen {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  gap: 16px;
  margin-top: 16px;
}
.wood-vz-root .wood-vz-bevestigd__knoppen .wood-knop { justify-content: center; width: 100%; padding: 15px 12px; }
@media (max-width: 520px) {
  .wood-vz-root .wood-vz-bevestigd__knoppen { grid-template-columns: minmax(0, 260px); }
}

/* Annuleerpagina (link uit de bevestigingsmail, ?wood-afspraak=...) */
/* De megamenu geeft het eerste blok al ruimte onder de vaste kop (.wood-mm-ruimte). */
.wood-vz-annuleer__binnen {
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 20px 100px;
  text-align: center;
}
.wood-vz-annuleer .wood-vz-bevestigd__aanhef {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wood-groen, #004339);
}
/* De kop staat buiten .wood-vz-root en kreeg de h1 van de site: op mobiel veel te groot (Tim, 12 okt).
   Zelfde maat als .wood-titel--groot in het venster. */
.wood-vz-annuleer h1 {
  margin: 0 0 18px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--wood-inkt, #35332E);
}
@media (max-width: 600px) {
  .wood-vz-annuleer h1 { font-size: 22px; }
  .wood-vz-annuleer__binnen { padding: 56px 16px 72px; }
}
.wood-vz-annuleer p { margin: 0 0 24px; font-weight: 300; }
.wood-vz-annuleer form { margin: 0; }