/**
 * Veton intake — contactpagina.
 *
 * Handgeschreven CSS, geen build. De SCSS-bron van dit thema
 * (assets/styles/) is sinds de baseline van 2026-06-24 niet meer
 * gecompileerd: build/main-style.css en _contact.scss dragen allebei nog
 * die datum, er staat nergens een package.json in de repo, en elke feature
 * sindsdien (veton-forms, partner-landing) is als los CSS-bestand geleverd.
 * Dit volgt dat patroon. Zie de PR voor wat er nodig is om de SCSS-keten
 * te herstellen.
 *
 * AFHANKELIJKHEID: de velden zelf staan NIET hier maar in
 * veton-forms.css (.vt-field / .vt-label), dat sitebreed geladen wordt.
 * Dat bestand is theme-CSS en overleeft het verwijderen van CF7; er staat
 * bovenaan wat er dan wel en niet weg mag. Verdwijnt het toch, dan staat
 * dit formulier zonder velden.
 *
 * Kleuren komen uit assets/styles/_variables.scss zodat ze overeenkomen met
 * de rest van het thema:
 *   $primary-color #C49E60   $heading-color #2A2A2A   $text-color #656565
 *   $border-color  #dbdadb   $bg-color      #f1f1f1   $bg-accent  #f9f5ee
 */

/* Op :root en niet op .vt-intake: dit bestand stuurt ook de contactgegevens
   in de rechterkolom aan, en daar is een token dat op .vt-intake staat
   onbekend. Een onbekende custom property maakt de hele declaratie
   ongeldig, zonder waarschuwing; de gouden linkkleur viel daardoor stil
   terug op het grijs van het thema. */
:root {
    --vt-gold: #C49E60;
    --vt-heading: #2A2A2A;
    --vt-text: #656565;
    --vt-border: #dbdadb;
    --vt-bg: #f1f1f1;
    --vt-accent: #f9f5ee;
}

/* ------------------------------------------------------------------ koppen */

/* De kop krijgt na een keuze de focus (zie focusOpVraag in de JS). Dat is
   geen bediening maar een landingsplek, dus zonder zichtbare ring. */
.vt-intake__titel:focus,
.vt-intake__kaarttitel:focus { outline: none; }

.vt-intake__titel,
.vt-intake__kaarttitel {
    color: var(--vt-heading);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 25px;
}

@media (min-width: 992px) {
    .vt-intake__titel,
    .vt-intake__kaarttitel { font-size: 24px; }
}

/* ------------------------------------------------------------- keuzelijsten */

/* ------------------------------------------------------- keuzelijsten

   Eén op één overgenomen uit de configurator, .vcc-step-option in
   veton-charger-configurator/assets/configure.css: de rij, de pearl van
   26px, de maten en de tijden. Dat is de keuzeknop die de bezoeker op
   /configure/ al kent, dus hier hoort dezelfde te staan.

   Wijzigt daar iets, wijzig het hier mee.                              */

.vt-intake__opties {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.vt-intake__optie {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin: 0;
    background: #f5f5f5;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background-color .2s ease;
}

.vt-intake__optie:hover { background: #ececec; }

.vt-intake__optie:has(input:checked),
.vt-intake__optie.is-gekozen { background: var(--vt-accent); }

.vt-intake__optie input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* De pearl. Ongekozen is er geen vulling, alleen een binnenschaduw van
   bovenaf die het schijfje ingedrukt laat lijken. Gekozen wordt het massief
   goud met een crèmekleurige rand eromheen. */
.vt-intake__box,
.vt-intake__check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
    margin-top: 1px;
    position: relative;
    transition: background-color 320ms ease, border-color 320ms ease;
}

.vt-intake__box { border-radius: 50%; }
.vt-intake__check { border-radius: 4px; }

.vt-intake__optie input:checked + .vt-intake__box,
.vt-intake__optie input:checked + .vt-intake__check {
    border-color: #ECE0CB;
    background-color: var(--vt-gold);
}

/* De checkbox draagt hetzelfde schijfje, met een wit vinkje erin zodra hij
   aan staat. Verder identiek, zodat de twee bij elkaar horen. */
.vt-intake__check::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 9px;
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform .18s cubic-bezier(.35, .9, .4, .9);
}

.vt-intake__optie input:checked + .vt-intake__check::after {
    transform: rotate(45deg) scale(1);
}

