/* ==========================================================================
   Openingstijden & contact — gedeeld component
   Gemeten: container 1140, padding 30px 0 50px, twee panelen van 563x478 met
   25px padding en 20px tussenruimte. Links zwart, rechts crème.
   ========================================================================== */
/* Gemeten zijpadding: 0 desktop, 20px tablet, 10px mobiel */
.contact { padding-inline: 0; scroll-margin-top: var(--header-h); }
.contact__grid {
  display: flex;
  gap: var(--ruimte-md);
  padding: 30px 0 50px;
}
.contact__paneel {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-md);
  padding: 25px;
}
.contact__paneel--zwart { background: var(--kleur-zwart); color: var(--kleur-wit); }
.contact__paneel--creme { background: var(--kleur-creme); }

/* Gemeten: Nunito 18/700, lh 27, wit, gecentreerd */
/* Gemeten: rijen van 27px met 14,4px marge eronder (0,8em bij 18px), ook onder
   de laatste rij — samen 290px. Met een gap van 10px werd dat 249px. */
.openingstijden { display: flex; flex-direction: column; gap: 0; text-align: center; }
.openingstijden__rij { margin-bottom: 14.4px; }
.openingstijden__rij {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: var(--tekst-body-lg);
  font-weight: 700;
  line-height: 1.5;
}
.openingstijden dd { margin: 0; }

/* Gemeten: Nunito 20/400 op desktop, 17px op mobiel, gecentreerd */
.contactlijst { display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.contactlijst li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-sm);
  font-size: 20px;
  line-height: 1.5;
  text-align: center;          /* gemeten: het origineel centreert ook de tekst zelf */
}
.contactlijst svg { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--kleur-zwart); }
.contactlijst a { text-decoration: none; }
@media (hover: hover) and (min-width: 1025px) {
  .contactlijst a:hover { text-decoration: underline; }
}
.contact__kaart { flex: 1 1 auto; }
.contact__kaart iframe { width: 100%; height: 300px; display: block; border: 0; }

/* Gemeten: op tablet staan de twee panelen nog naast elkaar (350 en 350 breed);
   pas onder 768px komen ze onder elkaar. */
@media (max-width: 1024px) {
  .contact { padding-inline: 20px; }
  /* Zelfde reden als bij behandelingen: de 50px binnenpadding van de panelen
     maakte de kolommen ongelijk (332 en 361 in plaats van 350 en 350). */
  .contact__paneel { flex: 0 0 calc(50% - 10px); }
  /* Gemeten: 20px boven en onder op tablet, 0 op mobiel — niet 30/50 */
  .contact__grid { padding-block: 20px; }
}
@media (max-width: 767px) {
  .contact { padding-inline: 10px; }
  .contact__grid { flex-direction: column; padding-block: 0; }
  .contact__paneel { gap: var(--ruimte-sm); }
  .contactlijst li { font-size: var(--tekst-body); }
}