/*
Theme Name: Van Hout
Theme URI: /
Description: Child theme voor Van Hout Buitenkamers, een fictief bedrijf (portfolioproject).
Author: Georgi Rjabynin
Template: hello-elementor
Version: 2.0.0
Text Domain: vanhout
*/

/* Geen smooth scroll: dat liet ankerlinks stilstaan op de site van Maria.
   html:root wint van de regel in Elementor's frontend.min.css. */
html:root {
  scroll-behavior: auto;
}

/* Basis in de huisstijl van Van Hout (kit-tokens). De oude LUWT-basis gebruikte
   Iowan en Avenir, die alleen op een Mac bestaan, en een krappe letterafstand
   die de kit niet overschrijft. */
body {
  background: var(--e-global-color-wit);
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-text-font-family), system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

h1,
h2,
h3,
h4 {
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.15;
  text-wrap: balance;
}

::selection {
  background: var(--e-global-color-primary);
  color: var(--e-global-color-wit);
}

/* ==========================================================================
   Van Hout: aanvullingen op Elementor
   Alle inhoud en bijna alle stijl staan in Elementor (kit + widgets). Hier
   alleen wat Elementor niet kan: vaste header op desktop, de vaste actiebalk,
   zichtbare focus, en icoonknoppen die op een telefoon alleen hun icoon tonen.
   Kleuren uit de kit: var(--e-global-color-<id>).
   ========================================================================== */

/* Vast bovenaan alleen op desktop (vanaf 1201 px, breekpunt tablet_extra). Op een telefoon kost een vaste balk
   bovenaan te veel leesruimte; daar staat de actiebalk onderaan. */
@media (min-width: 1201px) {
  .elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .admin-bar .elementor-location-header {
    top: 32px;
  }
  html:root {
    scroll-padding-top: 120px;
  }
}

/* De naam in het woordmerk breekt nooit af. */
.vh-geen-afbreking .elementor-heading-title {
  white-space: nowrap;
}

/* Elementor-knoppen hebben "transition: all 0.3s", ook voor de focusrand: die begon in
   de tekstkleur (wit op een donkere knop) en werd pas daarna Douglas. De focusrand
   moet er meteen staan; alleen kleuren en achtergrond lopen nog vloeiend over. */
.elementor-button {
  transition-property: color, background-color, border-color;
}

/* Zichtbare focus op elke knop en elk menu-item. */
.elementor-button:focus-visible,
.elementor-heading-title a:focus-visible,
.elementor-location-header .elementor-item:focus-visible {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 3px;
}
.elementor-location-footer .elementor-button:focus-visible,
.elementor-location-footer .elementor-item:focus-visible,
.elementor-location-footer .elementor-heading-title a:focus-visible,
.vh-overlaymenu .elementor-item:focus-visible,
.elementor-popup-modal .elementor-button:focus-visible,
.elementor-popup-modal .elementor-heading-title a:focus-visible {
  outline-color: var(--e-global-color-kalk);
}

/* Icoonknop (Bel, Menu): minstens 44 px. Op een telefoon alleen het icoon;
   de tekst blijft onzichtbaar aanwezig als naam voor schermlezers. */