.vt-intake__optietekst {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.vt-intake__optielabel {
    font-size: 1rem;
    font-weight: 500;
    color: var(--vt-heading);
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vt-intake__optie--metsub .vt-intake__optielabel { font-size: 1.1rem; }

.vt-intake__optiesub {
    font-size: .9rem;
    font-weight: 400;
    color: #8C8C8C;
    line-height: 1.4;
}


/* --------------------------------------------------------------- de zinnen */

/* De twee zinnen lopen door als een alinea: "Ik ben particulier. Ik zoek
   een laadoplossing voor mijn bestaande woning." Ze breken alleen af waar
   de kolom op is, niet na het punt.

   Ze blijven wel twee alinea's in de HTML, want elk komt apart binnen en
   rolt apart zijn waarde. Ze staan daarom op inline: dan vallen de woorden
   van beide zinnen in dezelfde tekststroom en breekt de regel af waar hij
   vol is. Met een flexregel lukte dat niet, want dan is elke zin een eigen
   blok dat als geheel doorschuift, en begint de tweede op een nieuwe regel
   zodra de eerste is afgebroken. */
.vt-intake__zinnen { margin: 0 0 30px; }

.vt-intake__zin {
    display: inline;
    color: var(--vt-heading);
    font-size: 28px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    max-width: 100%;
}

/* Een spatie tussen de twee zinnen. Niet als marge, want tussen twee
   inline-elementen zonder witruimte mag de regel niet afbreken, en juist
   daar hoort dat te kunnen. */
.vt-intake__zin--tweede::before { content: " "; }

/* display: inline hierboven wint van het [hidden] van de browser, en dan
   blijft de wachtende tweede zin staan waar hij weg hoort. */
.vt-intake__zin[hidden] { display: none; }

@media (min-width: 992px) {
    .vt-intake__zin { font-size: 2.4rem; }
}

/* De langste waarde is "a certified electrician or installer". Die past
   niet meer op een telefoon zolang hij niet mag afbreken, en afbreken kan
   niet: de rol werkt met een absoluut gepositioneerde laag. Dus kleiner. */
@media (max-width: 575px) {
    .vt-intake__zin { font-size: 22px; }
}

/* De hele zinnenblok verbergen buiten de kwalificatie. Alleen deze, niet
   de wachtende zin: die moet juist wél te zien zijn, in het grijs, want ze
   toont de bezoeker wat er nog ingevuld moet worden. */
.vt-intake__zinnen[hidden] { display: none; }

.vt-intake__zin.is-wacht { color: var(--vt-text); }

/* In de banner niet: daar staan beide zinnen als volwaardige regels naast
   elkaar, met allebei een uitklaplijst. Het grijs liet de tweede lezen als
   uitgeschakeld terwijl hij even goed te beantwoorden is. De plaatshouder
   binnen het vakje blijft wel grijs, die zegt genoeg. */
.vt-intake--banner .vt-intake__zin.is-wacht { color: var(--vt-heading); }

/* Het grijze vakje klemt de rol af, zodat de tekst er letterlijk in en uit
   schuift in plaats van eromheen te zweven. */
/* Het grijze vakje klemt de rol af, zodat de tekst er letterlijk in en uit
   schuift in plaats van eromheen te zweven. */
.vt-intake__blank {
    font: inherit;
    color: var(--vt-heading);
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: inline;
}

.vt-intake__blank.is-leeg { color: var(--vt-text); }

.vt-intake__blankrol { display: inline; }

/* De markering ligt op de tekst en niet op een kader eromheen. Zo volgt ze
   elke regel, zoals een markeerstift, en loopt de waarde gewoon mee met de
   zin: ze breekt af waar de regel vol is in plaats van als blok naar de
   volgende regel te springen. box-decoration-break herhaalt de opvulling
   per regel; zonder die regel krijgt alleen de eerste regel een linkerrand
   en de laatste een rechter. */
.vt-intake__blanktekst {
    display: inline;
    background: var(--vt-blankvulling, var(--vt-bg));
    padding: 2px 10px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-color .15s ease;
}

.vt-intake__blank:hover .vt-intake__blanktekst { background: var(--vt-accent); }

/* Een nieuwe waarde komt woord voor woord binnen; dat doet vt-woord-in,
   dezelfde beweging als de woorden van de zin eromheen. */

/* Het leesteken hoort bij de waarde en staat dus in de markering. Als eigen
   element ernaast belandde het op een volgende regel zodra de waarde de
   regel precies volmaakte. Bij de uitklaplijst in de banner staat het wel
   los: daar breekt de waarde nooit af. */
.vt-intake__blanktekst::after { content: "."; }

/* Het thema zet in style-first.css de selector "a, body, div, li, p, span"
   op 1.1rem en #656565. Die raakt ELKE span, dus ook alles wat wij in de
   zin zetten, en een knop met font:inherit erft dan gewoon die 17,6px van
   zijn span-ouder. Dat ging twee keer mis: eerst bij de rol, daarna weer
   zodra ik het leesteken in een groep-span zette.
   Daarom niet per element maar in één keer voor alles in de zin. */
.vt-intake__zin span,
.vt-intake__zin button {
    font: inherit;
    color: inherit;
}


/* Er staat geen witruimte tussen de waarde en het leesteken, dus kan de
   regel daar niet breken en belandt het punt nooit alleen op een volgende
   regel. Daarvoor stond hier eerst nowrap, wat nu juist in de weg zou
   zitten: de waarde zelf moet wel kunnen afbreken. */
.vt-intake__eind { display: inline; }

/* Een haartje lucht tussen het vakje en het punt. Zonder die ruimte plakt
   het leesteken tegen de rand van het grijs en leest het als onderdeel van
   de waarde. Als marge en niet als spatie, want nowrap hierboven moet de
   twee wel bij elkaar houden. */
.vt-intake__punt { margin-left: .2em; }

/* Het potlood is icon-edit uit het veton-icoonlettertype. Dichtgeklapt
   staat het er wel, bij hover schuift het naar rechts open.

   De maat staat per plek vast in rem: 1rem in de zin, .5rem bij een tag.
   Niet in em, want dan zou hij in een zin van 40px meegroeien tot 20px en
   dat is te fors; en niet één vaste maat, want .5rem verdwijnt naast die
   grote letters. Twee maten dus, allebei bewust.

   vertical-align: middle in plaats van baseline, zodat het optisch naast de
   tekst hangt en niet eronder wegzakt bij grote letters. */
.vt-intake__potlood {
    display: inline-block;
    width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    font-size: .5rem;
    line-height: 1;
    vertical-align: middle;
    transition: width 200ms ease, margin-left 200ms ease, opacity 200ms ease;
}

/* In de zin staan letters van 40px; daar is .5rem een speldenprik. */
.vt-intake__blank .vt-intake__potlood { font-size: 1rem; }
.vt-intake__tag .vt-intake__potlood { font-size: .75rem; }

.vt-intake__blank:hover .vt-intake__potlood,
.vt-intake__blank:focus-visible .vt-intake__potlood,
.vt-intake__tag:hover .vt-intake__potlood,
.vt-intake__tag:focus-visible .vt-intake__potlood {
    width: 1em;
    margin-left: .5em;
    opacity: .75;
}

/* ------------------------------------------------------------------ tags

   Wat al beantwoord is maar niet in de zin staat. Zelfde grijs en zelfde
   accent bij hover als de keuzerijen, en dezelfde tekstgrootte, zodat het
   duidelijk bij die vragen hoort en niet bij de zin.                   */

.vt-intake__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.vt-intake__tags:empty { display: none; }

.vt-intake__tag {
    display: inline-flex;
    align-items: center;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--vt-heading);
    background: #f5f5f5;
    border: 0;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.vt-intake__tag:hover { background: var(--vt-accent); }
.vt-intake__tag .vt-intake__tagtekst { font: inherit; color: inherit; }
.vt-intake__tag.is-in { animation: vt-in 260ms cubic-bezier(0, 0, .2, 1) backwards; }

/* De zin komt binnen met dezelfde beweging als de keuzerijen. */
.vt-intake__zin.is-in { animation: vt-in 260ms cubic-bezier(0, 0, .2, 1) backwards; }

/* De keuzerijen verdwijnen één voor één naar boven en komen zo ook terug.
   De vertraging per rij staat in de JS (RIJ_STAP), zodat lijsten van
   verschillende lengte dezelfde golf houden. */
/* Weggaan is het binnenkomen omgekeerd: dezelfde 12px, dezelfde 260ms en
   dezelfde curve, alleen de andere kant op. */
@keyframes vt-in {
    from { transform: translateY(12px);   opacity: 0; }
    to   { transform: translateY(0);      opacity: 1; }
}

@keyframes vt-weg {
    from { transform: translateY(0);      opacity: 1; }
    to   { transform: translateY(-12px);  opacity: 0; }
}

.vt-intake__optie.is-in  { animation: vt-in 260ms cubic-bezier(0, 0, .2, 1) backwards; }

/* Na .is-in, zodat het weggaan wint mocht een rij ooit beide klassen
   dragen. Dat gebeurde: de rij hield .is-in vast en het weggaan liep nooit. */
.vt-intake__optie.is-weg { animation: vt-weg 260ms cubic-bezier(0, 0, .2, 1) forwards; }

/* ------------------------------------------------------------------ kaart */

.vt-intake__kaart {
    background: #fff;
    border: 1px solid var(--vt-border);
    padding: 25px 20px;
}

@media (min-width: 992px) {
    .vt-intake__kaart { padding: 30px; }
}

/* ------------------------------------------------------------- opnieuw-link */

.vt-intake__opnieuw { margin: 0 0 22px; }

.vt-intake__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 15px;
    color: var(--vt-gold);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.vt-intake__link:hover { text-decoration: underline; }

/* icon-start-over is de spiegelvariant van icon-refresh en zit als eigen
   glyph in het font, dus geen scaleX(-1). Geen eigen marge: de link is een
   flexregel met gap, en een marge erbovenop maakt de ruimte dubbel. */
.vt-intake__terugpijl {
    display: inline-block;
    font-size: .9em;
}

/* Eén ronde tegen de klok in bij hover, met de curve die we ook voor de
   pearls en de rijen gebruiken. Een animatie en geen transition: die zou
   bij het weghalen van de muis terugdraaien in plaats van rond te zijn. */
@keyframes vt-draai-terug {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

.vt-intake__opnieuw .vt-intake__link:hover .vt-intake__terugpijl,
.vt-intake__opnieuw .vt-intake__link:focus-visible .vt-intake__terugpijl {
    animation: vt-draai-terug 600ms cubic-bezier(.35, .9, .4, .9);
}

/* Geen streep onder de opnieuw-link: die zou ook onder het icoon lopen. */
.vt-intake__opnieuw .vt-intake__link:hover,
.vt-intake__opnieuw .vt-intake__link:focus-visible { text-decoration: none; }


/* Verschijnt alleen na een keuze met het toetsenbord: bij de muis brengt de
   klik je al naar de volgende stap, dus dan is deze knop er nooit. */
.vt-intake__volgende {
    margin-top: 18px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ velden

   De velden zelf komen uit assets/forms/veton-forms.css (.vt-field en
   .vt-label), dat sitebreed geladen wordt. Hier staat alleen de plaatsing
   in twee kolommen; geen enkele regel herhaalt de vormgeving.            */

.vt-intake__velden {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 36px;
}

@media (max-width: 575px) {
    .vt-intake__velden { grid-template-columns: 1fr; }
}

/* Het zwevende label gaat 20px boven het veld hangen, dus de rijafstand
   hierboven doet het werk. De eigen marge van .vt-field zou daar bovenop
   komen en de kolommen uit elkaar trekken. */
.vt-intake__velden .vt-field { margin-bottom: 0; }

.vt-intake__veld--breed { grid-column: 1 / -1; }

.vt-intake__velden textarea { min-height: 96px; resize: vertical; }

/* Een toestemming is geen keuze uit een lijst: geen grijs vlak, geen
   volle breedte, alleen het vakje en de tekst. */
.vt-intake__optie--los {
    background: none;
    padding: 0;
    margin-top: 30px;
    align-items: center;
}

.vt-intake__optie--los:hover { background: none; }
.vt-intake__optie--los .vt-intake__optielabel { font-weight: 400; }

/* Ook aangevinkt geen vlak. De regel hierboven met :has(input:checked)
   kleurt elke optie crème, en die is specifieker dan .vt-intake__optie--los
   (:has telt zijn zwaarste argument mee), dus won ze van het background:
   none hierboven. Gevolg: een crèmekleurige balk over de volle breedte van
   het formulier, precies het vlak dat hier niet hoort. */
.vt-intake__optie--los:has(input:checked),
.vt-intake__optie--los.is-gekozen { background: none; }

/* Het vakje is aangevinkt zelf al goud met een crème rand. Een gouden
   kader er vlak omheen leest dan als een tweede rand in plaats van als
   focus. Donker en met meer lucht, zodat het een ring blijft. */
.vt-intake .vt-intake__optie--los input:focus-visible + .vt-intake__check {
    outline: 2px solid var(--vt-heading);
    outline-offset: 4px;
}

.vt-intake__privacy {
    font-size: 14px;
    color: var(--vt-text);
    line-height: 1.5;
    margin: 25px 0 0;
    max-width: 56ch;
}

/* font: inherit is hier geen overbodige veiligheid: het thema zet in
   style-first.css de selector "a, body, div, li, p, span" op 1.1rem, en die
   raakt deze link. Zonder dit staat hij op 17,6px naast een zin van 14px. */
.vt-intake__privacy a {
    font: inherit;
    color: var(--vt-gold);
}

/* ------------------------------------------------------------------ acties

   Eén knop, altijd rechts: de doorgaande actie. Terug ga je via de tags of
   via de zin.                                                             */

.vt-intake__acties {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ------------------------------------------------------------ bevestiging

   Zelfde kader als een vraag, zodat het scherm niet ineens uit zijn omhulsel
   valt bij de laatste stap.                                              */

.vt-intake__bevestiging {
    background: #fff;
    border: 1px solid var(--vt-border);
    padding: 25px 20px;
}

@media (min-width: 992px) {
    .vt-intake__bevestiging { padding: 30px; }
}

.vt-intake__bevestiging .btn { margin-top: 26px; }

/* Het thema zet binnen .btn-primary de glyph absoluut in zijn <i>, met
   left: 0 en margin-left: -5px. Dat is gemaakt voor het pijltje dat bij
   hover naar rechts schuift, maar het breekt twee dingen hier: er komt geen
   ruimte tussen icoon en tekst, en een rotatie draait om een punt waar de
   glyph niet staat, dus het icoon zwiept in een boog weg.

   Hier dus terug in de normale stroom, met een eigen marge. (mr-10 bestaat
   niet in dit thema; alleen ml-10 wordt gebruikt en ook die staat niet in
   de gebouwde CSS.) */
.vt-intake__bevestiging .btn .vt-intake__terugpijl {
    position: static;
    display: inline-block;
    margin-right: 10px;
    transform-origin: 50% 50%;
}

.vt-intake__bevestiging .btn .vt-intake__terugpijl::before {
    position: static;
    transform: none;
    margin-left: 0;
}

/* Eén ronde tegen de klok in, nu om zijn eigen middelpunt. */
.vt-intake__bevestiging .btn:hover .vt-intake__terugpijl {
    animation: vt-draai-terug 600ms cubic-bezier(.35, .9, .4, .9);
}


.vt-intake__danktitel {
    color: var(--vt-heading);
    font-size: 24px;
    font-weight: 300;
    line-height: 1.35;
    max-width: 28ch;
    margin: 0 0 14px;
}

@media (min-width: 992px) {
    .vt-intake__danktitel { font-size: 30px; }
}

.vt-intake__dankregel {
    font-size: 17px;
    color: var(--vt-heading);
    line-height: 1.5;
    max-width: 46ch;
    margin: 0 0 8px;
}

.vt-intake__danknoot {
    font-size: 15px;
    color: var(--vt-text);
    line-height: 1.5;
    max-width: 46ch;
    margin: 0 0 8px;
}

.vt-intake__extra {
    margin: 32px 0 26px;
    padding-top: 26px;
    border-top: 1px solid var(--vt-border);
}

.vt-intake__extratitel {
    font-size: 17px;
    font-weight: 600;
    color: var(--vt-heading);
    margin: 0 0 4px;
}

.vt-intake__extraintro {
    font-size: 15px;
    color: var(--vt-text);
    margin: 0 0 18px;
}

/* -------------------------------------------------------------- toegankelijk */

/* Alleen waar de focus anders onzichtbaar zou zijn. De invoervelden staan
   er bewust niet bij: die laten hun gouden onderlijn vollopen zodra ze de
   focus krijgen, en dan is een kader eromheen een tweede signaal voor
   hetzelfde, dat bovendien dwars door de rustige vormgeving van het
   formulier snijdt. */
.vt-intake button:focus-visible,
.vt-intake .vt-intake__optie input:focus-visible + span {
    outline: 2px solid var(--vt-gold);
    outline-offset: 2px;
}

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

/* ---------------------------------------------------------- titelbalk

   De balk zelf heeft 20px boven en onder, maar de h1 erin draagt de
   standaard ondermarge van 8px van het thema. Gemeten op staging: 20px
   erboven, 29px eronder. Die marge doet hier niets, want de streep komt
   van de padding van de balk.                                        */

.page-template-contact .title-wrapper h1 { margin-bottom: 0; }

/* De afbeelding stond op flex: 1 om de kolom te vullen. Nu de gegevens
   eronder staan, moet ze haar eigen hoogte houden. */
.page-template-contact .contact-image .image-wrapper { flex: 0 0 auto; }
.page-template-contact .contact-image .contact-tiles { margin-top: 30px; }

/* --------------------------------------------------- gegevens rechts

   Staan in contact.php als terugval wanneer de ACF-repeater leeg is. De
   telefoon- en mailregel dragen een icoon uit het veton-lettertype.      */

.vt-contact-gegevens .contact-tile-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--vt-heading);
    margin: 0 0 6px;
}

.vt-contact-gegevens .street,
.vt-contact-gegevens .municipality,
.vt-contact-gegevens .country {
    font-size: 1rem;
    color: var(--vt-text);
    line-height: 1.5;
}

.vt-contact-regel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: var(--vt-gold);
    text-decoration: none;
    margin-bottom: 4px;
}

/* De span in de link moet expliciet erven. De themaregel "a, body, div, li,
   p, span" zet elke span op 1.1rem en #656565, en die wint van overerving;
   de link eromheen stond dus goud op 16px met een grijze tekst van 17,6px
   erin. Dit is de vierde plek waar diezelfde regel toeslaat. */
.vt-contact-regel span {
    font: inherit;
    color: inherit;
}

.vt-contact-regel:hover { color: var(--vt-heading); }
/* Het icoon draagt de gewone tekstkleur; alleen het adres ernaast is goud. */
.vt-contact-regel i {
    font-size: .9em;
    margin-right: 5px;
    color: var(--vt-text);
}

/* ══════════════════════════════════════════════════════════ banner

   Dezelfde intake als op de contactpagina, andere gedaante. Twee fases:
   eerst de uitnodiging, gecentreerd, met de eerste keuze als uitklaplijst;
   daarna twee kolommen met de zin links en de vraag rechts.

   De band was eerder een stuk hoger. Hij vult nu wat hij nodig heeft, want
   in fase 1 staat er weinig in en dan is veel lucht alleen maar leegte.   */

/* De band vult wat hij nodig heeft. In fase 1 staan er drie regels in, en
   dan is veel lucht alleen maar leegte. */
.contact-block {
    background: var(--vt-bg);
    padding: 44px 0;
}

@media (min-width: 992px) {
    .contact-block { padding: 56px 0; }
}

.vt-intake--banner {
    display: grid;
    gap: 40px;
    align-items: start;
}

/* Fase 1: één kolom, gecentreerd. De rechterkolom is er wel maar leeg. */
.vt-intake--banner.is-fase1 {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    justify-items: center;
}

.vt-intake--banner.is-fase1 .vt-intake__kolom--rechts { display: none; }

.vt-intake--banner .vt-intake__zin { max-width: none; }

/* De kop en de zin krijgen lucht ertussen: dit is de uitnodiging en de
   vraag, niet twee alinea's van dezelfde alinea. */
.vt-intake--banner.is-fase1 .vt-intake__bannerkop { margin-bottom: 48px; }

@media (min-width: 992px) {
    .vt-intake--banner.is-fase1 .vt-intake__bannerkop { margin-bottom: 60px; }
}

/* Fase 2: de zin links, de vraag rechts. */
@media (min-width: 992px) {
    .vt-intake--banner.is-fase2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
    }
}

.vt-intake__bannerkop { margin-bottom: 26px; }

/* Het gewicht staat er met een selector die van het thema wint: dat zet
   koppen op licht, en dan is deze kop even zwaar als de zin eronder en valt
   de rangorde weg. Hij mag de dominante regel zijn. */
.vt-intake .vt-intake__bannertitel {
    font-size: 28px;
    font-weight: 400;
    color: var(--vt-heading);
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0 0 16px;
}

@media (min-width: 992px) {
    .vt-intake .vt-intake__bannertitel { font-size: 36px; }
}

.vt-intake--banner.is-fase2 .vt-intake__bannertitel {
    font-size: 24px;
    margin-bottom: 22px;
}

/* Ruimer gezet dan de gewone lopende tekst: dit is een uitnodiging en
   krijgt de ruimte van een intro, niet van een bijschrift. */
/* Ook het gewicht expliciet: op licht leest 17px grijs op grijs slecht.
   64 tekens is de maat waarop deze tekst in drie regels valt, zoals in het
   ontwerp; smaller werden het er vijf. */
.vt-intake .vt-intake__bannertekst {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--vt-text);
    line-height: 1.6;
    max-width: 64ch;
    margin: 0 auto;
}

