/* De contactpagina: links uitleg met het autootje dat een brief bezorgt, rechts het formulier in een kaart. */
body.contactpagina{background:var(--veld)}
.contact{max-width:1100px;margin:0 auto;padding:48px 24px 72px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}

.contact-intro{padding-top:8px}
.contact-intro h1{font:800 clamp(34px,4.2vw,52px)/1.02 var(--kop);letter-spacing:-.03em;margin:14px 0 14px}
.contact-intro .inleiding{font-size:19px;color:var(--inkt-2);margin:0 0 20px}
.beloftes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.beloftes li{position:relative;padding-left:28px;color:var(--inkt-2);font-size:15px}
.beloftes li::before{content:"";position:absolute;left:2px;top:5px;width:14px;height:8px;border-left:2.5px solid var(--groen);border-bottom:2.5px solid var(--groen);transform:rotate(-45deg)}

/* het autootje rijdt een klein stukje heen en weer, de brief wipt mee */
.post-auto{width:150px;height:88px;display:block}
.post-auto .rijdt{animation:bezorg 4s ease-in-out infinite}
.post-auto .brief{animation:wip 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes bezorg{0%,100%{transform:translateX(-6px)}50%{transform:translateX(10px)}}
@keyframes wip{0%,40%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}60%{transform:translateY(0) rotate(0)}}

.contact-kaart{background:var(--papier);border:1px solid var(--lijn);border-radius:20px;box-shadow:var(--schaduw);padding:28px 28px 26px}
form{display:grid;gap:18px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend,.veld{display:block;font-weight:600;font-size:15px;margin-bottom:8px;padding:0}
.veld small{font-weight:400;color:var(--grijs);margin-left:4px}

/* onderwerpen als knoppen */
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuze{position:relative;cursor:pointer}
.keuze input{position:absolute;opacity:0;width:1px;height:1px}
.keuze span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border:1.5px solid var(--lijn);border-radius:999px;font-size:14.5px;font-weight:500;color:var(--inkt-2);background:#fff;transition:border-color .15s,background .15s,color .15s,transform .15s}
.keuze svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.keuze:hover span{border-color:var(--inkt)}
.keuze input:checked + span{background:var(--inkt);border-color:var(--inkt);color:#fff;transform:translateY(-1px)}
.keuze input:focus-visible + span{outline:3px solid var(--spaarne);outline-offset:2px}

input:not([type=radio]),textarea{font:16px/1.45 var(--tekst);padding:12px 14px;border:1.5px solid #c7d0da;border-radius:12px;background:#fff;color:var(--inkt);width:100%}
input:not([type=radio]):focus,textarea:focus{outline:3px solid var(--spaarne-zacht);border-color:var(--spaarne)}
.tekstvak{position:relative;margin-top:-10px}
textarea{min-height:170px;resize:vertical;display:block}
textarea::placeholder{color:#8a96ab}
.teller{position:absolute;right:12px;bottom:10px;font-size:12px;color:var(--grijs);background:rgba(255,255,255,.9);padding:0 4px;border-radius:4px}
.teller.vol{color:var(--rood)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.verstuur{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.verstuur .knop{font-size:16px;padding:13px 20px 13px 22px}
.verstuur .knop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.verstuur .knop:hover svg{transform:translateX(3px)}
.verstuur .knop:disabled{opacity:.6;cursor:wait}
.status{font-size:15px}
.status.fout{color:var(--rood)}

.klaar{display:none;text-align:center;padding:26px 8px 10px}
.klaar.aan{display:block}
.klaar svg{width:64px;height:64px;animation:verschijn .5s cubic-bezier(.3,1.5,.5,1)}
.klaar h2{font:800 26px/1.15 var(--kop);letter-spacing:-.02em;margin:12px 0 6px}
.klaar p{color:var(--inkt-2);margin:0 0 18px}
@keyframes verschijn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

@media (max-width:860px){
  .contact{grid-template-columns:1fr;gap:24px;padding:28px 16px 56px}
  .contact-intro h1{margin-top:6px}
  .post-auto{width:110px;height:64px}
}
@media (max-width:520px){
  .contact-kaart{padding:20px 16px 20px;border-radius:16px}
  .twee{grid-template-columns:1fr}
  .keuze span{font-size:14px;padding:8px 12px 8px 10px}
  .verstuur .knop{width:100%;justify-content:center}
}