.vh-icoonknop .elementor-button {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
@media (max-width: 767px) {
  .vh-icoonknop .elementor-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .vh-icoonknop .elementor-button-icon {
    margin: 0;
  }
}
/* De sluitknop van het menu toont altijd alleen het kruisje. */
.vh-icoonknop--altijd .elementor-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.vh-icoonknop--altijd .elementor-button-icon {
  margin: 0;
}

/* Vaste actiebalk (container met ID vh-actiebalk in de footer): onderaan op
   telefoon en tablet, pas na het eerste scherm. Verborgen met visibility,
   zodat Tab er niet in belandt zolang hij weg is. */
#vh-actiebalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--e-global-color-lijn);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
#vh-actiebalk.is-zichtbaar {
  visibility: visible;
  transform: none;
  transition: transform 0.25s ease, visibility 0s;
}
#vh-actiebalk .vh-actiebalk-knop {
  flex: 1;
}
#vh-actiebalk .vh-actiebalk-knop .elementor-button {
  width: 100%;
  min-height: 52px;
  justify-content: center;
}
#vh-actiebalk .vh-icoonknop .elementor-button {
  min-width: 52px;
  min-height: 52px;
}
@media (min-width: 1201px) {
  #vh-actiebalk {
    display: none;
  }
}
.vh-zonder-actiebalk #vh-actiebalk {
  display: none;
}
/* Ruimte onder de footer, zodat de balk de laatste regel niet bedekt. */
@media (max-width: 1200px) {
  body:not(.vh-zonder-actiebalk) #vh-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #vh-actiebalk,
  #vh-actiebalk.is-zichtbaar {
    transition: none;
  }
}

/* Links in lopende tekst: onderstreept. Alleen kleur is niet genoeg (WCAG 1.4.1),
   en Hello Elementor haalt de onderstreping weg. */
.elementor-widget-text-editor a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Knoppen in de header en de actiebalk krimpen niet en breken niet af:
   in een flexrij werd "Start je aanvraag" anders twee regels hoog. */
.elementor-location-header .elementor-widget-button,
#vh-actiebalk .elementor-widget-button {
  flex-shrink: 0;
}
.elementor-location-header .elementor-button-text,
#vh-actiebalk .elementor-button-text {
  white-space: nowrap;
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
  flex-wrap: nowrap;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item {
  white-space: nowrap;
}
.elementor-location-header .elementor-widget-nav-menu {
  flex-shrink: 0;
}

/* Titel van een realisatiekaart op de homepage: een link naar dat project.
   Onderstreept, zodat je ziet dat je erop kunt tikken (niet alleen met kleur).
   De hoverkleur (Douglas) staat in de widget zelf: Kleur › Hover. */
.vh-kaartlink a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--e-global-color-rand);
}
.vh-kaartlink a:hover,
.vh-kaartlink a:focus {
  text-decoration-color: currentColor;
}

/* Opsommingen in een tekstvak: ingesprongen, zonder extra marge eromheen. */
.elementor-widget-text-editor ul {
  margin: 0;
  padding-left: 1.25em;
}
.elementor-widget-text-editor li + li {
  margin-top: 4px;
}

/* ==========================================================================
   Aanvraag in vijf stappen (formulier met klasse vh-aanvraag)
   Kleuren, lettertypes en de voortgangsbalk staan in de widget zelf; hier staat
   alleen wat Elementor niet kan: keuzetegels, foutmeldingen, de prijsindicatie
   en de knop Terug.
   ========================================================================== */

/* Boven elke stap: "Stap 2 van 5" en de vraag als kop. */
.vh-aanvraag .vh-stap {
  margin: 0 0 4px;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
  letter-spacing: var(--e-global-typography-accent-letter-spacing);
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
}
.vh-aanvraag .vh-stapvraag {
  margin: 0;
  font-family: var(--e-global-typography-secondary-font-family), serif;
  font-size: var(--e-global-typography-secondary-font-size);
  line-height: var(--e-global-typography-secondary-line-height);
  font-weight: 600;
  color: var(--e-global-color-text);
}
.vh-aanvraag .vh-stapvraag:focus {
  outline: none;
}

/* De vraag staat al als kop boven stap 1; het label blijft voor schermlezers. */
.vh-aanvraag .elementor-field-group-soort > .elementor-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keuzetegels: het hele vak is aanklikbaar, minstens 56 px hoog. Het rondje blijft
   zichtbaar, zodat ook zonder kleur duidelijk is wat gekozen is. */