/* In de banner is de zin kleiner dan op de contactpagina: hij deelt de
   ruimte met een kop, een introtekst en een vraag ernaast. */
/* De invulplek draagt hier rgba(0,0,0,.03) en niet het vaste #f1f1f1 van de
   contactpagina. Daar is de achtergrond wit en valt dat grijs op; hier is de
   band zelf #f1f1f1, dus viel het vakje volledig weg. Een doorschijnende
   tint legt zich over de band in plaats van ertegenaan. */
/* Op de grijze band een doorschijnende tint in plaats van het vaste grijs
   van de contactpagina: die zou daar wegvallen. */
.vt-intake--banner .vt-intake__blank { --vt-blankvulling: rgba(0, 0, 0, .06); }

/* Bij hover dezelfde crèmekleur als op de contactpagina: dat is de
   aanraking van de huisstijl, niet nog een tint grijs. Ze is dekkend, dus
   ze legt zich over de band in plaats van ermee te vermengen. */
.vt-intake--banner .vt-intake__blank:hover .vt-intake__blanktekst { background: var(--vt-accent); }

/* De tags dragen hetzelfde. Hun vaste #f5f5f5 is lichter dan de band
   eromheen en liet ze als witte vlekken lezen; op de contactpagina staan ze
   op wit en klopt dat grijs wel. */
