/* Pagina Contact (public/website/contact.html). Bouwt voort op site.css en vraag-formulier.css. */
.contact-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:end;padding-top:80px;padding-bottom:44px}
.contact-hero h1{margin-bottom:0}
.contact-hero .intro{max-width:480px;margin:0}
.contact-snel{padding-bottom:44px}
.contact-snel h2,.contact-zij h2,.contact-gegevens h2{font:650 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 14px;color:var(--muted)}
.contact-snel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.contact-snel a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .18s,transform .18s}
.contact-snel a:hover{border-color:var(--copper);transform:translateY(-2px)}
.contact-snel strong{font-size:16px;font-weight:650}
.contact-snel strong::after{content:" \2192";color:var(--copper)}
.contact-snel span{font-size:14px;line-height:1.6;color:#65596c}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start;padding-bottom:64px}
.contact-kaart{background:#fff;border:1px solid #e6dfe9;border-radius:14px;padding:34px}
.contact-kaart h2{font:400 30px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-1px;margin:0 0 8px}
.contact-kaart .contact-uitleg{margin:0 0 6px;font-size:15px;line-height:1.7;color:#65596c}
/* Eigen pijl en appearance:none, anders negeert Safari de hoogte en is de keuze lager dan de andere velden. */
.contact-kaart select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23352541' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:40px!important;box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border:1px solid #b8a6c2;border-radius:10px;color:#352541;font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
.contact-kaart select:focus{outline:2px solid #51335d;outline-offset:2px}
.contact-kaart select[aria-invalid=true]{border-color:#a33f37}
.contact-kaart .vraag-tip{margin:4px 0 0;padding:12px 14px;border-radius:10px;background:var(--lilac);font-size:14px;line-height:1.6}
.contact-kaart .vraag-tip:empty{display:none}
.contact-kaart .vraag-tip a{color:#8f371f;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.contact-kaart .vraag-formulier .vraag-zelf{font-size:13px}
.contact-zij{display:grid;gap:30px;padding-top:8px}
.contact-zij section{border-top:1px solid var(--line);padding-top:20px}
.contact-zij ul{margin:0;padding-left:20px;display:grid;gap:10px}
.contact-zij li,.contact-zij p{margin:0;font-size:15px;line-height:1.75;color:#4b3f53}
.contact-zij a{color:#8f371f;text-decoration:underline;text-underline-offset:3px}
.contact-gegevens{padding-bottom:90px}
.contact-gegevens dl{margin:0;display:grid;grid-template-columns:repeat(5,auto);justify-content:start;gap:20px 48px;border-top:1px solid var(--line);padding-top:22px}
.contact-gegevens dt{font-size:12px;font-weight:650;color:var(--muted);margin-bottom:6px}
.contact-gegevens dd{margin:0;font-size:15px;line-height:1.6}
.contact-gegevens .contact-noot{display:block;font-size:13px;color:#65596c;max-width:260px}
.contact-gegevens .vraag-zelf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.contact-gegevens .vraag-adres{font-weight:600;user-select:all}
.contact-gegevens .vraag-kopieer{min-height:44px;padding:4px 14px;border:1px solid #b8a6c2;border-radius:22px;background:#fff;color:#352541;font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif}
.contact-gegevens .vraag-kopieer:hover{background:#f3eef7}
.contact-gegevens .vraag-gekopieerd{color:#2f5b2c;font-weight:600;font-size:13px}
.contact-gegevens .vraag-gekopieerd:empty{display:none}
@media(prefers-reduced-motion:reduce){.contact-snel a{transition:none}.contact-snel a:hover{transform:none}}
@media(max-width:1100px){.contact-snel ul{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-gegevens dl{grid-template-columns:repeat(3,auto)}}
@media(max-width:900px){
 .contact-hero{grid-template-columns:1fr;gap:20px;padding-top:50px;padding-bottom:32px}
 .contact-grid{grid-template-columns:minmax(0,1fr);gap:36px;padding-bottom:48px}
 .contact-gegevens dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 .contact-snel ul{grid-template-columns:minmax(0,1fr);gap:10px}
 .contact-snel a{padding:16px 18px}
 .contact-kaart{padding:24px 20px}
 .contact-gegevens dl{grid-template-columns:minmax(0,1fr)}
 .contact-gegevens .contact-noot{max-width:none}
}