/* Contact / Contacto pagina */
.contact-duo{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;max-width:1000px;margin:0 auto;padding:0 32px}
.gegevens p{color:var(--zacht);margin-bottom:20px}
.gegevens a{color:var(--goud);text-decoration:none}
.gegevens strong{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst);display:block;margin-bottom:6px}
.socials a{display:inline-block;margin-right:14px}

form{background:var(--paneel);padding:36px;border-radius:2px;border:1px solid var(--lijn)}
/* Het merkpatroon in het paneel om het formulier. De achtergrondafbeelding
   staat in de sjabloon zelf, omdat het pad daar wel klopt in de losse
   voorbeeldbestanden. Hier alleen de herhaling, de maat en de paneelkleur
   eronder, zodat de invulvelden wit en rustig blijven. */
.paneel-patroon{background-color:var(--paneel);background-repeat:repeat;background-size:260px auto;background-position:center top}
label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--tekst);margin:18px 0 8px}
label:first-child{margin-top:0}
input,textarea{width:100%;padding:13px;border:1px solid var(--lijn);border-radius:2px;font-family:Georgia,serif;font-size:1rem;background:#fff;color:var(--tekst)}
textarea{min-height:140px}
.privacy{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:.85rem;color:var(--zacht);text-transform:none;letter-spacing:0;font-weight:400}
.privacy input{width:auto;margin-top:3px}
button{background:transparent;border:1px solid var(--goud);color:var(--goud);padding:16px 40px;font-size:.75rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .3s}
button:hover{background:var(--goud);color:#fff}
.noot{font-style:italic;color:var(--zacht);font-size:.85rem;margin-top:16px}
.coletilla{margin-top:20px;padding:18px;border:1px solid var(--lijn);border-radius:2px;font-size:.76rem;color:var(--zacht);background:#fff}
.coletilla strong{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.04em;display:inline}

/* Locatiekaart */
.kaart-sectie{padding-top:0}
/* Zelfde binnenmarge als .contact-duo, zodat de kaart precies onder de gegevens
   en het formulier valt. Rand, afronding en schaduw zitten daarom op de kaart
   zelf en niet meer op het omhullende blok. */
.contact-kaart{max-width:1000px;margin:0 auto;padding:0 32px}
.contact-kaart .kaart-svg-link,.contact-kaart iframe{border:1px solid var(--lijn);border-radius:2px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(43,42,38,.35)}
.contact-kaart iframe{display:block;width:100%;height:420px;filter:grayscale(.15) saturate(.92)}
.kaart-svg-link{display:block;text-decoration:none}
.kaart-svg{display:block;width:100%;height:auto}
.kaart-link{max-width:1000px;margin:14px auto 0;padding:0 32px;text-align:right}
.kaart-link a{color:var(--goud);text-decoration:none;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.kaart-link a:hover{text-decoration:underline}

/* Het lokvalveld tegen spamrobots. Het staat wel in de bladzijde maar buiten
   beeld, zodat een bezoeker het nooit ziet en een robot het toch invult. */
.kantelberg-lokval{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* De eerste zichtbare label staat nu na twee verborgen velden, dus de
   oorspronkelijke regel label:first-child grijpt daar niet meer op aan. */
form > .kantelberg-lokval + label{margin-top:0}

/* Meldingen na het verzenden en de fouten per veld. */
.formulier-melding{padding:14px 18px;border-radius:2px;font-size:.9rem;margin-bottom:18px}
.formulier-melding.gelukt{border:1px solid var(--goud);color:var(--tekst);background:var(--paneel)}
.formulier-melding.mislukt{border:1px solid #b5544a;color:#8c3f37;background:#fbf3f1}
.veldfout{display:block;margin-top:7px;font-size:.8rem;color:#8c3f37}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#b5544a}

@media(max-width:860px){
  .contact-duo{grid-template-columns:1fr}
  .contact-kaart iframe{height:300px}
}