.vt-intake--banner .vt-intake__tag { background: rgba(0, 0, 0, .06); }
.vt-intake--banner .vt-intake__tag:hover { background: var(--vt-accent); }

/* Behalve de uitklaplijst: die draagt zijn eigen vulling op de knop
   erbinnen. Stond hij hier ook, dan lagen er twee doorschijnende lagen op
   elkaar en was het vakje dubbel zo donker als de andere. De regel hierboven
   is specifieker dan de algemene .vt-intake__blank--lijst, dus moet het hier
   staan. */
.vt-intake--banner .vt-intake__blank--lijst,
.vt-intake--banner .vt-intake__blank--lijst:hover { background: none; }

/* Het geheel gecentreerd binnen de band, met een maat waarop de zin en de
   vraag naast elkaar ademen in plaats van de volle containerbreedte te
   vullen. */
.vt-intake--banner {
    max-width: 1120px;
    margin-inline: auto;
}

@media (min-width: 992px) {
    .vt-intake--banner.is-fase2 { align-items: center; }
}

/* ---------------------------------------------------- wissel fase 1 → 2

   De banner verandert van gedaante: van één gecentreerde kolom met een
   uitnodiging naar twee kolommen met de zin links en een vraag rechts. Een
   harde herrender laat dat als een sprong lezen, dus valt de oude opstelling
   eerst weg (260ms, gelijk aan de wachttijd in teken()) en komt de nieuwe
   van onderaf binnen. De zinnen bouwen zichzelf daarbinnen nog steeds woord
   voor woord op; dit is de beweging van het geheel eromheen.              */