.vh-aanvraag .vh-tegels {
  display: grid;
  gap: 10px;
}
.vh-aanvraag .vh-tegels--twee {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vh-aanvraag .vh-tegels .elementor-field-option {
  position: relative;
  display: block;
  margin: 0;
}
.vh-aanvraag .vh-tegels .elementor-field-option input {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  margin: 0;
  transform: translateY(-50%);
  accent-color: var(--e-global-color-primary);
}
.vh-aanvraag .vh-tegels .elementor-field-option label {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  padding: 12px 14px 12px 48px;
  border: 1px solid var(--e-global-color-rand);
  border-radius: 4px;
  background: var(--e-global-color-wit);
  color: var(--e-global-color-text);
  font-size: 17px;
  line-height: 1.3;
  cursor: pointer;
}
.vh-aanvraag .vh-tegels .elementor-field-option label:hover {
  border-color: var(--e-global-color-text);
}
.vh-aanvraag .vh-tegels .elementor-field-option input:checked + label {
  border-color: var(--e-global-color-primary);
  box-shadow: inset 0 0 0 1px var(--e-global-color-primary);
  background: var(--e-global-color-kalk);
}
.vh-aanvraag .vh-tegels .elementor-field-option input:focus-visible + label {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 2px;
}
.vh-tegel-titel {
  font-weight: 600;
}
.vh-tegel-uitleg {
  margin-top: 2px;
  font-size: 15px;
  color: var(--e-global-color-secondary);
}

/* Prijsindicatie in stap 2: zonder keuze de algemene vork, anders die van de soort. */
.vh-aanvraag .vh-prijsindicatie {
  padding: 14px 16px;
  border-left: 3px solid var(--e-global-color-primary);
  border-radius: 4px;
  background: var(--e-global-color-kalk);
}
.vh-aanvraag .vh-prijsindicatie p {
  margin: 0;
}
.vh-aanvraag .vh-prijsindicatie [data-soort] {
  display: none;
  margin-bottom: 6px;
  font-weight: 600;
}
.vh-aanvraag .vh-prijsindicatie [data-soort="Weet ik nog niet"],
.vh-aanvraag .vh-prijsindicatie [data-soort].is-gekozen {
  display: block;
}
.vh-aanvraag .vh-prijsindicatie:has(.is-gekozen) [data-soort]:not(.is-gekozen) {
  display: none;
}
.vh-aanvraag .vh-prijsindicatie .vh-klein {
  font-size: 15px;
  color: var(--e-global-color-secondary);
}

/* Meldingen in het formulier: werkgebied, vergunning, belofte, demo. */
.vh-aanvraag .vh-melding {
  margin: 0;
  padding: 12px 16px;
  border-radius: 4px;
  background: var(--e-global-color-kalk);
  color: var(--e-global-color-text);
}
.vh-aanvraag .vh-melding[hidden] {
  display: none;
}
.vh-aanvraag .vh-melding--demo {
  border: 1px dashed var(--e-global-color-rand);
  background: transparent;
}
.vh-aanvraag .vh-hulp {
  margin: 0;
  font-size: 15px;
  color: var(--e-global-color-secondary);
}

/* Foutmelding onder het veld: in Kool met een icoon, nooit alleen in kleur. */
.vh-aanvraag .vh-fout,
.vh-aanvraag .elementor-message-danger.elementor-help-inline {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 0;
  color: var(--e-global-color-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.vh-aanvraag .vh-fout::before,
.vh-aanvraag .elementor-message-danger.elementor-help-inline::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  background-color: var(--e-global-color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vh-aanvraag .vh-heeft-fout .elementor-field-textual,
.vh-aanvraag .vh-heeft-fout .elementor-field-option label,
.vh-aanvraag .vh-heeft-fout .elementor-upload-field {
  border-color: var(--e-global-color-accent);
  box-shadow: inset 0 0 0 1px var(--e-global-color-accent);
}

/* Foto's kiezen: de knop van het bestandsveld als randknop van 44 px. */
.vh-aanvraag .elementor-upload-field {
  padding: 8px;
  border: 1px dashed var(--e-global-color-rand);
  border-radius: 4px;
  background: var(--e-global-color-wit);
}
.vh-aanvraag .elementor-upload-field::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  padding: 0 16px;
  border: 1px solid var(--e-global-color-rand);
  border-radius: 4px;
  background: var(--e-global-color-kalk);
  color: var(--e-global-color-text);
  font: 600 16px/1 var(--e-global-typography-knop-font-family), sans-serif;
  cursor: pointer;
}

/* Knoppen onderaan elke stap: Terug als randknop links, Volgende rechts.
   Met button.klasse: Hello Elementor kleurt elke knop anders roze bij hover en focus. */
.vh-aanvraag .e-form__buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 8px;
}
.vh-aanvraag .e-form__buttons__wrapper {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  padding: 0;
}
.vh-aanvraag .e-form__buttons__wrapper.elementor-field-type-previous {
  flex: 0 0 auto;
}
.vh-aanvraag .e-form__buttons__wrapper .elementor-button {
  width: 100%;
}
/* Elke knop een rand van 1 px (doorzichtig waar geen rand hoort): even hoog als Terug. */
.vh-aanvraag .elementor-button {
  border: 1px solid transparent;
}
.vh-aanvraag button.e-form__buttons__wrapper__button-previous,
.vh-aanvraag button.e-form__buttons__wrapper__button-previous:hover,
.vh-aanvraag button.e-form__buttons__wrapper__button-previous:focus {
  border: 1px solid var(--e-global-color-rand);
  background: transparent;
  color: var(--e-global-color-text);
}
.vh-aanvraag button.e-form__buttons__wrapper__button-previous:hover {
  border-color: var(--e-global-color-text);
}
.vh-aanvraag .elementor-button:focus-visible {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 2px;
}

/* Elementor zet het percentage altijd als tekst in de voortgangsbalk, ook met
   "Display Percentage" uit. "Stap 2 van 5" zegt het al, en leesbaarder. */
.vh-aanvraag .e-form__indicators__indicator__progress__meter {
  font-size: 0;
  color: transparent;
}

/* Toestemming: vakje van 20 px, en vakje plus tekst samen minstens 44 px hoog. */
.vh-aanvraag .elementor-field-type-acceptance .elementor-field-option {
  position: relative;
  display: block;
}
.vh-aanvraag .elementor-field-type-acceptance input[type="checkbox"] {
  position: absolute;
  top: 12px;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--e-global-color-primary);
}
.vh-aanvraag .elementor-field-type-acceptance label {
  display: block;
  padding: 10px 0 10px 32px;
  line-height: 24px;
  cursor: pointer;
}
.vh-aanvraag .elementor-field-type-acceptance label a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Melding dat het een fictief bedrijf is (bedankpagina). Gestippelde rand: geen
   fout, wel iets dat opvalt. Bij een echte klant verdwijnt dit blok. */
.vh-demomelding p {
  padding: 12px 16px;
  border: 1px dashed var(--e-global-color-rand);
  border-radius: 4px;
}

/* Het woordmerk als link: klikvlak minstens 24 px hoog (WCAG 2.5.8). De negatieve
   marge houdt de opmaak gelijk. */
.vh-geen-afbreking .elementor-heading-title a {
  display: inline-block;
  padding-block: 3px;
  margin-block: -3px;
}

/* Voor Elementor's script de stappen opbouwt, staat het hele formulier onder elkaar
   (3266 px op een telefoon) en klapt het daarna in tot stap 1: de pagina versprong
   (CLS 0,7). Zolang de voortgangsbalk er niet is, alleen stap 1 tonen en de plaats
   van de balk (6 px plus 20 px marge) en de knop vrijhouden. */
.vh-aanvraag form:not(:has(.e-form__indicators)) {
  padding-top: 26px;
  padding-bottom: 56px;
}
.vh-aanvraag form:not(:has(.e-form__indicators)) .elementor-field-group-stap2,
.vh-aanvraag form:not(:has(.e-form__indicators)) .elementor-field-group-stap2 ~ * {
  display: none;
}

/* De hele realisatiekaart is aanklikbaar via de link in de titel (expertreview B5): een
   tik op het beeld deed eerst niets. Eén link over de hele kaart, dus één tabstop en
   één naam voor schermlezers, in plaats van een tweede link op het beeld. */
[id^="vh-kaart-"] {
  position: relative;
}
/* Elementor geeft elk element en elke container position: relative; dan bedekte de link
   alleen de titel. Binnen de kaart is de kaart zelf het referentiepunt. */
[id^="vh-kaart-"] .e-con,
[id^="vh-kaart-"] .elementor-element {
  position: static;
}
.vh-kaartlink a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Sprongen bovenaan een lange pagina (Prijzen en werkwijze). */
.vh-sprongen-label {
  flex-basis: 100%;
}

/* ---- Beweging: de hero (docs/ontwerp/beweging.md, variant B "Op zijn plek") ----
   Gewone CSS: het begint bij de eerste weergave, zonder op een script te wachten.
   Alles staat binnen deze mediaquery, dus wie op zijn toestel beperkte beweging vraagt,
   ziet de hero meteen. Alleen transform en opacity: niets verschuift (CLS blijft 0), en
   de foto is vanaf het eerste beeld zichtbaar (LCP). De woorden zet functions.php op de
   server in <span>'s (klasse vh-woorden op de kopwidget). */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --vh-zwaar: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Elk woord in zijn eigen masker, voor de hero en voor de koppen die bij het scrollen
     verschijnen (vh-kop, assets/beweging.js). De ruimte onderaan houdt de staarten van
     g, j en p binnen het masker; de negatieve marge zet de regelhoogte terug. */
  .vh-woorden .vh-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
  }
  .vh-woorden .vh-wi {
    display: inline-block;
  }
  /* De hero-titel schuift bij het laden omhoog uit zijn regels. */
  .vh-hero-titel .vh-wi {
    animation: vh-schuif 900ms var(--vh-zwaar) both;
    animation-delay: calc(80ms + var(--i, 0) * 70ms);
  }

  /* Tekst, knoppen en punten: de blokken na de titel volgen. */
  .vh-hero-titel ~ * {
    animation: vh-blok 600ms var(--vh-zwaar) both;
  }
  .vh-hero-titel + * { animation-delay: 550ms; }
  .vh-hero-titel + * + * { animation-delay: 650ms; }
  .vh-hero-titel + * + * + * { animation-delay: 750ms; }
  /* Wie meteen met Tab naar de knop gaat, ziet die meteen. */
  .vh-hero-titel ~ *:focus-within {
    animation: none;
  }

  /* De foto staat er meteen en zakt traag terug; het vak eromheen knipt de rand af. */
  .vh-beeld-hero {
    overflow: hidden;
    border-radius: 4px;
  }
  .vh-beeld-hero img {
    animation: vh-zoom 1800ms var(--vh-zwaar) both;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
  .vh-beeld-hero {
    border-radius: 0;
  }
}
/* ---- Beweging bij het scrollen (assets/beweging.js) ----
   Het script verbergt alleen wat onder het eerste scherm staat; zonder script staat
   alles er gewoon. Een beeld met vh-zoom zakt van 106 naar 100 procent: het vak
   eromheen knipt de rand af. */
