/* Publieke website: comfortabel bedienen en persoonlijk contact. */
html:not(.is-app) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold-ink); outline-offset:4px;
}
html:not(.is-app) :is(.site-footer,.hero,.contact-persoonlijk) :is(a,button,input,summary):focus-visible{
  outline-color:var(--gold-soft);
}
@media (max-width:1220px){
  html:not(.is-app) .nav-links{
    max-height:calc(100vh - var(--menu-top,74px) - 12px);
    max-height:calc(100dvh - var(--menu-top,74px) - 12px);
    overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable;
    padding-bottom:max(20px,env(safe-area-inset-bottom));
  }
  html:not(.is-app) .nav-links a{flex-shrink:0; min-height:48px}
}

.contact-grid--persoonlijk{gap:clamp(24px,4vw,54px); grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.contact-grid--persoonlijk > *, .contact-formkaart form, .contact-formkaart .field{min-width:0; max-width:100%}
.contact-formkaart .split{min-width:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.contact-formkaart fieldset{min-inline-size:0; max-inline-size:100%}
.contact-formkaart legend{width:100%; max-width:100%; white-space:normal; overflow-wrap:anywhere}
.contact-formkaart{padding:clamp(24px,4vw,42px); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--paper); box-shadow:0 18px 60px rgba(12,28,44,.055)}
.contact-keuze{min-width:0; margin:0 0 20px; padding:0; border:0}
.contact-keuze legend{font-family:var(--serif); font-weight:600; font-size:clamp(1.55rem,2.5vw,2rem);
  line-height:1.2; letter-spacing:-.025em; margin-bottom:22px; color:var(--ink)}
.contact-keuzes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:6px; background:var(--paper-2); border-radius:15px}
.contact-keuzes label{position:relative; min-width:0; margin:0; cursor:pointer}
.contact-keuzes input{position:absolute; width:1px; height:1px; opacity:0}
.contact-keuzes span{display:flex; min-height:52px; align-items:center; justify-content:center; padding:10px 13px;
  font-size:.92rem; font-weight:600; line-height:1.35; text-align:center; border:1px solid transparent; border-radius:10px;
  color:var(--text-soft); transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.contact-keuzes input:checked + span{background:var(--ink); color:#fff; box-shadow:var(--shadow-sm)}
.contact-keuzes input:focus-visible + span{outline:3px solid var(--gold-ink); outline-offset:3px}
.contact-formkaart .form-hint{font-size:1rem; line-height:1.65; margin:0 0 30px; color:var(--text-soft); max-width:48ch}
.contact-formkaart .field{margin-bottom:22px}
.contact-formkaart .field input,.contact-formkaart .field select{min-height:52px}
.contact-formkaart .field :is(input,select,textarea){min-width:0; max-width:100%}
.contact-formkaart .field-hint{font-size:.88rem; line-height:1.55}
.contact-voorkeur{min-width:0; margin:8px 0 26px; padding:22px 20px 18px; border:1px solid var(--line); border-radius:14px; background:var(--paper-2)}
.contact-voorkeur[hidden]{display:none}
.contact-voorkeur legend{padding:0 8px; font-weight:600; color:var(--ink); font-size:.95rem}
.contact-voorkeur-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
.contact-voorkeur .field{min-width:0; margin-bottom:14px}
.contact-voorkeur p{margin:0}
.contact-formkaart .btn[type=submit]{width:100%; max-width:100%; justify-content:center; min-height:54px; white-space:normal; text-align:center}
.contact-fout{padding:14px 16px; border-left:3px solid #9c2b2b; background:#fdf3f3; color:#7c2525; border-radius:8px; font-size:.95rem; line-height:1.6}
.contact-fout[hidden]{display:none}
.contact-persoonlijk{padding:clamp(28px,4vw,42px); background:var(--ink); color:#fff; border:1px solid var(--ink-3); border-radius:var(--radius-lg); box-shadow:var(--shadow-md)}
.contact-persoonlijk .eyebrow{color:var(--gold-soft); margin-bottom:22px}
.contact-persoonlijk h2{font-size:clamp(2rem,3vw,2.65rem); letter-spacing:-.035em; line-height:1.12; color:#fff; max-width:13ch; margin:0 0 24px}
.contact-persoonlijk .contact-persoonlijk-intro{font-size:1.02rem; line-height:1.7; color:#c8d3e2; margin-bottom:34px; max-width:35ch}
.contact-persoonlijk h3{font-family:var(--sans); font-size:.95rem; color:#fff; padding-top:28px; border-top:1px solid rgba(255,255,255,.17)}
.contact-persoonlijk .contact-list{margin-top:22px}
.contact-persoonlijk .contact-list li{border-color:rgba(255,255,255,.13)}
.contact-persoonlijk .contact-list li > div{min-width:0}
.contact-persoonlijk .contact-list a{overflow-wrap:anywhere}
.contact-persoonlijk .contact-list svg{color:var(--gold-soft)}
.contact-persoonlijk .contact-list a,.contact-persoonlijk .contact-list strong{color:#fff}
.contact-persoonlijk .contact-list span{color:#c8d3e2; font-size:.9rem; line-height:1.65}
.contact-formkaart .form-success.show{padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--paper-2)}
@media (max-width:900px){
  .contact-grid--persoonlijk{grid-template-columns:minmax(0,1fr)}
  .contact-persoonlijk h2{max-width:20ch}
  .contact-formkaart .split{grid-template-columns:minmax(0,1fr); gap:0}
}
@media (max-width:480px){
  .contact-formkaart{padding:24px 18px}
  .contact-keuzes{grid-template-columns:minmax(0,1fr)}
  .contact-persoonlijk{padding:26px 20px}
  .contact-voorkeur{padding:18px 14px}
  .contact-voorkeur-grid{grid-template-columns:minmax(0,1fr); gap:0}
}
@media (prefers-reduced-motion:reduce){.contact-keuzes span{transition:none}}