.vt-intake--banner {
    transition: opacity 260ms ease, transform 260ms ease;
}

.vt-intake--banner.is-fasewissel {
    opacity: 0;
    transform: translateY(-8px);
}

/* Een animation en geen transition: de eindstand moet van onderaf komen,
   terwijl het wegvallen naar boven ging. Met alleen een transitie zou hij
   langs dezelfde weg terugveren. */
.vt-intake--banner.is-binnen {
    animation: vt-fase-binnen 460ms cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes vt-fase-binnen {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vt-intake--banner { transition: none; }
    .vt-intake--banner.is-binnen { animation: none; }
}

/* De twee zinnen lopen door als één regel: "Ik ben particulier. Ik zoek een
   laadoplossing voor mijn bestaande woning." Ze blijven twee alinea's, want
   elk komt apart binnen en rolt apart zijn waarde, maar ze breken alleen af
   waar de ruimte op is en niet na het punt. De uitlijning volgt de fase:
   gecentreerd zolang het de uitnodiging is, links zodra de vraag ernaast
   staat. */
.vt-intake--banner.is-fase1 .vt-intake__zinnen { text-align: center; }
.vt-intake--banner.is-fase2 .vt-intake__zinnen { text-align: left; }

/* Ruimer gezet dan op de contactpagina: hier lopen de twee zinnen door als
   een regel en breken ze midden in de zin af, dus staan de regels dichter
   op elkaar dan wanneer elke zin zijn eigen alinea is. De onderrand blijft
   wel dezelfde 6px, zodat de afstand tot de tags gelijk oogt. */
.vt-intake--banner .vt-intake__zin {
    line-height: 1.5;
    margin-bottom: 6px;
}

.vt-intake--banner.is-fase2 .vt-intake__zin { text-align: left; }

.vt-intake--banner .vt-intake__zin { font-size: 24px; }

@media (min-width: 992px) {
    .vt-intake--banner .vt-intake__zin { font-size: 30px; }
}

/* ---------------------------------------------------------- uitklaplijst

   De popup komt van vetonEnhanceSelect uit veton-forms.js, dezelfde als op
   /your-details/ in de configurator: dezelfde rijen, hetzelfde zoekveld
   zodra er meer dan zeven opties zijn. De systeemeigen lijst is daar niet
   te stylen en oogt op elk besturingssysteem anders.

   Wat hier staat, maakt die knop inline. In een formulier is hij een blok
   over de volle breedte; midden in een zin moet hij meebewegen met zijn
   eigen tekst.                                                            */

/* overflow zichtbaar: de basisregel voor een invulplek knipt af omdat de
   waarde daar in en uit rolt. Hier rolt er niets, en dat afknippen zou de
   popup onzichtbaar maken terwijl hij wel opengaat. Dat was de fout. */
.vt-intake__blank--lijst {
    position: relative;
    display: inline-block;
    padding: 0;
    background: none;
    overflow: visible;
    vertical-align: baseline;
}

.vt-intake__blank--lijst .vt-select-display {
    display: inline-block;
    width: auto;
    padding: 2px 34px 2px 10px;
    font: inherit;
    line-height: inherit;
    color: var(--vt-heading);
    background-color: rgba(0, 0, 0, .06);
    background-image:
        linear-gradient(var(--vt-gold), var(--vt-gold)),
        linear-gradient(var(--vt-form-rest-line, #c9cdc9), var(--vt-form-rest-line, #c9cdc9));
    background-repeat: no-repeat, no-repeat;
    /* Moet mee overschreven worden. De basisregel in veton-forms.css heeft
       drie lagen en zet padding-box, border-box, border-box; hier zijn het
       er twee, dus erfde de gouden lijn padding-box en viel hij een pixel
       boven de rustlijn, met de transparante onderrand als grijze strook
       ertussen. Allebei border-box, zoals bij elk ander veld. */
    background-origin: border-box, border-box;
    background-position: left bottom, left bottom;
    background-size: 0 1px, 100% 1px;
    transition: background-size 300ms cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    white-space: nowrap;
}

.vt-intake__blank--lijst .vt-select-display:hover,
.vt-intake__blank--lijst.is-open .vt-select-display,
.vt-intake__blank--lijst .vt-select-display:focus {
    background-size: 100% 1px, 100% 1px;
    background-color: var(--vt-accent);
}

.vt-intake__blank--lijst .vt-select-display.is-placeholder { color: var(--vt-text); }

/* De pijl uit het icoonlettertype. icon-arrow-down bestaat niet in deze
   set; arrow-down-simple wel. */
.vt-intake__blank--lijst .vt-select-display::after {
    content: "\e90d";
    font-family: "veton" !important;
    font-size: .35em;
    line-height: 1;
    color: var(--vt-heading);
    background: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
}

/* De popup hangt onder de knop en mag de zin niet verbreden. */
.vt-intake__blank--lijst .vt-select-popup {
    min-width: 100%;
    width: max-content;
    max-width: 90vw;
    font-size: 1rem;
    text-align: left;
}

/* ------------------------------------------------------ woord voor woord */

/* De afstand in em en niet in pixels: bij letters van 40px was 6px zo
   weinig dat de golf als een gewone fade las, terwijl dezelfde 6px op een
   telefoon juist fors is. */
@keyframes vt-woord-in {
    from { opacity: 0; transform: translateY(.32em); }
    to   { opacity: 1; transform: translateY(0); }
}

.vt-intake__woord { display: inline-block; }
.vt-intake__woord.is-in { animation: vt-woord-in 380ms cubic-bezier(0, 0, .2, 1) backwards; }

/* ════════════════════════════════════════════════════ configurator

   Stap 3 van de configurator, "Project & installatie". Werkt zoals de
   contactpagina, maar alles in één kader: de zin links, de vraag met haar
   antwoorden rechts, van de eerste vraag af. De vraag heeft dan geen eigen
   kader meer, want het kader is het geheel. De kop en de introtekst staan
   in het sjabloon, boven de intake. De JS zet altijd .is-fase2.          */

.vt-intake--config {
    display: grid;
    gap: 40px;
    align-items: start;
    border: 1px solid var(--vt-border);
    padding: 28px 20px;
}

@media (min-width: 992px) {
    .vt-intake--config {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
        padding: 40px 40px 40px 60px;
        align-items: center;
    }
}

.vt-intake--config .vt-intake__bannerkop:empty,
.vt-intake--config .vt-intake__opnieuw { display: none; }

.vt-intake--config .vt-intake__kaart {
    border: 0;
    padding: 0;
    background: none;
}

.vt-intake--config .vt-intake__tags { margin-bottom: 0; }