@media (prefers-reduced-motion: no-preference) {
  .vh-zoom {
    overflow: hidden;
  }
}
/* 3D: van balk tot buitenkamer (Zo werken we). Het canvas ligt precies over het
   stilstaande beeld, dat de plaats bepaalt: niets verschuift als het model laadt. Een stap
   die het model nog niet bereikt heeft, krijgt een open cirkel; de tekst blijft gelijk. */
.vh-3d-still img {
  display: block;
  width: 100%;
  height: auto;
}
.vh-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vh-3d-still.is-3d img {
  visibility: hidden;
}
[data-vh~="stap"] .vh-stapnummer {
  transition: background-color 200ms, box-shadow 200ms;
}
[data-vh~="stap"].is-later .vh-stapnummer {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 2px var(--e-global-color-primary);
}
[data-vh~="stap"].is-later .vh-stapnummer .elementor-heading-title {
  color: var(--e-global-color-primary) !important;
}

/* ---- Details (docs/ontwerp/beweging.md, "Details") ----
   Alleen zonder beperkte beweging. Met de losse eigenschappen translate en scale, niet
   met transform: die zet GSAP zelf bij het in beeld komen, en een CSS-overgang op
   dezelfde eigenschap zou daar elk beeldje tussenkomen. */
@media (prefers-reduced-motion: no-preference) {
  /* Het menu: de items komen een voor een op, daarna de knop en het telefoonnummer. De
     popup gaat van display: none naar zichtbaar, dus dit speelt bij elke keer openen. */
  .vh-overlaymenu .elementor-nav-menu--main .elementor-nav-menu > li,
  .vh-overlaymenu + .elementor-element,
  .elementor-popup-modal .e-con:has(> .vh-overlaymenu) + .e-con {
    animation: vh-blok 600ms var(--vh-zwaar) both;
  }
  .vh-overlaymenu .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(1) { animation-delay: 80ms; }
  .vh-overlaymenu .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(2) { animation-delay: 140ms; }
  .vh-overlaymenu .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(3) { animation-delay: 200ms; }
  .vh-overlaymenu .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(4) { animation-delay: 260ms; }
  .vh-overlaymenu .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(n+5) { animation-delay: 320ms; }
  .vh-overlaymenu + .elementor-element { animation-delay: 360ms; }
  .elementor-popup-modal .e-con:has(> .vh-overlaymenu) + .e-con { animation-delay: 440ms; }
  /* Wat de focus krijgt, staat er meteen. */
  .vh-overlaymenu .elementor-nav-menu > li:focus-within,
  .vh-overlaymenu + .elementor-element:focus-within,
  .elementor-popup-modal .e-con:has(> .vh-overlaymenu) + .e-con:focus-within {
    animation: none;
  }

  /* Het pijltje van een tekstlink schuift 3 px op, als wijzer. De knop zelf beweegt niet. */
  .elementor-button .e-fas-arrow-right {
    transition: translate 200ms var(--vh-zwaar);
  }
  .elementor-button:hover .e-fas-arrow-right,
  .elementor-button:focus-visible .e-fas-arrow-right {
    translate: 3px 0;
  }
}

/* Een realisatiekaart op de homepage: het beeld zoomt licht in onder de muis of bij focus
   (de hele kaart is één link). Alleen op toestellen met een muis. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .vh-beeld-kaart img {
    transition: scale 600ms var(--vh-zwaar);
  }
  [id^="vh-kaart-"]:hover .vh-beeld-kaart img,
  [id^="vh-kaart-"]:focus-within .vh-beeld-kaart img {
    scale: 1.04;
  }
}

/* Statische demo (tools/live/exporteer.js): een melding bovenaan de privacyverklaring dat
   er op de demo niets verstuurd of bewaard wordt. */
.vh-statisch-melding {
  margin: 16px 0 0;
  padding: 12px 16px;
  max-width: 720px;
  border: 1px dashed var(--e-global-color-rand);
  border-radius: 4px;
  font-family: var(--e-global-typography-text-font-family), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--e-global-color-text);
}

/* Op papier staat alles op zijn plek, ook wat nog niet in beeld gescrold was. */
@media print {
  .vh-woorden .vh-wi,
  [data-vh] > *,
  .vh-zoom img {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-vh~="lijnen"] > * {
    border-top-color: var(--e-global-color-primary) !important;
  }
  .vh-3d-canvas {
    display: none;
  }
  .vh-3d-still.is-3d img {
    visibility: visible;
  }
}

@keyframes vh-schuif {
  from { transform: translateY(105%); }
}
@keyframes vh-blok {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes vh-zoom {
  from { transform: scale(1.08); }
}